0

    如何使用 JavaScript 录制屏幕 ?

    2023.04.21 | admin | 258次围观

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

    优质文章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之类的处理方式,实现实时的屏幕共享功能。

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论