RecordRTC视频总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 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>

但是浏览器也有局限性：