<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>
