【electron-vue】开启摄像头录制视频以及上传接口

开启摄像头

前情概要：需要在xx页面就开启录像，录制下用户对机子的一系列操作，到xx页面后关闭摄像头同时上传接口，后台可访问到此段回执视频

 async takePhotoUpload() {
      console.log('===========进入摄像头函数')
      let device = ''; // 所选择的摄像头 deviceId
      // 加入音频（ 直接 audio: true, video: true 无效 所以要单独写 而后再另外加入音频）
      let audioTracks = await navigator.mediaDevices
        .getUserMedia({ audio: true, video: false })
        .then(mediaStream => mediaStream.getAudioTracks()[0]);
		// 此处开启摄像头
      let stream = navigator.mediaDevices.enumerateDevices()
        .then(devices => { //多个摄像头设备时，该处根据设备id判断具体使用哪个摄像头设备
          for (let i in devices) {
            if (devices[i].kind == 'videoinput') {
              device = devices[i];
              break;
            }
          }
        })
        .then(async () => {
          navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
              sourceId: device.deviceId, // 把对应的 摄像头ID 放到这里
              // width: 500,
              height: 600, // 宽高可根据个人不同设计
              //如果拍照不清晰，考虑加入以下参数，但考虑下摄像头的高度和画布的高度
              width: { min: 1000, ideal: 1000, max: 3264 },
              // height:{min: 1080, ideal: 1080, max: 2488}
            }
          }).then(async (success) => {
            this.startType = 0; 
            sessionStorage.setItem('startType', this.startType)
            success.addTrack(audioTracks); //加入音频
            // this.$refs['video'].srcObject = success; //测试阶段通过播放来判断是否成功调取成功
            // this.$refs['video'].play();
            this.createRecorder(success);
            return
          })
            .catch(error => {
              console.error('摄像头开启失败，请检查摄像头是否可用！')
            })
        }) 
    },

开始录制

 // 初始化录制
createRecorder(stream) {
      console.log('初始化录制==========') 
      //const mimeType = 'video/webm;codecs=vp8,opus';
      recorder = new MediaRecorder(stream);
      recorder.start();

      let that = this;
      // 如果 start 没设置 timeslice，ondataavailable 在 stop 时会触发
      // 停止录制时触发 ， 在这里处理回调数据
      recorder.ondataavailable = event => {
        console.log(event, 'event');
        let blob = new Blob([event.data], {
          type: 'video/mp4',
        });
        // 将Blob转换为File
        const file = new File([blob], '测试', { type: "video/mp4" }); 
       //调用你的接口上传
        that.getSaveHzxx(file) 
        // 保存录制的视频到本地
        // that.saveMedia(blob);
      };
      recorder.onerror = err => {
        console.error(err);
      };
},

结束录制

 stopRecord() { 
      recorder.stop();
},

保存至本地 mp4 文件 / 接口

//引入fs模块
const fs = require("fs");

 saveMedia(blob) {
      console.log('进入saveMedia函数--------');
      console.log(blob, 'blob=====');
      let that = this;
      let reader = new FileReader();
      console.log(reader, 'reader');
      reader.onload = () => {
      	
        let buffer = new Buffer(reader.result);
        // 转换base64（不建议，视频过长数据量将过多）
       // var bitmap = new Buffer(buffer).toString('base64')
        
		// 保存到本地 名称自定义
         fs.writeFile('test.mp4', buffer, {}, (err, res) => {
           if (err) return console.error(err);
         });
      };
      reader.onerror = err => console.error(err, 'reader=err');
      reader.readAsArrayBuffer(blob);
    },

接口（非封装）请求上传

 getSaveHzxx(file) {  
      let that = this;

      var Axios = axios.create({
        timeout: 3600 * 1000,
      });
      console.log('拦截器==初始创建');
      //添加请求拦截器
      Axios.interceptors.request.use(
        function (config) {
          // 在发送请求之前处理
          // header头添加token
          config.headers["Authorization"] =
            "Bearer " + storeApp.get('tokenWssd');
          return config;
        },
        function (error) {
          // 发送请求错误处理
          console.info(error);
          return Promise.reject(error);
        }
      ); 
      if (param) {
        let req = "http://" + storeApp.get('baseUrl') + `/hzwj/.....`; //+ '/hzwj/hzwjfile'
        // 通过FormData将文件转成二进制数据
        let formData = new FormData();
        formData.append('hzsp', file)  // 将文件转二进制

        // 还可以携带其他信息一起上传 
        formData.append("hzlbbm", "102");
        formData.append("hzwjzslj", "");

        Axios(req, {
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data",
          },
          method: "post",
        }).then(res => {
          console.log(res, 'res===');
        })
      }
    },