前端录制视频上传的调研 - xw332/xw332.github.io GitHub Wiki
h5录屏上传的调研结果，目前已知的可行方案是基于WebRTC的接口申请摄像头权限，并录制视频上传。
WebRTC是指实现web实时通信的一系列规范，一般可以通俗地理解为“P2P视频聊天”。实现这个功能依赖于摄像头调用API getUserMedia()取到MediaStream，同时还依赖一个P2P网络连接和传输的APIRTCPeerConnection来实现视频流数据的传输。
这里使用的是RecordRTC，一个基于JavaScript的媒体录制库，用于音频+视频+屏幕录制的WebRTC。可模仿手机系统自带的拍照功能，结合getHTMLMediaElement方法展示视频文件。
具体流程：
在https协议的页面调navigator.mediaDevices.getUserMedia申请摄像头权限，参数可以包含宽高分辨率，达到减少数据包的目的。
手机会提示用户是否同意授权，同意授权后，页面调用MediaRecorder开始视频录制。
由用户手动结束或定时器结束视频录制，将实时流数据转成视频二进制内容。
和其他表单数据一起上传服务端。
压缩部分调研：
不建议在本地进行视频类的压缩操作，如果存在文件内容太大的问题，建议使用三方的文件上传sdk进行分块上传。
七牛云目前的做法是对视频内容做判断，大于 4M 时可分块上传，小于 4M 时直传。
分块上传时，支持断点续传。
压缩的主要限制：
首先传统的视频压缩都是服务器使用FFmpeg命令，可以压缩视频的帧数、画质、文件编码。
前端从这几个方面出发的思路：
-
减少帧数，用canvas逐帧绘制视频，这样可以控制帧数，但是这里就有两个问题，一：视频必须在客户端从头到尾播放完成，这样canvas才能绘制到视频的画面；二：播放视频并处理内容可能会卡，这个是因为保存一张图片需要的操作是把当前视频的图像渲染到canvas上，然后canvas导出base64图像，这个操作是比较消耗资源的。
-
压缩画质和改变编码，可以调用canvas的canvas.toDataURL(type, encoderOptions)函数，第一个参数是文件类型，第二个参数是图像质量。
除了这个3个方向处理图像，还有个很大的问题是音轨需要另外想办法处理
除此之外还有个影响因素，视频的编码不仅仅是一张张的图片，里面也存在减小占用空间的算法，因此最后压缩出来的所有图片的内存占用会比原始视频文件还大，同时服务端需要对所有资源进行整合再处理。
参考链接：
https://webrtc.github.io/samples/src/content/getusermedia/resolution/
https://www.jianshu.com/p/49937db0b958
https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6
https://developer.qiniu.com/kodo/sdk/1283/javascript
https://segmentfault.com/q/1010000014436422
https://www.cnblogs.com/Silababy/p/6117616.html
百度文件上传插件
http://fex.baidu.com/webuploader/
前端图片压缩
https://zhuanlan.zhihu.com/p/27823933
JSZip：压缩插件