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
