|
- <template>
- <div class="page">
- <!-- Top section -->
- <div class="top">
- <div class="tips">提示区</div>
- <div class="showModel">展示模版</div>
- </div>
-
- <!-- Bottom section -->
- <div class="bottom">
- <div class="camera">
- <video
- ref="video"
- class="video-js vjs-default-skin"
- width="600"
- height="400"
- controls
- >
- <source src="https://playtv-live.ifeng.com/live/06OLEGEGM4G.m3u8" />
- </video>
- <video
- ref="videoElement"
- id="videoPlayer"
- class="video-js"
- muted
- ></video>
- <div v-show="photoUrl" id="results"></div>
- </div>
- <div class="btnBox">
- <div class="takeBtn" @click="takePhoto">拍照</div>
- <div v-show="photoUrl" class="takeBtn" @click="photoUrl = null">
- 重拍
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup>
- import { ref, onMounted } from "vue";
- import videojs from "video.js";
-
- let player;
- const photoUrl = ref(null);
-
- async function initCamera() {
- try {
- const videoElement = document.getElementById("videoPlayer");
- player = videojs(videoElement, {}, function () {});
- const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-
- // Attach the stream to the video element
- videoElement.srcObject = stream;
- videoElement.play();
-
- // Initialize Video.js with the video element
- } catch (error) {
- console.error("Error accessing camera:", error);
- }
- }
-
- function takePhoto() {
- // Capture a photo
- const videoElement = document.getElementById("videoPlayer");
- const canvas = document.createElement("canvas");
- canvas.width = videoElement.videoWidth;
- canvas.height = videoElement.videoHeight;
- const context = canvas.getContext("2d");
- context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-
- // Set the photo URL
- photoUrl.value = canvas.toDataURL("image/png");
- }
-
- onMounted(() => {
- initCamera();
- });
- </script>
-
- <style lang="scss" scoped>
- /* Your styles remain the same */
- </style>
|