js实现调取摄像头并实现截图功能

1、前置知识 window.navigator；window携带了该属性，以下为打印出的属性，其中mediaDevices是本次需要用到的属性，在其原型上，包含了enumerateDevices和getUserMedia方法。

首先采用enumerateDevices方法查看当前媒体设备是否存在。其中，videoinput代表视频设备，audioinput是音频设备。

2、实现打开摄像头、关闭摄像头、截图功能

js

<script>
export default {
  data() {
    return {
      mediaStream: null,
    }
  },
  methods: {
    //打开摄像头
    async openCamera() {
      let navigator = window.navigator
      let mediaDevices = navigator.mediaDevices
      let enumerateDevices = await mediaDevices.enumerateDevices()
      if (enumerateDevices) {
        try {
          this.mediaStream = await mediaDevices.getUserMedia({
            audio: true, //音频媒体
            video: {
              width: 400,
              height: 400,
              facingMode: 'environment', // 前置摄像头，调用后置摄像头: facingMode: { exact: "environment" } }
            },
          })
          if ('srcObject' in this.$refs.videoRef) {
            this.$refs.videoRef.srcObject = this.mediaStream
          } else {
            this.$refs.videoRef.src =
              window.URL?.createObjectURL(this.mediaStream) || this.mediaStream
          }

          this.$refs.videoRef.play()
        } catch (error) {
          console.log('错误提示', error.name, error.constraint)
        }
      }
    },
    //关闭摄像头
    closeCamera() {
      if (this.mediaStream) {
        let that = this
        this.mediaStream.getVideoTracks().forEach(function (track) {
          track.stop()
          that.$refs.videoRef.srcObject = null
        })
      }
    },
    //截图
    printScreen() {
      //获取video的宽高
      // let videoWidth = this.$refs.videoRef.videoWidth
      // let videoHeight = this.$refs.videoRef.videoHeight
      let canvas = document.createElement('canvas')
      canvas.width = 100 //videoWidth
      canvas.height = 100 //videoHeight
      //获取canvas上下文对象
      const context = canvas.getContext('2d')
      //截取图片绘制在画布上
      context.drawImage(this.$refs.videoRef, 0, 0, canvas.width, canvas.height)
      this.$refs.imagesRef.appendChild(canvas)
      context.clearRect(0, 0, context.width, context.height) //清除画布
    },
  },
}
</script>

html

<template>
  <div class="page" ref="page">
    <div class="video-wrapper">
      <video ref="videoRef" muted></video>
    </div>

    <div class="operations">
      <el-button @click="openCamera">打开摄像头</el-button>
      <el-button @click="closeCamera">关闭摄像头</el-button>
      <el-button @click="printScreen">截图</el-button>
    </div>

    <div class="images" ref="imagesRef"></div>
  </div>
</template>

css

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 10px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-wrapper {
  width: 400px;
  height: 400px;
  background: #000;
}
.operations {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
}
.images {
  height: 200px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
}
</style>

3、实现效果