示例：H5中通过 web 录制视频（摄像头）并上传

1.背景

想通过 web 录制视频，并将视频上传到后端要怎么实现呢？

2.整体思路

• 打开摄像头 ：MediaDevices.getUserMedia()
• 录制：使用 MediaRecorder
• 内存存储：创建一个 [] 数组，存放字节，再转成 blob 对象。
• 上传：构建file，再到 formData，使用ajax发起HTTP 请求

3.实现方式

获得摄像头设备

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

**MediaDevices.getUserMedia()** 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

MediaStream 接口是一个媒体内容的流.。一个流包含几个轨道，比如视频和音频轨道。

录制

MediaRecorder() 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象

var mediaRecorder = new MediaRecorder(stream[, options]);

...


if (navigator.mediaDevices.getUserMedia) {
  var constraints = { audio: true, video: true };
  var chunks = [];

  var onSuccess = function(stream) {
    var options = {
      audioBitsPerSecond : 128000,
      videoBitsPerSecond : 2500000,
      mimeType : 'video/mp4'
    }
    var mediaRecorder = new MediaRecorder(stream,options);
    m = mediaRecorder;

...

获得录制过程中的 数据

MediaRecorder.ondataavailable 调用它用来处理 dataavailable 事件, 该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)

//  当停止录像以后的回调函数
      _mediaRecorder.ondataavailable = function (data) {
          console.log("# 产生录制数据...");
          console.log(data);
          console.log("# ondataavailable, size = " + parseInt(data.size/1024) + "KB");
          _chunks.push(data);
      };
      _mediaRecorder.onstop = function(e) {
          console.log("# 录制终止 ...");
          const fullBlob = new Blob(_chunks);
          const blobURL = window.URL.createObjectURL(fullBlob);
          console.log("blob is ?, size="+parseInt(fullBlob.size/1024)+"KB. "); console.log(fullBlob);
          console.log("blobURL =" + blobURL);
          //saveFile(blobURL);
          uploadFile(fullBlob);
        }

从 blob 转成 file

方法： var myFile = new File(bits, name[, options]);
参数说明：
bits: 一个包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
name: USVString，表示文件名称，或者文件路径。

示例：

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

保存文件 到本地文件

生成一个 A 标签，赋值 href 和 download 属性即可。

  // 保存文件（产生下载的效果)
    let saveFile = function(blob){
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = blob;
      link.download = 'media_.mp4';
      document.body.appendChild(link);
      link.click();
      link.remove();
    }

上传到后端服务

• 创建file对象： file = new File([blob], "media_.mp4");
• 构建成 fromData: var formData = new FormData();
• 再 Ajax 上传即可。

let uploadFile = function(blob){
      var file = new File([blob], "media_.mp4");
      var formData = new FormData();
      formData.append('file', file);
      console.log(formData);
      console.log("# 准备上传, fileName="+file.name +", size="+ parseInt(file.size/1024)+" KB");
      let $output = $("#output");
      $.ajax({
          type:"POST",
          url: "/uploadvideo",
          data: formData,
          processData: false,
          contentType: false,
          success:function (){
             $output.prepend("上传视频成功!");
           },
          error : function() {
            $output.prepend("上传视频失败!");
          }
       });
    }

判断其 MIME 格式能否被客户端录制

MediaRecorder.isTypeSupported()方法会判断其 MIME 格式能否被客户端录制。

var canRecord = MediaRecorder.isTypeSupported(mimeType)

            "video/webm",
             "audio/webm",
             "video/webm\;codecs=vp8",
             "video/webm\;codecs=daala",
             "video/webm\;codecs=h264",
             "audio/webm\;codecs=opus",
             "video/mpeg"

关闭视频流

遍历 _mediaStream ，终止所有的 track 即可。

    // 关闭流
    var closeMediaStream = function(){
      if(!_mediaStream) return;
      console.log("# 关闭数据流");
      _mediaStream.getTracks().forEach(function (track) {
        track.stop();
      });
      _mediaStream = undefined;
      _mediaRecorder = undefined;
    }

后端代码：接收视频文件

创建一个 controller ，接收 MultipartFile 参数，保存文件流即可。

/**
 * @description:
 * @author: zhangyunfei
 * @date: 2021/4/25 19:22
 */
@RestController
@RequestMapping()
public class UploadFileController {
    public static final String IMAGE_STORE_DIR = "/Users/zhangyunfei/git/demo/video2/public";
    private static final String TAG = UploadFileController.class.getSimpleName();


    @PostMapping(value = "/uploadvideo", name = "接收上传文件")
    public String uploadVideo(@RequestParam("file") MultipartFile uploadFile) {
        String name = uploadFile.getOriginalFilename();
        String size = String.format("%.2f MB", uploadFile.getSize() / 1024f / 1024f);
        System.out.println(String.format("# name=%s, size=%s", name, size));
        saveFile(uploadFile);
        return "ok";
    }

    private void saveFile(MultipartFile uploadFile) {
        try {
            String fileName = UUID.randomUUID().toString() + ".mp4";
            File path = new File(IMAGE_STORE_DIR, fileName);
            uploadFile.transferTo(path);
            LogUtil.d(TAG, "## 保存文件成功，路径=%s", path.getPath());
        } catch (IOException e) {
            e.printStackTrace();
            LogUtil.d(TAG, "## 保存文件失败，%s", e);
        }
    }

}

后端设置：修改最大上传文件大小和请求大小。

需要修改最大上传文件大小和请求大小，不然默认的 1MB是不够用的。

也很简单，修改配置文件即可。

spring:
    servlet:
        multipart:
            max-file-size: 50MB  #单个数据大小
            max-request-size: 100MB #总数据大小

4.我的示例

示例指南见：https://www.jianshu.com/p/052a7fecc358
代码在 github: https://github.com/vir56k/demo/tree/master/video2

5.参考

Web API 接口参考
https://developer.mozilla.org/zh-CN/docs/Web/API

参考视频示例：https://www.jianshu.com/p/052a7fecc358
https://wendychengc.github.io/media-recorder-video-canvas/videocanvas.html

https://cloud.tencent.com/developer/article/1366886

https://segmentfault.com/q/1010000011489899

http://www.zuidaima.com/blog/3819727543307264.htm