Javascript 由于我的组件，无法将属性“srcObject”设置为null

我正在使用Vue.Js处理一个小项目。我对srcObject有一个小问题，因为正如您所看到的，我正在将代码注入模态组件中。但是如果我移除了

错误正好出现在：videoPlayer.srcObject=stream

这是我在控制台中收到的错误消息：

这是我的代码：

---

模型绑定到showModal变量。仅当此值为true但默认值设置为false时，模型才会显示。因此，在将任何元素附加到模态之前，必须首先将该值设置为true

if(your condition is true){
   this.showModal = true;
   // write further logic to append the video element
}

---

错误是让您知道videoPlayer为空，因此无法为其分配属性。为什么它是空的？document.querySelector未能找到它。可能在挂载生命周期挂钩上，该元素尚未在DOM中，或者被v-if隐藏？再次查看，如果showModal为true，则该元素似乎仅在DOM中，而挂载上的showModal为false。这似乎是你的空引用错误的原因。你能给我一个使用我的代码的例子吗？请看我在你的主要帖子上留下的评论。调用initVideo函数时，showmodel为false。因此document.querySelector'video'将不返回任何内容，因为它不在文档中。亲爱的，你到底想实现什么。您是否试图通过API响应或道具在模型内播放视频？我只想播放视频：@MuhammadAtifAkram

<template>
  <div class="float-right">
    <button
      class="btn btn-sm btn-success"
      @click="showModal = true"
      data-toggle="modal"
      data-target="#addContact"
    >
      <i class="fas fa-plus"></i> Scan
    </button>
    <modal size="modal-sm" title="Scan a Business Card" v-if="showModal" @close="showModal = false">
      <div>
        <div id="stream">
          <div>
            <video ref="video" id="video" width="1024" height="576" autoplay></video>
          </div>
          <div>
            <button
              class="btn btn-dark btn-lg"
              style="margin-top: 5px; margin-bottom: 7px"
              id="snap"
              v-on:click="capture()"
            >Capture</button>
          </div>
          <canvas ref="canvas" id="canvas" width="640" height="480"></canvas>
          <ul>
            <li v-for="c in captures" :key="c.id">
              <img v-bind:src="c" height="50" />
            </li>
          </ul>
        </div>
      </div>
      <div>
        <canvas id="canvas" height="200" width="200"></canvas>
      </div>
      <template v-slot:footer>
        <button
          type="button"
          @click="$emit('close')"
          class="btn btn-default"
          data-dismiss="modal"
        >Close</button>
        <button type="button" class="btn btn-primary">SCAN</button>
      </template>
    </modal>
  </div>
</template>

<script>
import { getAPI } from "../../axios-api";
import Modal from "../../components/Modal.vue";

export default {
    components: { Modal },
    data: () => ({
        showModal: false,
        video: {},
        canvas: {},
        captures: []
    }),
    mounted() {
        this.initVideo();    
    },
    methods: {
        initVideo() {
            this.video = this.$refs.video;
            if (
                "mediaDevices" in navigator &&
                "getUserMedia" in navigator.mediaDevices
            ) {
               // const streamElem = document.getElementById('stream').appendChild('video')
                navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                const videoPlayer = document.querySelector("video");
                videoPlayer.srcObject = stream;
                videoPlayer.play();
            });
                console.log("init...");
            } else {
                alert("Livestream currently unavailable.");
            }
        },
        capture() {
        this.canvas = this.$refs.canvas;
        // this.canvas = document.querySelector("canvas");
        // this.canvas = document.getElementById("galleryCanvas");
        var context = this.canvas.getContext("2d");
        context.drawImage(this.video, 0, 0, 640, 480);
        this.captures.push(this.canvas.toDataURL("image/png"));
        }
    }
};
</script>

if(your condition is true){
   this.showModal = true;
   // write further logic to append the video element
}