Javascript 使用NuxtJS访问视频cam

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

拍照
导出默认值{
头（）{}，
数据（）{}，
方法：{
getVideo（）{
让video=document.querySelector（“.player”）；
navigator.mediaDevices
.getUserMedia（{视频：真，音频：假}）
。然后（localMediaStream=>{
log（localMediaStream）；
video.srcObject=localMediaStream；
video.play（）；
})
.catch（错误=>{
控制台错误（err）；
});
},
拍照{
let strip=document.querySelector（“.strip”）；
让canvas=document.querySelector（“.photo”）
const data=canvas.toDataURL（“图像/jpeg”）；
const link=document.createElement（“a”）；
link.href=数据；
link.setAttribute（“下载”、“新图片”）；
link.innerHTML=`；
strip.insertBefore（link，strip.firstChild）；
}
},
beforeMount（）{
这是getVideo（）；
}
};

我希望摄像机被激活，但我得到了TypeError：

---

无法读取未定义的属性“hasOwnProperty”

我认为您应该使用

$refs

而不是

document.querySelector（“.player”）

来获取DOM引用。

---

我已经创建了一个如何使用它的示例。

我认为您应该使用

$refs

而不是

document.querySelector（.player”）

来获取DOM引用。

---

我已经创建了一个如何使用它的示例。

你确定定义了可变视频吗？是的，在getvideo函数中，除非我错了。你确定定义了可变视频吗？是的，在getvideo函数中，除非我错了