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

霍治澎

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

创建一个按钮

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

复制代码

书写JavaScript

1. var RECORDING_ONGOING = false;
2. var recordingToggle = document.getElementById("recording-toggle"); // 按钮
4. recordingToggle.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 个全局变量（在函数之外）。

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

复制代码

现在，开始屏幕录制

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

复制代码

在用户屏幕之外创建媒体流。媒体记录器有一个mimeType. 这是你想要的输出文件类型。
可以mimeTypes 在此处阅读更多相关信息。
Edge 支持video/webmmime 类型。这是文件扩展名.webm。可以通过以下方式检查浏览器是否支持mimeType：

1. console.log(MediaRecorder.isTypeSupported("video/webm"))
2. console.log(MediaRecorder.isTypeSupported("video/mp4"))
3. console.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() 函数。
三、停止录制

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

复制代码

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

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

作者：京东保险 张洁
来源：京东云开发者社区 转载请注明来源

来源:https://www.cnblogs.com/jingdongkeji/p/17918329.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！