使用NuxtJS访问摄像机

Question

我是Vue和NuxtJ的新手。我正在尝试使用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。