JS屏幕录制实现方法详解

想要在网页中实现屏幕录制？本文将深入探讨如何使用 JavaScript 的 MediaRecorder 和 getDisplayMedia API 来实现这一功能。考虑到浏览器的安全限制，我们将详细介绍如何获取屏幕共享权限，以及如何通过 MediaRecorder 将屏幕内容录制成文件。同时，针对录制过程中的常见问题，如麦克风权限请求、文件大小优化、添加水印以及错误处理，本文也提供了相应的解决方案和示例代码。最终方案在浏览器限制下可行但功能有限。无论您是前端开发者还是对屏幕录制技术感兴趣，本文都能为您提供有价值的参考。

屏幕录制可通过MediaRecorder和getDisplayMedia API实现；2. 麦克风权限应先请求屏幕共享，再单独请求音频以避免多次弹窗；3. 优化文件大小可降低分辨率、帧率，选择VP9编码或限制时长；4. 添加水印可用Canvas API绘制并捕获流，或录制后用FFmpeg.js处理；5. 错误处理需捕获用户拒绝、API不支持及录制中断等异常并给出提示。完整实现需结合安全策略与用户体验，最终方案在浏览器限制下可行但功能有限。

屏幕录制在 JavaScript 中实现起来，直接使用原生 API 是比较困难的，因为浏览器出于安全考虑，限制了直接访问底层硬件设备的能力。不过，我们可以借助 MediaRecorder API 和 getDisplayMedia API 来实现一个简易的屏幕录制功能。核心思路是：先获取屏幕共享的 MediaStream，然后使用 MediaRecorder 将 MediaStream 中的数据录制下来，最后将录制的数据保存为文件。

解决方案

以下是一个简单的 JavaScript 屏幕录制示例：

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { mediaSource: "screen" },
      audio: true, // 可选，如果需要录制音频
    });

    const recorder = new MediaRecorder(stream);
    let data = [];

    recorder.ondataavailable = (event) => data.push(event.data);
    recorder.onstop = () => {
      const blob = new Blob(data, { type: "video/webm" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.download = "screen-recording.webm";
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url); // 释放 URL 对象
      stream.getTracks().forEach(track => track.stop()); // 停止所有轨道
    };

    recorder.start();
    return recorder;

  } catch (err) {
    console.error("Error accessing screen:", err);
    // 处理用户拒绝共享屏幕的情况
  }
}

async function stopRecording(recorder) {
  recorder.stop();
}

// 使用示例
let recorderInstance = null;

document.getElementById("startBtn").addEventListener("click", async () => {
  recorderInstance = await startRecording();
});

document.getElementById("stopBtn").addEventListener("click", () => {
  if (recorderInstance) {
    stopRecording(recorderInstance);
  }
});

这个代码片段首先定义了 startRecording 函数，它使用 navigator.mediaDevices.getDisplayMedia 获取屏幕共享的 MediaStream。然后，创建一个 MediaRecorder 对象，并设置 ondataavailable 和 onstop 事件处理程序。ondataavailable 事件处理程序将录制的数据添加到 data 数组中，onstop 事件处理程序将 data 数组中的数据合并为一个 Blob 对象，并创建一个下载链接，以便用户可以下载录制的文件。

stopRecording 函数简单地调用 recorder.stop() 来停止录制。

最后，代码片段添加了两个按钮的事件监听器，分别用于启动和停止录制。

屏幕录制时如何处理麦克风权限请求？

当同时需要录制屏幕和麦克风音频时，需要在 getDisplayMedia 中同时请求视频和音频权限。但是，用户可能会先授权屏幕共享，然后才授权麦克风。在这种情况下，浏览器可能会弹出多个权限请求窗口，这可能会让用户感到困惑。

一种更好的做法是，先请求屏幕共享权限，然后在屏幕共享启动后，再请求麦克风权限。这样可以避免弹出多个权限请求窗口。

async function startRecordingWithAudio() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: { mediaSource: "screen" },
            audio: false // 先不请求音频
        });

        // 检查是否需要同时录制麦克风
        const shouldRecordAudio = confirm("是否同时录制麦克风？");

        let audioStream = null;
        if (shouldRecordAudio) {
            try {
                audioStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
                // 将麦克风音轨添加到屏幕共享流中
                audioStream.getTracks().forEach(track => stream.addTrack(track));
            } catch (audioErr) {
                console.error("Error accessing microphone:", audioErr);
                alert("无法访问麦克风，将只录制屏幕。");
                // 如果用户拒绝麦克风权限，可以继续只录制屏幕
            }
        }

        const recorder = new MediaRecorder(stream);
        let data = [];

        recorder.ondataavailable = (event) => data.push(event.data);
        recorder.onstop = () => {
            const blob = new Blob(data, { type: "video/webm" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.style.display = "none";
            a.href = url;
            a.download = "screen-recording.webm";
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            stream.getTracks().forEach(track => track.stop());
            if(audioStream){
              audioStream.getTracks().forEach(track => track.stop());
            }
        };

        recorder.start();
        return recorder;

    } catch (err) {
        console.error("Error accessing screen:", err);
    }
}

如何优化屏幕录制的文件大小？

录制的文件大小通常取决于多个因素，包括分辨率、帧率、编码格式和录制时长。

• 降低分辨率： 降低录制的分辨率可以显著减小文件大小。可以在 getDisplayMedia 的 video 选项中设置 width 和 height 属性来降低分辨率。
• 降低帧率： 降低帧率也可以减小文件大小，但可能会导致录制的视频看起来不流畅。可以在创建 MediaRecorder 对象时，通过设置 mimeType 选项来指定帧率。例如：new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9', videoBitsPerSecond : 1000000 })，可以尝试调整 videoBitsPerSecond 的值。
• 选择合适的编码格式： 不同的编码格式具有不同的压缩率。VP9 是一种高效的视频编码格式，可以提供比 VP8 或 H.264 更好的压缩率。
• 限制录制时长： 避免录制不必要的长时间视频。

屏幕录制过程中如何添加水印？

直接在 JavaScript 中实现复杂的水印功能比较困难，因为 MediaRecorder API 本身并不提供直接添加水印的接口。不过，可以通过一些间接的方法来实现水印效果。

一种方法是使用 Canvas API 将水印绘制到屏幕共享的 MediaStream 中。首先，创建一个 Canvas 元素，并将水印绘制到 Canvas 上。然后，使用 captureStream 方法从 Canvas 中获取 MediaStream，并将该 MediaStream 作为 MediaRecorder 的输入。

这种方法的缺点是，水印是静态的，不能动态改变。此外，由于水印是直接绘制到屏幕上的，因此可能会影响屏幕的显示效果。

另一种方法是在录制完成后，使用视频编辑库（例如 FFmpeg.js）将水印添加到录制的文件中。这种方法的优点是，水印可以动态改变，并且不会影响屏幕的显示效果。但是，这种方法需要在客户端运行视频编辑库，这可能会增加客户端的负担。

以下是使用 Canvas API 添加水印的示例代码：

async function startRecordingWithWatermark() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: { mediaSource: "screen" },
            audio: true
        });

        // 创建 Canvas 元素
        const canvas = document.createElement('canvas');
        canvas.width = stream.getVideoTracks()[0].getSettings().width;
        canvas.height = stream.getVideoTracks()[0].getSettings().height;
        const ctx = canvas.getContext('2d');

        // 获取屏幕共享的视频轨道
        const videoTrack = stream.getVideoTracks()[0];

        // 创建一个 Video 元素，用于绘制屏幕共享的内容到 Canvas 上
        const video = document.createElement('video');
        video.srcObject = stream;
        video.muted = true; // 必须设置 muted 为 true，否则会报错
        await video.play(); // 必须 play，否则无法绘制

        // 定时绘制 Canvas
        function drawCanvas() {
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            // 添加水印
            ctx.font = '30px Arial';
            ctx.fillStyle = 'red';
            ctx.fillText('Watermark', 50, 50);

            requestAnimationFrame(drawCanvas);
        }

        drawCanvas();

        // 从 Canvas 中获取 MediaStream
        const canvasStream = canvas.captureStream();

        // 将屏幕共享的音频轨道添加到 Canvas Stream 中
        const audioTracks = stream.getAudioTracks();
        audioTracks.forEach(track => canvasStream.addTrack(track));

        const recorder = new MediaRecorder(canvasStream);
        let data = [];

        recorder.ondataavailable = (event) => data.push(event.data);
        recorder.onstop = () => {
            const blob = new Blob(data, { type: "video/webm" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.style.display = "none";
            a.href = url;
            a.download = "screen-recording.webm";
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            stream.getTracks().forEach(track => track.stop());
            canvasStream.getTracks().forEach(track => track.stop()); // 停止 canvasStream 的所有轨道
        };

        recorder.start();
        return recorder;

    } catch (err) {
        console.error("Error accessing screen:", err);
    }
}

这个示例代码首先创建了一个 Canvas 元素，并将屏幕共享的内容绘制到 Canvas 上。然后，在 Canvas 上添加水印。最后，从 Canvas 中获取 MediaStream，并将其作为 MediaRecorder 的输入。

需要注意的是，使用 Canvas API 添加水印可能会影响性能，特别是当水印比较复杂时。

如何处理屏幕录制过程中的错误？

在屏幕录制过程中，可能会发生各种错误，例如用户拒绝共享屏幕、浏览器不支持 getDisplayMedia API、录制过程中断等等。为了提高应用程序的健壮性，需要对这些错误进行处理。

• 处理用户拒绝共享屏幕的错误： 当用户拒绝共享屏幕时，getDisplayMedia API 会抛出一个 DOMException 异常。可以在 try...catch 块中捕获该异常，并向用户显示一条友好的错误消息。
• 处理浏览器不支持 getDisplayMedia API 的错误： 某些旧版本的浏览器可能不支持 getDisplayMedia API。可以在代码中检查 navigator.mediaDevices.getDisplayMedia 是否存在，如果不存在，则向用户显示一条错误消息。
• 处理录制过程中断的错误： 录制过程中可能会因为各种原因而中断，例如网络连接中断、浏览器崩溃等等。可以在 MediaRecorder 对象的 onerror 事件处理程序中处理这些错误。

async function startRecordingWithErrorHandling() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: { mediaSource: "screen" },
            audio: true
        });

        const recorder = new MediaRecorder(stream);
        let data = [];

        recorder.ondataavailable = (event) => data.push(event.data);
        recorder.onstop = () => {
            const blob = new Blob(data, { type: "video/webm" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.style.display = "none";
            a.href = url;
            a.download = "screen-recording.webm";
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            stream.getTracks().forEach(track => track.stop());
        };

        recorder.onerror = (event) => {
            console.error("MediaRecorder error:", event.error);
            alert("录制过程中发生错误：" + event.error.name);
            // 可以根据 event.error.name 进行更详细的错误处理
        };

        recorder.start();
        return recorder;

    } catch (err) {
        console.error("Error accessing screen:", err);
        if (err.name === 'NotAllowedError') {
            alert("用户拒绝了屏幕共享请求。");
        } else if (err.name === 'NotFoundError') {
            alert("找不到可用的屏幕共享源。");
        } else {
            alert("发生未知错误：" + err.message);
        }
    }
}

总的来说，JavaScript 实现屏幕录制功能依赖于浏览器提供的 API，并且受到安全限制。虽然可以实现基本功能，但在高级功能（例如水印、实时编辑）方面存在一定的局限性。

文中关于JavaScript,权限,屏幕录制,MediaRecorder,getDisplayMedia的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS屏幕录制实现方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。