共计 3509 个字符，预计需要花费 9 分钟才能阅读完成。
使用屏幕录制 API
前端屏幕录制？截屏？网页生成图片？帧图？说到录屏，我一开始想到的是前面这些词。大致的想法是持续的生成当前页面的截图，然后把这些帧图再合并成一个视频文件。前端页面生成图片我们应该比较熟悉的是 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> <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"); | |
| // Options for getDisplayMedia() | |
| const displayMediaOptions = { | |
| video: {cursor: "never"}, | |
| audio: false | |
| }; | |
| // Set event listeners for the start and stop buttons | |
| 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)); | |
| } |
效果如下：
点击 Start Capture 之后选择需要共享的部分就可以共享如下的内容：
点击 Stop Capture 即可˙停止录制共享。
这个例子只是调取接口获取到当前分享屏幕的数据流，并通过 video 的形式显示出来。我们在拿到数据流信息这个，可以把这些信息上传到服务器，生成相应的视频文件。也可以结合 websocket 之类的处理方式，实现实时的屏幕共享功能。
