如何使用 JavaScript 录制屏幕？

谁借莪１个温暖的怀抱￠ 2021-08-01 00:36 515阅读 0赞

点击上方 **蓝色字体** ，选择“标星公众号”

优质文章，第一时间送达

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

屏幕录制？截屏？网页生成图片？帧图？说到录屏，我一开始想到的是前面这些词。大致的想法是持续的生成当前页面的截图，然后把这些帧图再合并成一个视频文件。前端页面生成图片我们应该比较熟悉的是html2canvas。另外也有一些现成的库可以使用来进行屏幕的录制，RecordRTC上就有很多屏幕录制的实现。有声音（Audio）、视频（Video）、屏幕（Screen）的录制；有针对canvas的录制等等，一共有三十多个示例。这里主要想简单的讲一讲原生的 Screen Capture API。参见：Using the Screen Capture API

### 一、屏幕内容的捕获 ###

navigator.mediaDevices.getDisplayMedia()

该方法会返回一个promise, 该promise会resolve当前屏幕内容的实时数据流。

**使用 async / await 实现如下：**

async function startCapture(displayMediaOptions) {	
      let captureStream = null;	
    
    	
      try {	
        captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);	
      } catch(err) {	
        console.error("Error: " + err);	
      }	
      return captureStream;	
    }

**使用 promise 的方式实现如下：**

function startCapture(displayMediaOptions) {	
     let captureStream = null;	
    
    	
     return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)	
        .catch(err => { console.error("Error:" + err); return null; });	
    }

我们在获取屏幕数据的时候有可能会获取到一些敏感信息，所有在使用 ***getDisplayMedia***的时候，为了安全考虑，会弹出一个选择框，然用户自己选择需要共享那一部分的内容。 可以共享当前屏幕，也可以共享其他的应用窗口和浏览器的其他标签页。

![640?wx\_fmt=png][640_wx_fmt_png]

**二、参数配置：**  
我们在上面的实现中可以看到， 传递给startCapture函数的参数为displayMediaOptions。 这个参数是用于配置返回数据流的。 数据形式如下：

const displayMediaOptions = {	
      video: {	
        cursor: "never"	
      }, 	
      audio: false, 	
      logicalSurface: false, 	
    };

开可以针对音视频做详细的配置：

const gdmOptions = {	
      video: {	
        cursor: "always" // 始终显示鼠标信息	
      },	
      // audio 配置信息是可选的	
      audio: {	
        echoCancellation: true, 	
        noiseSuppression: true,	
        sampleRate: 44100	
      } 	
    }

三、示例

**HTML:**

<!DOCTYPE html>	
    <html lang="en">	
    <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>Screen Record</title>	
        <link rel="stylesheet" href="./css/index.css">	
    </head>	
    <body>	
        <p>This example shows you the contents of the selected part of your display.	
        Click the Start Capture button to begin.</p>	
        <p><button id="start">Start Capture</button> <button id="stop">Stop Capture</button></p>	
        <video id="video" autoplay></video>	
        <br>	
        <strong>Log:</strong>	
        <br>	
        <pre id="log"></pre>	
        <script src="./js/index.js"></script>	
    </body>	
    </html>

**CSS：**

#video {	
        border: 1px solid #999;	
        width: 98%;	
        max-width: 860px;	
      }	
      .error {	
        color: red;	
      }	
      .warn {	
        color: orange;	
      }	
      .info {	
        color: darkgreen;	
      }

**JS：**

**效果如下：**

![640?wx\_fmt=png][640_wx_fmt_png 1]

点击Start Capture 之后选择需要共享的部分就可以共享如下的内容：

![640?wx\_fmt=png][640_wx_fmt_png 2]

点击Stop Capture即可˙停止录制共享。  
这个例子只是调取接口获取到当前分享屏幕的数据流，并通过video的形式显示出来。我们在拿到数据流信息这个，可以把这些信息上传到服务器，生成相应的视频文件。也可以结合websocket之类的处理方式，实现实时的屏幕共享功能。

作者：饭等米

链接：segmentfault.com/a/1190000020267689

如果喜欢本篇文章，欢迎转发、点赞。关注订阅号「Web项目聚集地」，回复「进群」即可进入无广告技术交流。

--------------------

**推荐阅读**

***1.***

***2. ***

***3.***

***4. ***

***5.***

***6.***

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

**喜欢文章，点个** **在看** ** ** ![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 2]

[640_wx_fmt_jpeg]: /images/20210731/4771fda5ab3a4ff99a751fccacea18aa.png?wx_fmt=jpeg
[640_wx_fmt_png]: /images/20210731/ace76e9c072a48a8bbd502e44d8c47d8.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/6bd604e2d7eb485dbd1121e3aefd2074.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210731/e84fe088444e491e91befee933300f89.png?wx_fmt=png
[640_wx_fmt_jpeg 1]: /images/20210731/ed7a346c714f45a8ae7dce392dc1a478.png?wx_fmt=jpeg
[640_wx_fmt_jpeg 2]: /images/20210731/dd6973eb152d4aea9790308e25de97b6.png?wx_fmt=jpeg