Vue2调用电脑摄像头权限，并拍照

背景：

电脑端需要调取用户摄像头进行拍照

1.封装工具函数------获取用户摄像头设备

/** @desc 获取计算机外设列表 储存摄像头数据 */
getDevices() {
  return new Promise((resolve, reject) => {
    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
      window.alert("不支持 mediaDevices.enumerateDevices()");
    }
    navigator.mediaDevices
      .enumerateDevices()
      .then(devices => {
        let cameraList = [];
        devices.forEach((device, index) => {
          // 获取摄像头外设 videoinput
          if (device.kind && device.kind === "videoinput") {
            if (device.deviceId) {
              cameraList.push({
                id: device.deviceId,
                label: device.label
              });
            }
          }
        });
        resolve(cameraList);
      })
      .catch(err => {
        console.log(err.name + ": " + err.message);
        reject();
      });
  });
}

2.封装工具函数------获取用户摄像头设备

/** 
 * @desc 获取摄像头权限 getUserMedia 
 * deviceId	getDevices()函数获取的设备id
 * success  调用成功的回调函数
 * error	调用失败的回调函数
*/
getUserMedia(deviceId, success, error) {
  const constraints= {
      audio: false,
  	  video: {
         width: 300,
         height: 200,
         transform: "scaleX(-1)",
         deviceId: deviceId
      }
   };
  if (navigator.mediaDevices.getUserMedia) {
    //最新的标准API
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(success)
      .catch(error);
  } else if (navigator.webkitGetUserMedia) {
    //webkit核心浏览器
    navigator.webkitGetUserMedia(constraints, success, error);
  } else if (navigator.mozGetUserMedia) {
    //firfox浏览器
    navigator.mozGetUserMedia(constraints, success, error);
  } else if (navigator.getUserMedia) {
    //旧版API
    navigator.getUserMedia(constraints, success, error);
  }
}

3.调用摄像头

/** @desc 摄像头使能封装 */
enableCamera(deviceId) {
  this.getUserMedia(
    deviceId,
    stream => {
      if ("srcObject" in this.thisVideo) {
        this.thisVideo.srcObject = stream;
      } else {
        // 避免在新的浏览器中使用它，新浏览器正在被弃用。没有开启摄像头权限或浏览器版本不兼容
        this.thisVideo.src = window.URL.createObjectURL(stream);
      }
      this.thisVideo.onloadedmetadata = e => {
        this.thisVideo.play();
      };
    },
    error => {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
      alert("摄像头打开失败，请检查摄像头并点击浏览器地址栏右侧的摄像头标志进行开启设置");
    }
  );
},
// 拍照
handlePhotograph() {
  	this.thisContext.drawImage(this.thisVideo, 0, 0, 300, 200);
 	// 获取图片base64链接;
 	this.imgSrc = this.thisCanvas.toDataURL("image/png", 0.7);
},

完整代码：

<template>
  <div>
    <video id="videoCamera" autoplay></video>
    <img id="save_img" :src="imgSrc" alt="" />
    <canvas
      style="display: none"
      id="canvasCamera"
      :width="videoWidth"
      :height="videoHeight"
    ></canvas>
    <!--确认-->
    <button @click="handlePhotograph">拍照</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoWidth: 300,
      videoHeight: 200,
      cameraList: [{ id: "", label: "摄像头1" }],
      currentCamera: "",
      imgSrc: ""
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getDevices().then(res => {
      if (res.length) {
        this.cameraList = res;
      }
      this.currentCamera = this.cameraList[0].id;
      this.main();
    });
  },

  methods: {
    main() {
      this.thisCanvas = document.getElementById("canvasCamera");
      this.thisContext = this.thisCanvas.getContext("2d");
      this.thisVideo = document.getElementById("videoCamera");
      this.enableCamera(this.currentCamera);
    },
    getDevices() {
      return new Promise((resolve, reject) => {
        if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
          window.alert("不支持 mediaDevices.enumerateDevices()");
        }
        navigator.mediaDevices
          .enumerateDevices()
          .then(devices => {
            let cameraList = [];
            devices.forEach((device, index) => {
              // 获取摄像头外设 videoinput
              if (device.kind && device.kind === "videoinput") {
                if (device.deviceId) {
                  cameraList.push({
                    id: device.deviceId,
                    label: device.label
                  });
                }
              }
            });
            resolve(cameraList);
          })
          .catch(err => {
            console.log(err.name + ": " + err.message);
            reject();
          });
      });
    },
    /**
     * @desc 获取摄像头权限 getUserMedia
     * deviceId	getDevices()函数获取的设备id
     * success  调用成功的回调函数
     * error	调用失败的回调函数
     */
    getUserMedia(deviceId, success, error) {
      const constraints = {
        audio: false,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
          transform: "scaleX(-1)",
          deviceId: deviceId
        }
      };
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(success)
          .catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, success, error);
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    } /** @desc 摄像头使能封装 */,
    enableCamera(deviceId) {
      this.getUserMedia(
        deviceId,
        stream => {
          if ("srcObject" in this.thisVideo) {
            this.thisVideo.srcObject = stream;
          } else {
            // 避免在新的浏览器中使用它，新浏览器正在被弃用。没有开启摄像头权限或浏览器版本不兼容
            this.thisVideo.src = window.URL.createObjectURL(stream);
          }
          this.thisVideo.onloadedmetadata = e => {
            this.thisVideo.play();
          };
        },
        error => {
          console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
          alert("摄像头打开失败，请检查摄像头并点击浏览器地址栏右侧的摄像头标志进行开启设置");
        }
      );
    },
    // 拍照
    handlePhotograph() {
      this.thisContext.drawImage(this.thisVideo, 0, 0, 300, 200);
      // 获取图片base64链接;
      this.imgSrc = this.thisCanvas.toDataURL("image/png", 0.7);
    }
  }
};
</script>
<style lang="scss" scoped></style>