H5调用本地摄像头，并完成拍照 （PC）

1、唤醒本地摄像头

data:{
    videoWidth: 300,
    videoHeight: 240,

    /**canvas元素实例 */
    thisCancas: null,
    /**canvas上下文 */
    thisContext: null,
    /**video播放画面容器 */
    videoEv: null,
 }

一、基础版
  /**调起本地摄像头 */
    wakeUpPro() {
      var myConstraints = {
        video: {
          facingMode: "user", // 优先调用前置摄像头
        },
      };

      let _this = this;
      navigator.mediaDevices.getUserMedia(myConstraints).then(
        (stream) => {
          _this.videoPreviewDialog = true;
          _this.$nextTick(() => {
            _this.videoEv = document.querySelector("#video");
            _this.thisCancas = document.getElementById("canvasCamera");
            _this.thisContext = _this.thisCancas.getContext("2d");

            _this.videoEv.srcObject = stream;
            //播放视频
            _this.videoEv.play();
          });
        },
        (error) => {
          _this.$message.error("调用摄像头失败...");
          console.error(error.name || error);
        }
      );
    },

二、兼容版
    getCompetence() {
      this.videoPreviewDialog = true;
      this.$nextTick(() => {
        var _this = this;
        this.thisCancas = document.getElementById("canvasCamera");
        this.thisContext = this.thisCancas.getContext("2d");
        this.videoEv = document.querySelector("#video");
        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {};
        }
        // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
        // 使用getUserMedia，因为它会覆盖现有的属性。
        // 这里，如果缺少getUserMedia属性，就添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先获取现存的getUserMedia(如果存在)
            var getUserMedia =
              navigator.webkitGetUserMedia ||
              navigator.mozGetUserMedia ||
              navigator.getUserMedia;
            // 有些浏览器不支持，会返回错误信息
            // 保持接口一致
            if (!getUserMedia) {
              return Promise.reject(
                new Error("getUserMedia is not implemented in this browser")
              );
            }
            // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject);
            });
          };
        }
        var constraints = {
          audio: false,
          video: {
            width: this.videoWidth,
            height: this.videoHeight,
            transform: "scaleX(-1)",
          },
        };
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function (stream) {
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in _this.videoEv) {
              _this.videoEv.srcObject = stream;
            } else {
              // 避免在新的浏览器中使用它，因为它正在被弃用。
              _this.videoEv.src = window.URL.createObjectURL(stream);
            }
            _this.videoEv.onloadedmetadata = function (e) {
              _this.videoEv.play();
            };
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },

2、使用canvas画图

    //  绘制图片（拍照功能）
    setImage() {
      var _this = this;
      // 点击，canvas画图
      _this.thisContext.drawImage(
        _this.videoEv,
        0,
        0,
        _this.videoWidth,
        _this.videoHeight
      );
      // 获取图片base64链接
      _this.options.img = this.thisCancas.toDataURL("image/png");
    },

3、关闭摄像头

 // 关闭摄像头
    stopNavigator() {
      this.videoEv.srcObject.getTracks()[0].stop();
    },

4、PS:需要在https环境

参考文章

官方文档