点击上方
蓝色字体
,选择“标星公众号”
优质文章,第一时间送达
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/0180ff75cc75feac488943f5f71247b3.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](https://i-blog.csdnimg.cn/blog_migrate/743d2b456e800503d1573792d12ab1b3.png)
二、参数配置:
我们在上面的实现中可以看到, 传递给startCapture函数的参数为displayMediaOptions。 这个参数是用于配置返回数据流的。 数据形式如下:
我们在上面的实现中可以看到, 传递给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");
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));
}
效果如下:
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/79a72285a88a09ee4ec7a4b1acc4d756.png)
点击Start Capture 之后选择需要共享的部分就可以共享如下的内容:
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/4c096d0c8e5acec79c9f348ea0e48213.jpeg)
点击Stop Capture即可˙停止录制共享。
这个例子只是调取接口获取到当前分享屏幕的数据流,并通过video的形式显示出来。我们在拿到数据流信息这个,可以把这些信息上传到服务器,生成相应的视频文件。也可以结合websocket之类的处理方式,实现实时的屏幕共享功能。
这个例子只是调取接口获取到当前分享屏幕的数据流,并通过video的形式显示出来。我们在拿到数据流信息这个,可以把这些信息上传到服务器,生成相应的视频文件。也可以结合websocket之类的处理方式,实现实时的屏幕共享功能。
作者:饭等米
链接:segmentfault.com/a/1190000020267689
如果喜欢本篇文章,欢迎转发、点赞。关注订阅号「Web项目聚集地」,回复「进群」即可进入无广告技术交流。
推荐阅读
1.
2.
3.
4.
5.
6.
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/76ec32a6ac3486263a43ab232765250e.jpeg)
喜欢文章,点个
在看
![640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/7078b946f758153548cb4af6c40f0a0c.jpeg)