js实现pc打开摄像头，拍照，下载

最新推荐文章于 2023-11-22 14:00:29 发布

gcc_front

最新推荐文章于 2023-11-22 14:00:29 发布

阅读量681

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/gcc_java/article/details/125994748

版权

Vue.js 人脸识别摄像头操作 canvas getUserMedia

关键词由CSDN通过智能技术生成

vue的环境，可直接拷取代码使用。
场景：简单的人脸识别需求

<template>
  <div>
    <el-button size="mini" type="primary" @click="callCamera">打开摄像头</el-button>
    <el-button size="mini" type="primary" @click="photograph">拍照</el-button>
    <el-button size="mini" type="primary" @click="downPhoto">下载</el-button>
    <el-button size="mini" type="primary" @click="closeCamera">关闭</el-button>
    <br>
    <br>
    <!--摄像头实时视频-->
    <video ref="video" width="640" height="480" autoplay></video>
    <!--canvas截取流-->
    <canvas ref="canvas" width="640" height="480"></canvas>
    <!--操作-->
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      imgBase64: '',
    }
  },
  methods: {
    // 参考文档： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
    // 调用摄像头
    callCamera () {
      // H5调用电脑摄像头API，成功则返回视频流
      navigator.mediaDevices.getUserMedia({
        video: true
      }).then(success => {
        // 摄像头开启成功
        this.$refs['video'].srcObject = success
        // 播放摄像头画面
        this.$refs['video'].play()
      }).catch(error => {
        console.error('摄像头开启失败，请检查摄像头是否可用！')
      })
    },
    // 拍照
    photograph () {
      let ctx = this.$refs['canvas'].getContext('2d')
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs['video'], 0, 0, 640, 480)
      // 转base64格式、图片格式转换、图片质量压缩
      let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)
      this.imgBase64 = imgBase64;
      // todo，校验大小时需要，单位kb
      // 由字节转换为KB 判断大小
      let str = imgBase64.replace('data:image/jpeg;base64,', '')
      let strLength = str.length
      let fileLength = parseInt(strLength - (strLength / 8) * 2)
      // 图片尺寸 用于判断
      let size = (fileLength / 1024).toFixed(2)
      console.log(size);
    },
    downPhoto() {
      // 保存到本地
      let  aDom = document.createElement('a')
      aDom.href = this.imgBase64;
      aDom.download = new Date().getTime() + '.jpeg'
      aDom.click()
    },
    // 关闭摄像头
    closeCamera () {
      if (!this.$refs['video'].srcObject) {
        return false;
      }
      let stream = this.$refs['video'].srcObject
      let tracks = stream.getTracks()
      tracks.forEach(track => {
        track.stop()
      })
      this.$refs['video'].srcObject = null
    },
  },
};
</script>