webrtc-媒体录制

/post/webrtc-record article cover image

mediarecorder

  • stream: 传入的stream可从getUserMedia、video、audio或者canvas中获取
  • options: 为限制选项
    • mimeType: 媒体流类型(video/webm、audio/webm、video/mp4;codecs=vp8、video/webm;codecs=264、audio/webm;codecs=opus)
    • audioBitsPerSecond: 音频码率
    • videoBitsPerSecond: 视频码率
    • bitsPerSecond: 整体码率
js
const mediaRecorder = new MediaRecorder(stream, options)

方法

  • MediaRecorder.start(timeslice) 开始录制媒体，timeslice设置后会按时间切片存储数据,否则记录为整个
  • MediaRecorder.stop() 开始录制媒体，会触发包括最终Blob数据的dataavailable事件
  • MediaRecorder.pause() 停止录制媒体
  • MediaRecorder.resume() 恢复录制媒体
  • MediaRecorder.isTypeSupported() 检查是否支持的类型

事件

  • MediaRecorder.ondataavailable 每次记录一定时间的数据时(如果没有指定时间片。则会记录整个数据时)会定期触发
  • MediaRecorder.onerror

<Callout type="info"> 参考MDN文档查看具体参数及用法 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder">MediaRecorder</a>、 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter">mimetype codecs</a>、 </Callout>

存储数据的方式

  • 字符串
  • Blob 类型数据缓存区
  • ArrayBuffer
  • ArrayBufferView

初始化媒体流

js
let buffer; // 用于记录媒体流

function init() {
	if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
		console.log('getUserMedia is not supported!');
		return;
	} else {
		navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(stream => {
			window.stream = stream;
			videoPlayer.srcObject = stream;
		})
	}
}

录制开始

js

function recordStart() {
	buffer = [];

	var options = {
		mimeType: 'video/webm;codecs=vp8'
	}

	if(!MediaRecorder.isTypeSupported(options.mimeType)){
		console.error(`${options.mimeType} is not supported!`);
		return;
	}

	try{
		mediaRecorder = new MediaRecorder(window.stream, options);
	}catch(e){
		console.error('Failed to create MediaRecorder:', e);
		return;
	}

	mediaRecorder.ondataavailable = e => {
		if(e && e.data && e.data.size > 0){
		  buffer.push(e.data);
		}
	};

	mediaRecorder.start(10);
}

视频播放

js
function videoPlay() {
	const blob = new Blob(buffer, {type: 'video/webm'});
	videoPlayer.src = window.URL.createObjectURL(blob);
	videoPlayer.srcObject = null;
	videoPlayer.controls = true;
	videoPlayer.play();
}

停止录制

js
function recordStop() {
	mediaRecorder.stop();
}

视频下载

js
const blob = new Blob(buffer, {type: 'video/webm'});
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');

a.href = url;
a.style.display = 'none';
a.download = 'test.webm';
a.click();

getdisplaymedia桌面录制

捕获桌面播放设备，constrains与getUserMedia一致

js
navigator.mediaDevices.getDisplayMedia(constraints)
js
if(!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia){
		console.log('getDsiplayMedia is not supported!');
		return;
	} else {
		navigator.mediaDevices.getDisplayMedia({audio: true, video: true}).then(stream => {
			window.stream = stream;
			videoPlayer.srcObject = stream;
		})
	}