如何使用 JavaScript 录制屏幕？

3年前 (2022) 程序员胖胖胖虎阿

298 0 0

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

优质文章，第一时间送达

屏幕录制？截屏？网页生成图片？帧图？说到录屏，我一开始想到的是前面这些词。大致的想法是持续的生成当前页面的截图，然后把这些帧图再合并成一个视频文件。前端页面生成图片我们应该比较熟悉的是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的时候，为了安全考虑，会弹出一个选择框，然用户自己选择需要共享那一部分的内容。
可以共享当前屏幕，也可以共享其他的应用窗口和浏览器的其他标签页。

二、参数配置：

我们在上面的实现中可以看到，传递给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>&nbsp;<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：

   
   
   
    
    
    const videoElem = document.getElementById("video");
    
    
    const logElem = document.getElementById("log");
    
    
    const startElem = document.getElementById("start");
    
    
    const stopElem = document.getElementById("stop");
    
    
    

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

    
    
    startElem.addEventListener("click", function(evt) {
    
    
      startCapture();
    
    
    }, false);
    
    
    stopElem.addEventListener("click", function(evt) {
    
    
      stopCapture();
    
    
    }, false);
    
    
    console.log = msg => logElem.innerHTML += `${msg}<br>`;
    
    
    console.error = msg => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
    
    
    console.warn = msg => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
    
    
    console.info = msg => logElem.innerHTML += `<span class="info">${msg}</span><br>`;
    
    
    

    
    
    async function startCapture() {
    
    
      logElem.innerHTML = "";
    
    
    

    
    
      try {
    
    
        videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    
    
        dumpOptionsInfo();
    
    
      } catch(err) {
    
    
        console.error("Error: " + err);
    
    
      }
    
    
    }
    
    
    

    
    
    function stopCapture(evt) {
    
    
      let tracks = videoElem.srcObject.getTracks();
    
    
    

    
    
      tracks.forEach(track => track.stop());
    
    
      videoElem.srcObject = null;
    
    
    }
    
    
    

    
    
    function dumpOptionsInfo() {
    
    
      const videoTrack = videoElem.srcObject.getVideoTracks()[0];
    
    
      console.info("Track settings:");
    
    
      console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
    
    
      console.info("Track constraints:");
    
    
      console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
    
    
    }