如何使用 JavaScript 录制屏幕？

色字体，选择“标星公众号”

优质文章，第一时间送达

屏幕录制？截屏？网页生成图片？帧图？说到录屏，我一开始想到的是前面这些词。大致的想法是持续的生成当前页面的截图，然后把这些帧图再合并成一个视频文件。前端页面生成图片我们应该比较熟悉的是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 = ;
 try { captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions); } catch(err) { console.error("Error: " + err); } return captureStream;}

使用 promise 的方式实现如下：

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

我们在获取屏幕数据的时候有可能会获取到一些敏感信息，所有在使用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 = ;}
function dumpOptionsInfo { const videoTrack = videoElem.srcObject.getVideoTracks[0]; console.info("Track settings:"); console.info(JSON.stringify(videoTrack.getSettings, , 2)); console.info("Track constraints:"); console.info(JSON.stringify(videoTrack.getConstraints, , 2));}

效果如下：

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

点击Stop Capture即可˙停止录制共享。

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

作者：饭等米

链接：segmentfault.com/a/1190000020267689

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

1.2. 4. 5.6.

件传递有两种方式，冒泡和捕获。事件传递定义了元素事件触发的顺序，在冒泡中，内部元素的事件会先被触发，然后在触发外部元素，如先触发p元素然后触发div元素。在捕获事件中，外部元素先被触发，然后内部事件触发。addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：addEventListener(event, function, useCapture);

创建新的HTML元素（节点）appendChild（）

HTML Collection与NodeList的区别：NodeList 与 HTMLCollection 有很多类似的地方。NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。NodeList 与 HTMLCollection 都有 length 属性。节点列表不是一个数组！节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

件流:

事件冒泡

取消冒泡：oEvent.cancelBubble=true

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:400px; height:300px; background:#CCC; display:none;}
</style>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');

    oBtn.onclick=function (ev)
    {
    var oEvent=ev||event;

    oDiv.style.display='block';
    //alert('按钮被点击了');

    oEvent.cancelBubble=true; //取消事件冒泡,是解决许多问题的方法和手段
    };

    document.onclick=function ()
    {
    oDiv.style.display='none';
    //alert('document被点击了');
    };
};
</script>
</head>
<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

冒泡型事件：

<html>
<head>
<title>冒泡型事件</title>
<script language="javascript">
function add(sText){
var oDiv = document.getElementById("display");
oDiv.innerHTML += sText; //输出点击顺序
}
</script>
</head>
<body onclick="add('body<br>');">
<div onclick="add('div<br>');">
<p onclick="add('p<br>');">Click Me</p>
</div>
<div id="display"></div>
</body>
</html>

执行顺序:p对象 -> div对象 -> body对象

冒泡型事件执行顺序::由内到外(p -> div -> body -> document)

注意: DOM 0级只有冒泡, 没有捕获

捕获型事件

相对于IE使用冒泡型事件, Netscape使用了另一种称为捕获型事件(eventcapturing)的解决方案;

addEventListener(事件名称,函数, bCapture)

removeEventListener(事件名称, 函数, bCapture)

事件监听函数第三个参数bCapture确定是冒泡型还是捕获型事件(true:捕获 false:冒泡,默认值false)

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv2">
<p id="myP2">点击该段落， 我是捕获</p>
</div>
<script>
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV 元素!");
}, true);
</script>
</body>
</html>

执行顺序: div对象 -> p对象

捕获型事件执行顺序:由外到内(如:document -> body -> div -> p)

冒泡型：事件从内部往外部依次执行。

捕捉型：事件从外部往内部依次执行。

事件监听

通用监听方法：

1.直接在HTML标签中分配事件处理函数：

<script language="javascript">
function add(sText){
var oDiv = document.getElementById("display");
oDiv.innerHTML += sText; //输出点击顺序
}
</script>
</head>
<body onclick="add('body<br>');">
<div onclick="add('div<br>');">
<p onclick="add('p<br>');">Click Me</p>
</div>
<div id="display"></div>
</body>

2.结构与行为的分离：

<html>
<head>
<title>监听函数</title>
<script language="javascript">
window.onload = function(){
var oP = document.getElementById("myP"); //找到对象
oP.onclick = function(){ //设置事件监听函数
alert('我被点击了');
}
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

事件监听的作用:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
alert('a');
};
window.onload=function ()
{
alert('b');
};
</script>
</head>
<body>
</body>
</html>

以上程序只弹出alert('b');

理解:对同一对象执行两次事件(同一事件类型)处理函数时,往往只能只执行后一个

因此如果要让脚本在本浏览器中正常运行的话，就必须使用浏览器所支持的事件监听器

IE中的监听方法：

attachEvent(事件名称, 函数), 绑定事件处理函数 attach: 贴上, 附着

detachEvent(事件名称, 函数), 解除绑定 detach: 分离, 拆开

注意：IE只支持冒泡型事件监听, 没有第三个参数, 事件名称前要加"on";

<html>
<head>
<title>多个监听函数</title>
<script language="javascript">
function fnClick1(){
alert("我被fnClick1点击了");
}
function fnClick2(){
alert("我被fnClick2点击了");
//oP.detachEvent("onclick",fnClick1); //删除监听函数1
}
var oP;
window.onload = function(){
oP = document.getElementById("myP"); //找到对象
oP.attachEvent("onclick",fnClick1); //添加监听函数1
oP.attachEvent("onclick",fnClick2); //添加监听函数2
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

标准DOM的事件监听：

addEventListener(事件名称,函数, 捕获)

element.addEventListener(event, function, useCapture)

removeEventListener(事件名称, 函数, 捕获)

element.removeEventListener(event, function, useCapture)

bCapture 是用于冒泡阶段还是捕获阶段(true:捕获 false:冒泡,默认值false)

注意:IE9版本已支持

<html>
<head>
<title>标准DOM的事件监听</title>
<script language="javascript">
function fnClick1(){
alert("我被fnClick1点击了");
//oP.removeEventListener("click",fnClick2,false); //删除监听函数2
}
function fnClick2(){
alert("我被fnClick2点击了");
}
var oP;
window.onload = function(){
oP = document.getElementById("myP"); //找到对象
oP.addEventListener("click",fnClick1,false); //添加监听函数1
oP.addEventListener("click",fnClick2,false); //添加监听函数2
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

编写兼容性事件监听函数

function addEvent(obj, ev, fn){
    if(obj.addEventListener){
    obj.addEventListener(ev, fn, false);
    }else{
    obj.attachEvent('on'+ev, fn);
    }
}
function removeEvent(obj, ev, fn){
    if(obj.removeEventListener){
    obj.addEventListener(ev, fn, false);
    }else{
    obj.attachEvent('on'+ev, fn);
    }
}

实例:

在线咨询

上一篇：「前端小白福利」HTML5+CSS3零基础实战特训班-就业班课程
下一篇：Web前端开发基础知识，设置网页背景图，如何在网页中插入图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何使用 JavaScript 录制屏幕？

一、屏幕内容的捕获

您的项目需求