前言：
当前姐妹们对“js截屏录屏”可能比较讲究，同学们都想要了解一些“js截屏录屏”的相关知识。那么小编在网摘上网罗了一些关于“js截屏录屏””的相关文章，希望同学们能喜欢，小伙伴们快快来了解一下吧！点击上方 "程序员小乐"关注, 星标或置顶一起成长
第一时间与你相约
每日英文
A friend who understands your tears is much more valuable than a lot of friends who only know your smile.
一个懂你泪水的朋友，胜过一群只懂你笑容的朋友。
每日掏心话
易怒的人都很敏感，敏感的人都很好强，好强的人都很固执，固执的人都很单纯，单纯的人都很天真，天真的人都缺心眼，这才是真相。
作者：饭等米 | 责编：乐乐
链接：segmentfault.com/a/1190000020267689
程序员小乐(ID:study_tech)第 678 次推文 图片来自网络
往日回顾：熬夜变傻有科学依据，人类睡觉时会被“洗脑”，科学家首次拍下全程
正文
屏幕录制？截屏？网页生成图片？帧图？说到录屏，我一开始想到的是前面这些词。大致的想法是持续的生成当前页面的截图，然后把这些帧图再合并成一个视频文件。前端页面生成图片我们应该比较熟悉的是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");
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>${msg}</span><br>`;console.warn = msg => logElem.innerHTML += `<span>${msg}<span><br>`;console.info = msg => logElem.innerHTML += `<span>${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之类的处理方式，实现实时的屏幕共享功能。
欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，学习能力的提升上有新的认识，欢迎转发分享给更多人。
猜你还想看
阿里、腾讯、百度、华为、京东最新面试题汇集
读Java虚拟机类加载引发的血案
优化你的SpringBoot，看这篇文章就对了！
Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行
嘿，你在看吗？
标签： #js截屏录屏
