title: Accessing video cam using NuxtJS
body: <p>I am new to Vue and NuxtJs. I am trying to build a webcam with NuxtJs and I am running into some issues</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="photobooth"&gt;
      &lt;div class="controls"&gt;
        &lt;button @click="takePhoto"&gt;Take Photo&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;canvas class="photo"&gt;&lt;/canvas&gt;
      &lt;video class="player"&gt;&lt;/video&gt;
      &lt;div class="strip"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    head() {},
    data() {},
    methods: {
      getVideo() {
        let video = document.querySelector(".player");
        navigator.mediaDevices
          .getUserMedia({ video: true, audio: false })
          .then(localMediaStream =&gt; {
            console.log(localMediaStream);
            video.srcObject = localMediaStream;
            video.play();
          })
          .catch(err =&gt; {
            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 = `&lt;img src="${data}" alt="newpic" /&gt;`;
        strip.insertBefore(link, strip.firstChild);
      }
    },
    beforeMount() {
      this.getVideo();
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I expected the video cam to be activated but rather I get TypeError:
  Cannot read property 'hasOwnProperty' of undefined</p>