如何使用 JavaScript 录制屏幕？

最新推荐文章于 2024-07-06 16:42:05 发布

公众号：Java后端

最新推荐文章于 2024-07-06 16:42:05 发布

阅读量3.9k

点赞数 4

原文链接：https://segmentfault.com/a/1190000020267689

版权

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

优质文章，第一时间送达

屏幕录制？截屏？网页生成图片？帧图？说到录屏，我一开始想到的是前面这些词。大致的想法是持续的生成当前页面的截图，然后把这些帧图再合并成一个视频文件。前端页面生成图片我们应该比较熟悉的是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));	
}

效果如下：