js 实现调用电脑端摄像头

电脑的调用摄像头，需要考虑兼容性问题，以下demo亲测 chrome 生效，可以实现开启摄像头、截取图像、关闭摄像头。

template 模版内容：

  <div>
    <video style="width: 400rpx; height: 400rpx"></video>
    <canvas width="200px" height="150px"></canvas>

    <div @click="openVideo">开启摄像头</div>
    <div @click="snapVideo">截取图像</div>
    <div @click="closeVideo">关闭摄像头</div>
  </div>

js 代码如下：

export default {
  data() {
    return {
      video: null,
      MediaStreamTrack: null,
    };
  },
  methods: {
    openVideo() {
      let _ = this;
      this.video = document.querySelector("video");

      if (window.navigator.webkitGetUserMedia) {
        window.navigator.webkitGetUserMedia(
          {
            audio: true,
            video: true,
          },
          (stream) => {
            this.MediaStreamTrack =
              typeof stream.stop === "function"
                ? stream
                : stream.getTracks()[1];

            //把摄像头捕捉到的数据给视频
            _.video.srcObject = stream;
            // _.video.src = window.URL.createObjectURL(stream);
            _.video.play();

            console.log(stream);
          },
          (err) => {}
        );
      }
    },
    snapVideo() {
      let context = document.querySelector("canvas").getContext("2d");

      context.drawImage(this.video, 0, 0, 200, 150);
    },
    closeVideo() {
      this.MediaStreamTrack && this.MediaStreamTrack.stop();
      this.MediaStreamTrack = null;
    },
  },
};