javascript - 使用 NuxtJS 访问视频摄像头

Question

我是 Vue 和 NuxtJs 的新手。我正在尝试使用 NuxtJs 构建网络摄像头，但遇到了一些问题

<template>
  <div class="photobooth">
    <div class="controls">
      <button @click="takePhoto">Take Photo</button>
    </div>

    <canvas class="photo"></canvas>
    <video class="player"></video>
    <div class="strip"></div>
  </div>
</template>

<script>
export default {
  head() {},
  data() {},
  methods: {
    getVideo() {
      let video = document.querySelector(".player");
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: false })
        .then(localMediaStream => {
          console.log(localMediaStream);
          video.srcObject = localMediaStream;
          video.play();
        })
        .catch(err => {
          console.error( err);
        });
    },

    takePhoto() {
      let strip = document.querySelector(".strip");
      let canvas = document.querySelector(".photo")
      const data = canvas.toDataURL("image/jpeg");
      const link = document.createElement("a");
      link.href = data;
      link.setAttribute("download", "newpic");
      link.innerHTML = `<img src="${data}" alt="newpic" />`;
      strip.insertBefore(link, strip.firstChild);
    }
  },
  beforeMount() {
    this.getVideo();
  }
};
</script>

我预计视频摄像头会被激活，但我得到了 TypeError:无法读取未定义的属性“hasOwnProperty”

Answer 1

我认为你应该使用 $refs 而不是 document.querySelector(".player") 来获取 DOM 引用。我创建了一个示例来说明如何使用它 here .