邃芒智像大屏项目
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
 

83 рядки
2.1 KiB

  1. <template>
  2. <div class="page">
  3. <!-- Top section -->
  4. <div class="top">
  5. <div class="tips">提示区</div>
  6. <div class="showModel">展示模版</div>
  7. </div>
  8. <!-- Bottom section -->
  9. <div class="bottom">
  10. <div class="camera">
  11. <video
  12. ref="video"
  13. class="video-js vjs-default-skin"
  14. width="600"
  15. height="400"
  16. controls
  17. >
  18. <source src="https://playtv-live.ifeng.com/live/06OLEGEGM4G.m3u8" />
  19. </video>
  20. <video
  21. ref="videoElement"
  22. id="videoPlayer"
  23. class="video-js"
  24. muted
  25. ></video>
  26. <div v-show="photoUrl" id="results"></div>
  27. </div>
  28. <div class="btnBox">
  29. <div class="takeBtn" @click="takePhoto">拍照</div>
  30. <div v-show="photoUrl" class="takeBtn" @click="photoUrl = null">
  31. 重拍
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script setup>
  38. import { ref, onMounted } from "vue";
  39. import videojs from "video.js";
  40. let player;
  41. const photoUrl = ref(null);
  42. async function initCamera() {
  43. try {
  44. const videoElement = document.getElementById("videoPlayer");
  45. player = videojs(videoElement, {}, function () {});
  46. const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  47. // Attach the stream to the video element
  48. videoElement.srcObject = stream;
  49. videoElement.play();
  50. // Initialize Video.js with the video element
  51. } catch (error) {
  52. console.error("Error accessing camera:", error);
  53. }
  54. }
  55. function takePhoto() {
  56. // Capture a photo
  57. const videoElement = document.getElementById("videoPlayer");
  58. const canvas = document.createElement("canvas");
  59. canvas.width = videoElement.videoWidth;
  60. canvas.height = videoElement.videoHeight;
  61. const context = canvas.getContext("2d");
  62. context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  63. // Set the photo URL
  64. photoUrl.value = canvas.toDataURL("image/png");
  65. }
  66. onMounted(() => {
  67. initCamera();
  68. });
  69. </script>
  70. <style lang="scss" scoped>
  71. /* Your styles remain the same */
  72. </style>