js 录制屏幕并下载

• 由于浏览器的安全策略, navigator.mediaDevices 只有在 localhost 或者 https 的情况下能访问, 否则会返回 undefined

<div onclick="startRecord">录制屏幕</div>
<video style="background-color: yellow" width="200" height="300" id="recording" controls></video>

function startRecord () {
	navigator.mediaDevices.getDisplayMedia({
	    video: true,
	    audio: true
	}).then(stream => {
	    const recorder = new MediaRecorder(stream);
	    const chunks = [];
	    recorder.start(0);
	    recorder.ondataavailable = event => {
	        chunks.push(event.data)
	    };
	    // 监听停止录制
	    stream.getVideoTracks()[0].onended = () => {
	        if (chunks.length) {
	            const recordedBlob = new Blob(chunks, { type: "video/webm" });
	            var videoUrl = URL.createObjectURL(recordedBlob);
	            var videoDom = document.getElementById('recording');
	            videoDom.src = videoUrl;
	        }
	    };
		// 下载
         var downloadBtn = document.createElement('a');
         downloadBtn.href = videoUrl;
         downloadBtn.download = 'test.webm';
         downloadBtn.click();
}
})

webm时长为空的处理方式,参考文章: https://juejin.cn/post/6844903847974928397