HTML5录屏的API：MediaRecorder

之前一直好奇录屏这个功能如何实现了，知道最近发现了HTML5的MediaRecorder接口，才发现，不但可以录屏，还可以录音，原来javascript也可以实现录屏功能，真的是惊呆了老铁！

MediaRecorder() - 构造函数

MediaRecorder返回一个录制的媒体流，可以录制的媒体：<audio>, <video>, <canvas>，以及麦克风和摄像头，还有共享的屏幕。

const mediaRecorder = new MediaRecorder(stream);

mediaRecorder只读属性

• mimeType - 返回创建时指定的 MIME 媒体类型
     "video/webm",     "audio/webm",
      "video/webm;codecs=vp8",
      "video/webm;codecs=daala",
      "video/webm;codecs=h264",
      "audio/webm;codecs=opus",
      "video/mpeg",
• state - 返回 当前对象的状态
• inactive 录制未开始
• recording 录制已开始
• paused 录制已开始，暂停中
• stream - 返回传递到函数中的媒体流
• videoBitsPerSecond - 返回视频编码 使用中的比特率
• audioBitsPerSecond - 返回音频编码位 使用中的速率

 isTypeSupported() - 判断指定的 MIME类型是否能成功录制，返回布尔值

console.log( MediaRecorder.isTypeSupported("video/webm") ) // true

实例方法

• mediaRecorder.start(timeslice) - 开始录制媒体

     参数：timeslice

• mediaRecorder.pause() - 暂停媒体录制
• mediaRecorder.resume() - 暂停后恢复媒体录制
• mediaRecorder.stop() - 停止记录
• mediaRecorder.requestData() - 已保存录制数据（ Blob类型）

事件方法

• onstart() - start()方法调用时触发
• onpause() - pause()方法调用时触发
• onresume() - resume()方法调用时触发
• onstop() - stop()方法调用时触发
• onerror() - 录制过程中发生异常时触发 
• ondataavailable() - 有可用数据时候触发

代码实例 - 摄像头视频录制

在线地址：https://course.51qux.com/videomediarecorder

//视频盒子
	let myVideo = document.getElementById("myvideo")
	let recording = document.getElementById("recording")
	//控制按钮
	let startButton = document.getElementById("startButton")
	let stopButton = document.getElementById("stopButton")
	//录制流列表
	let dataChunks =[] //[Blob, Blob]
	let recorder
	//开始录制
	startButton.onclick = function(){
		getUserMedia(myVideo)
	}
	
	//拿到 摄像头 媒体流
	function getUserMedia(myVideo) {
		console.log(`Requesting  video stream`)
		//设置媒体参数
		const constraints = {
			video: true,
			audio: false
		};
		navigator.mediaDevices.getUserMedia(constraints)
			.then(stream => {
				if(myVideo) {
					//播放获取到的媒体流
					myVideo.srcObject = stream
					myVideo.onloadedmetadata = function(e) {
						myVideo.play()
					}
					//将当前媒体流记录下来
					myVideo.captureStream = myVideo.captureStream || myVideo.mozCaptureStream
					startRecording(myVideo.captureStream())
				}
			}).catch(error => {
				console.error(error)
			});
	}

	// 开始录制
	function startRecording(stream, lengthInMS) {
		recorder = new MediaRecorder(stream);
		//有效数据时将流保存起来
		recorder.ondataavailable = (event) => {
			let data = event.data;
			dataChunks.push(data);
		};
		//每秒记录一个Blob数据
		recorder.start(1000);
		console.log(recorder.state + " start to recording .....");
	}
	
	stopButton.onclick = function(){
		//清除预览数据
		myVideo.srcObject.getTracks().forEach((track) => track.stop());
		//停止录制
		recorder.stop();
		//录制媒体流转video格式
		console.log(dataChunks)
		let recordedBlob = new Blob(dataChunks, { type: "video/webm" });
		recording.src = URL.createObjectURL(recordedBlob);
	}

将navigator.mediaDevices.getUserMedia改成navigator.mediaDevices.getDisplayMedia ，其他代码不变，就可以实现共享屏幕录制的功能了！

代码实例 - 扬声器音频录制

在线体验地址：https://course.51qux.com/audiomediarecorder

//音频盒子
	let myaudio = document.getElementById("myaudio")
	let recording = document.getElementById("recording")
	//控制按钮
	let startButton = document.getElementById("startButton")
	let stopButton = document.getElementById("stopButton")
	//录制流列表
	let dataChunks =[] //[Blob, Blob]
	let recorder
	//开始录制
	startButton.onclick = function(){
		getUserMedia(myaudio)
	}
	
	//拿到 摄像头 媒体流
	function getUserMedia(myaudio) {
		console.log(`Requesting  video stream`)
		//设置媒体参数
		const constraints = {
			video: false,
			audio: true
		};
		navigator.mediaDevices.getUserMedia(constraints)
			.then(stream => {
				if(myaudio) {
					//播放获取到的媒体流
					myaudio.srcObject = stream
					myaudio.onloadedmetadata = function(e) {
						myaudio.play()
					}
					//将当前媒体流记录下来
					myaudio.captureStream = myaudio.captureStream || myaudio.mozCaptureStream
					startRecording(myaudio.captureStream())
				}
			}).catch(error => {
				console.error(error)
			});
	}

	// 开始录制
	function startRecording(stream, lengthInMS) {
		recorder = new MediaRecorder(stream);
		//有效数据时将流保存起来
		recorder.ondataavailable = (event) => {
			let data = event.data;
			dataChunks.push(data);
		};
		//每秒记录一个Blob数据
		recorder.start(1000);
		console.log(recorder.state + " start to recording .....");
	}
	
	stopButton.onclick = function(){
		//清除预览数据
		myaudio.srcObject.getTracks().forEach((track) => track.stop());
		//停止录制
		recorder.stop();
		//录制媒体流转audio格式
		console.log(dataChunks)
		let recordedBlob = new Blob(dataChunks, { type: "audio/webm" });
		recording.src = URL.createObjectURL(recordedBlob);
	}

参考文档

MDN： https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder