版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JackRen_Developer/article/details/82316425
概念
- RecordRTC:是一个为现代浏览器开发的基于javascript的媒体记录库(支持WebRTC的 getUserMedia API ),它为不同的设备和浏览器进行了优化,带来了全客户端(无插件)的媒体记录方案。
- Recorder:通过RecordRTC的API生成的针对不同媒体类型的记录器,支持的媒体类型包括 MediaStreamRecorder (流媒体)、 StereoAudioRecorder(立体声) 、 WhammyRecorder 、 GifRecorder(gif动图),其他Recorder类型详见此页面。
- Stream:媒体的流对象,通过BOM的api
navigator.mediaDevices.getUserMedia
可以获取,此对象在上述api的成功回调作为参数中传入。将此对象传入RecordRTC 的API可以生成Recorder对象,从而进行媒体记录。
原理
利用RecordRTC打开手机或者电脑摄像头,进行录像,完成后对视频文件进行压缩。
github地址:https://github.com/muaz-khan/RecordRTC
流程
获取媒体流 -> 生成recorder -> 开始记录 |
视频记录
initRecordRTC : function() {
var successCallback = function(mediaStream) {
var options = {
type : "video"
};
var recordRTC = RecordRTC(mediaStream, options);
recordRTC.startRecording();
setTimeout(function() {
recordRTC.stopRecording(function(videoURL) {
$("#video").attr("src", videoURL);
var recordedBlob = recordRTC.getBlob();
recordRTC.getDataURL(function(dataURL) {
});
});
}, 10000);
};
var errorCallback = function(error) {
// maybe another application is using the device
};
var mediaConstraints = {
video : true,
audio : true
};
navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback);
}
HTML元素
<video id="video" src="" controls="controls"></video>
但是浏览器也有局限性: