h5 视频录制

背景

由于业务需要在h5上面使用视频录制，百度了很久，要是是过期的api，要么就是不能用。现在弄好之后分项大家一起用。由于参考博客太多了，就不一一列举(主要是忘了，也不记得看了多少博客)。

页面

页面设计如下

这是一个h5 活体检测的页面，在页面挂载之后，就会初始化相机，并把相机的数据实时传入到 video 标签里面。

代码

页面

<template>
  <div style="background-color: #ffffff;">
    <close-title-bar :title="'实名认证'"></close-title-bar>
    <div class="videodiv">
      <video ref="video" controls="false" muted="true" width="300px" class="video"></video>
    </div>
    <div class="checkagain" @click="startRecord">开始录制</div>
  </div>
</template>

JS

<script>
import { NativeUI } from "../../utils/NativeUI";
export default {
  name: "StartCheckLive",
  data() {
    return {
      video: "",
      mediaRecorder: {},
      recorderFile: {},
      stream: {},
      textInfo: "请将头像放入相框正中间，准备检测"
    };
  },
  mounted() {
    this.openCamera();
    const constraints = { audio: true, video: { facingMode: "user" } };
  },
  methods: {
    //开始录制
    startRecord() {
      NativeUI.toast("开始检测，请按照提示做出相应的动作");
      this.mediaRecorder.start();
      const that = this;
      setTimeout(() => {
        this.stopRecord(function() {
          console.log(that.recorderFile);
          that.blobToBase64(that.recorderFile).then(function(base64) {
            console.log(base64);
          });
          console.log("录制成功");
        }, this.stream);
      }, 8 * 1000);
    },
    openCamera() {
      const that = this;
      this.getUserMedia(function(error, stream) {
        if (error) {
          console.log(error);
        } else {
          const video = that.$refs.video;
          that.mediaRecorder = new MediaRecorder(stream);
          that.stream = stream;
          //存储数据流
          let chunks = [];
          video.srcObject = stream;
          video.play();
          that.mediaRecorder.ondataavailable = function(e) {
            that.mediaRecorder.blobs.push(e.data);
            chunks.push(e.data);
          };
          that.mediaRecorder.blobs = [];
          that.mediaRecorder.onstop = function() {
            //数据流转换为 blob
            that.recorderFile = new Blob(chunks, { type: that.mediaRecorder.mimeType });
            chunks = [];
            if (null != that.stopRecordCallback) {
              that.stopRecordCallback();
            }
          };
        }
      });
    },
    //获取用户媒体设备
    getUserMedia(callback) {
      console.log("获取设备信息");
      // 这个用来控制你需要调取的设备
      const constraints = {
        audio: true, // 调用录音
        video: {
          deviceId: "default",
          facingMode: "user" //调用前置摄像头
        }
      };
      navigator.getUserMedia =
        navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
      if (navigator.getUserMedia) {
      	// 返回一个promise   需要详细了解https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/mediaDevices 前往这个地址
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function(stream) {
            console.log("then");
            callback(false, stream);
          })
          .catch(function(error) {
            callback(error);
          });
      } else {
        callback(new Error("您的浏览器暂不支持视频录制"));
      }
    },
    //停止录制
    stopRecord(callback, stream) {
      this.stopRecordCallback = callback;
      this.mediaRecorder.stop();
      this.closeStream(stream);
    },
    //关闭流
    closeStream(stream) {
      const tracks = stream.getTracks();
      tracks.forEach(track => {
        track.stop();
      });
    },
    //blob 转换 base64
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = e => {
          resolve(e.target.result);
        };
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error("文件流异常"));
        };
      });
    }
  }
};
</script>

样式

<style scoped>
.checkagain {
  background-color: #f44242;
  height: 35px;
  position: fixed;
  width: 90%;
  margin-left: 5%;
  transform: translateY(2.5%);
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
  line-height: 35px;
  bottom: 35px;
  color: #ffffff;
}
.videodiv {
  width: 200px;
  height: 200px;
  background-color: #999999;
  border-radius: 100px;
  margin-top: 30px;
  margin-left: calc((100% - 200px) / 2);
  overflow: hidden;
}
.video {
  position: relative;
  left: -35px;
}

由于从从Chrome 47 开始，无法从不安全的来源调用 getUserMedia API。所以在使用navigator.getUserMedia API的时候，需要在https或者localhost协议下。

代码基于Vue开发，直接粘贴过去就可以用。需要详细了解相关API ，请前往链接: link.https://developer.mozilla.org/zhCN/docs/Web/API/Navigator/mediaDevices