用JS实现简单的屏幕录像机

作者：京东保险 张洁

本文将介绍如何用JS实现简单的屏幕录像机。

一、录制准备

创建一个按钮

<button id="recording-toggle">Start recording</button>

书写JavaScript

1var RECORDING_ONGOING = false;
2var recordingToggle = document.getElementById("recording-toggle"); // 按钮
3
4recordingToggle.addEventListener("click", function(){
5     RECORDING_ONGOING = !RECORDING_ONGOING; // 开始 / 停止 录制
6     if(RECORDING_ONGOING){
7         recordingToggle.innerHTML = "Stop Recording";
8         startRecording(); // 开始录制
9     } else {
10         recordingToggle.innerHTML = "Start Recording";
11         stopRecording(); // 停止录制
12 }
13});

看起来内容很多，但实际上，只是向按钮添加一个事件侦听器来开始和停止记录并相应地更改文本。

二、开始录制

在写功能函数之前，声明 3 个全局变量（在函数之外）。

1var blob, mediaRecorder = null;
2var chunks = [];

现在，开始屏幕录制

1async function startRecording(){
2     var stream = await navigator.mediaDevices.getDisplayMedia(
3         {video: {mediaSource: "screen"}, audio: true}
4     );
5
6     deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"});
7}

在用户屏幕之外创建媒体流。媒体记录器有一个mimeType. 这是你想要的输出文件类型。

可以mimeTypes 在此处阅读更多相关信息。

Edge 支持video/webmmime 类型。这是文件扩展名.webm。可以通过以下方式检查浏览器是否支持mimeType：

1console.log(MediaRecorder.isTypeSupported("video/webm"))
2console.log(MediaRecorder.isTypeSupported("video/mp4"))
3console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))

向该函数添加几行startRecording

1 deviceRecorder.ondataavailable = (e) => {
2     if(e.data.size > 0){
3         chunks.push(e.data);
4     }
5 }
6 deviceRecorder.onstop = () => {
7     chunks = [];
8 }
9 deviceRecorder.start(250)

每当有数据时，都会将其添加到块数组（之前定义）中。当停止录制时，将调用该stopRecording() 函数。

三、停止录制

1function stopRecording(){
2     var filename = window.prompt("File name", "video"); // Ask the file name
3
4     deviceRecorder.stop(); // 停止录制
5     blob = new Blob(chunks, {type: "video/webm"})
6     chunks = [] // 重置数据块
7     var dataDownloadUrl = URL.createObjectURL(blob);
8
9     // 将其下载到用户的设备上
10     let a = document.createElement('a')
11     a.href = dataDownloadUrl;
12     a.download = `${filename}.webm`
13     a.click()
14 
15     URL.revokeObjectURL(dataDownloadUrl)
16}

用JS做录屏就是这么简单。如果你想要 mp4 或其他格式，则必须使用 API 进行转换或自己进行转换。



 浏览器会通知是否正在共享屏幕