点击上方蓝色字体，选择“标星公众号”
优质文章js上传图片到项目服务器上，第一时间送达
屏幕录制？截屏？网页生成图片？帧图？说到录屏，我一开始想到的是前面这些词。大致的想法是持续的生成当前页面的截图，然后把这些帧图再合并成一个视频文件。前端页面生成图片我们应该比较熟悉的是html2canvas。另外也有一些现成的库可以使用来进行屏幕的录制js上传图片到项目服务器上，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:
<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 Recordtitle><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 Capturebutton> <button id="stop">Stop Capturebutton>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}
`;console.error = msg => logElem.innerHTML += `${msg}
`;console.warn = msg => logElem.innerHTML += `${msg}
`;console.info = msg => logElem.innerHTML += `${msg}
`;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之类的处理方式，实现实时的屏幕共享功能。
版权声明
本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。
发表评论