title: Cannot set property 'srcObject' of null, because of my component
body: <p>I'm working on a small project using Vue.Js I have a small issue with <code>srcObject</code> doesn't work because Im injecting my code inside my modal component as you can see. ( but it works if i remove the <code>&lt;modal&gt;&lt;/modal&gt;</code></p>
  <p>The error exactly in : <code>videoPlayer.srcObject = stream;</code></p>
  <p><strong>This is the error message I get in my console:</strong></p>
  <pre><code>Uncaught (in promise) TypeError: Cannot set property 'srcObject' of null
  </code></pre>
  <p><strong>This is my code :</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;float-right&quot;&gt;
      &lt;button
        class=&quot;btn btn-sm btn-success&quot;
        @click=&quot;showModal = true&quot;
        data-toggle=&quot;modal&quot;
        data-target=&quot;#addContact&quot;
      &gt;
        &lt;i class=&quot;fas fa-plus&quot;&gt;&lt;/i&gt; Scan
      &lt;/button&gt;
      &lt;modal size=&quot;modal-sm&quot; title=&quot;Scan a Business Card&quot; v-if=&quot;showModal&quot; @close=&quot;showModal = false&quot;&gt;
        &lt;div&gt;
          &lt;div id=&quot;stream&quot;&gt;
            &lt;div&gt;
              &lt;video ref=&quot;video&quot; id=&quot;video&quot; width=&quot;1024&quot; height=&quot;576&quot; autoplay&gt;&lt;/video&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button
                class=&quot;btn btn-dark btn-lg&quot;
                style=&quot;margin-top: 5px; margin-bottom: 7px&quot;
                id=&quot;snap&quot;
                v-on:click=&quot;capture()&quot;
              &gt;Capture&lt;/button&gt;
            &lt;/div&gt;
            &lt;canvas ref=&quot;canvas&quot; id=&quot;canvas&quot; width=&quot;640&quot; height=&quot;480&quot;&gt;&lt;/canvas&gt;
            &lt;ul&gt;
              &lt;li v-for=&quot;c in captures&quot; :key=&quot;c.id&quot;&gt;
                &lt;img v-bind:src=&quot;c&quot; height=&quot;50&quot; /&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;canvas id=&quot;canvas&quot; height=&quot;200&quot; width=&quot;200&quot;&gt;&lt;/canvas&gt;
        &lt;/div&gt;
        &lt;template v-slot:footer&gt;
          &lt;button
            type=&quot;button&quot;
            @click=&quot;$emit('close')&quot;
            class=&quot;btn btn-default&quot;
            data-dismiss=&quot;modal&quot;
          &gt;Close&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;SCAN&lt;/button&gt;
        &lt;/template&gt;
      &lt;/modal&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { getAPI } from &quot;../../axios-api&quot;;
  import Modal from &quot;../../components/Modal.vue&quot;;
  
  export default {
      components: { Modal },
      data: () =&gt; ({
          showModal: false,
          video: {},
          canvas: {},
          captures: []
      }),
      mounted() {
          this.initVideo();    
      },
      methods: {
          initVideo() {
              this.video = this.$refs.video;
              if (
                  &quot;mediaDevices&quot; in navigator &amp;&amp;
                  &quot;getUserMedia&quot; in navigator.mediaDevices
              ) {
                 // const streamElem = document.getElementById('stream').appendChild('video')
                  navigator.mediaDevices.getUserMedia({ video: true }).then(stream =&gt; {
                  const videoPlayer = document.querySelector(&quot;video&quot;);
                  videoPlayer.srcObject = stream;
                  videoPlayer.play();
              });
                  console.log(&quot;init...&quot;);
              } else {
                  alert(&quot;Livestream currently unavailable.&quot;);
              }
          },
          capture() {
          this.canvas = this.$refs.canvas;
          // this.canvas = document.querySelector(&quot;canvas&quot;);
          // this.canvas = document.getElementById(&quot;galleryCanvas&quot;);
          var context = this.canvas.getContext(&quot;2d&quot;);
          context.drawImage(this.video, 0, 0, 640, 480);
          this.captures.push(this.canvas.toDataURL(&quot;image/png&quot;));
          }
      }
  };
  &lt;/script&gt;
  </code></pre>