VideoMediaRecorder——视频录制-QUI-Notes

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		.box222{overflow: hidden;width: 100%;}
		video{width: 400px;float: left;height: 300px;}
		.button{padding: 8px 15px;border: 1px solid #333;border-radius: 8px;display: inline-block;}
	</style>
</head>
<body>
		<video id="myvideo" width="800" height="600"></video>
		<video id="recording" width="400" height="300" controls></video>
		<div class="box222">
			<div id="startButton" class="button">开始录制</div>
			<div id="stopButton" class="button">停止录制</div>
		</div>
<script>
	//视频盒子
	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);
	}
</script>
</body>
</html>
嗖一下，答案就来了！

VideoMediaRecorder——视频录制

效果展示：
