vue PC端调用多个摄像头笔记

1、谷歌浏览器设置(设置)

 2、代码

 

<template>
  <div class="home">
    <div class="top"  >
      <div class="left" v-loading="loading">
        <h1>摄像头1</h1>
        <video ref="video1"  width="640" height="480"  autoplay style="background-color: black;"></video>
      </div>
      <div class="right" v-loading="loading">
        <h1>摄像头2</h1>
        <video ref="video2" width="640" height="480"  autoplay style="background-color: black;"></video>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <h1>照片</h1>
        <!--canvas截取流-->
        <canvas ref="canvas1" width="640" height="480" style="background-color: black;"></canvas>
      </div>
      <div class="right">
        <h1>照片</h1>
        <!--canvas截取流-->
        <canvas ref="canvas2" width="640" height="480" style="background-color: black;"></canvas>
      </div>
    </div>
    <div class="btns">
       <el-button type="primary" @click="callCamera" style="margin-right: 10px"
      >开启摄像头</el-button
    >
    <!--关闭摄像头-->
    <el-button type="primary" @click="closeCamera">关闭摄像头</el-button>
    <el-button type="primary" @click="photograph">拍照</el-button>
    </div>
   
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading:false,
      devicesIds: [], //摄像头数组
    };
  },
  created() {
    this.init();
  },
  methods: {
    //
    async init() {
      try {
        let devices = await navigator.mediaDevices.enumerateDevices();
        console.log(devices, "设备");
        devices.forEach((device) => {
          if (device.kind == "videoinput") {
            this.devicesIds.push(device.deviceId);
          }
        });
        console.log(this.devicesIds, "摄像头");
      } catch (error) {}
    },
    // 调用摄像头
    callCamera() {
      this.loading=true
      //console.log(this.devicesIds)
      this.devicesIds.forEach((item,index)=>{
        // H5调用电脑摄像头API
      navigator.mediaDevices
        .getUserMedia({
          video: {
            deviceId:{exact:item},
          },
        })
        .then((success) => {
          // console.log(success,'流')
          // 摄像头开启成功
          this.$refs[`video${index+1}`].srcObject = success;
          // 实时拍照效果
          this.$refs[`video${index+1}`].play();
          this.loading=false
        })
        .catch((error) => {
          console.error("摄像头开启失败，请检查摄像头是否可用！");
        });
      })
      
    },
    // 拍照
    photograph() {
       this.devicesIds.forEach((item,index)=>{
      let ctx = this.$refs[`canvas${index+1}`].getContext("2d");
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs[`video${index+1}`], 0, 0, 640, 480);
      // 转base64格式、图片格式转换、图片质量压缩---支持两种格式image/jpeg+image/png
      let imgBase64 = this.$refs[`canvas${index+1}`].toDataURL("image/jpeg", 0.7);

      /**------------到这里为止，就拿到了base64位置的地址，后面是下载功能----------*/

      // 由字节转换为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); // 上传拍照信息  调用接口上传图片 .........
      // 保存到本地
      let ADOM = document.createElement("a");
      ADOM.href = imgBase64;
      ADOM.download = new Date().getTime() + ".jpeg";
      ADOM.click();
      })
    },
    // 关闭摄像头
    closeCamera() {
      if (!this.$refs["video"].srcObject) return;
      let stream = this.$refs["video"].srcObject;
      let tracks = stream.getTracks();
      tracks.forEach((track) => {
        track.stop();
      });
      this.$refs["video"].srcObject = null;
    },
  },
};
</script>
<style scoped lang='scss'>
.home{
  width: 100%;
  background: #ccc;
  .top,.bottom{
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
  }
  .btns{
    padding:40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>