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

Question

我正在使用 Vue.Js 做一个小项目我有一个小问题srcObject不起作用，因为我将我的代码注入到我的模态组件中，如您所见。（但如果我删除它，它会起作用<modal></modal>

错误恰好在：videoPlayer.srcObject = stream;

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

Uncaught (in promise) TypeError: Cannot set property 'srcObject' of null

这是我的代码：

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

标签： javascriptvue.js

Answer 1

模型绑定到 showModal 变量。模型仅在此值为 true 时出现，但默认情况下该值设置为 false。因此，在将任何元素附加到模态之前，您必须先将此值设置为 true。

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