如何用MediaStream API实现浏览器端的屏幕录制？-js教程-PHP中文网

答案：使用getDisplayMedia()获取屏幕流，结合MediaRecorder录制并下载视频。首先调用navigator.mediaDevices.getDisplayMedia({video: true, audio: true})请求用户选择屏幕区域并授权共享，浏览器弹出原生选择器确保隐私控制；随后创建MediaRecorder实例，指定兼容性好的MIME类型如video/webm; codecs=vp8，并监听ondataavailable收集数据块，onstop事件触发后将数据合并为Blob生成可下载链接；需注意处理系统音频捕获的兼容性问题，部分浏览器或系统不支持麦克风与系统音混合，可通过Web Audio API实现多音轨混合；同时应检测MediaRecorder.isTypeSupported()以适配不同浏览器编码支持，优化比特率和帧率平衡文件大小与质量，避免低端设备性能瓶颈，并在跨域iframe中设置allow="display-capture"权限策略。

如何用mediastream api实现浏览器端的屏幕录制？

用MediaStream API在浏览器端实现屏幕录制，核心在于利用

navigator.mediaDevices.getDisplayMedia()

登录后复制

方法获取屏幕内容的媒体流，然后结合

MediaRecorder

登录后复制

接口将这个流录制成视频文件。这提供了一个强大且相对直接的方式，让用户无需安装任何插件就能分享或保存他们的屏幕操作。

解决方案

实现浏览器端的屏幕录制，主要涉及以下几个步骤和关键代码：

首先，我们需要请求用户的屏幕共享权限。这通过

getDisplayMedia()

登录后复制

完成，它会弹出一个浏览器原生的选择器，让用户选择要分享的整个屏幕、某个应用程序窗口，还是特定的浏览器标签页。这个过程本身就带有一种交互性，用户必须明确授权。

async function startScreenRecording() {
    let stream = null;
    try {
        // 请求屏幕媒体流
        // video: true 确保捕获视频
        // audio: true 尝试捕获系统音频，但用户必须在选择器中明确允许
        stream = await navigator.mediaDevices.getDisplayMedia({
            video: true,
            audio: {
                // 尝试获取系统音频，具体行为取决于浏览器和操作系统
                // preferCurrentTab: true 可能会在某些浏览器中优先捕获当前标签页的音频
                echoCancellation: true,
                noiseSuppression: true,
                sampleRate: 44100
            }
        });

        const mimeType = 'video/webm; codecs=vp8'; // 推荐使用webm和vp8，兼容性好
        if (!MediaRecorder.isTypeSupported(mimeType)) {
            console.warn(`MIME type ${mimeType} is not supported. Trying 'video/webm'`);
            // Fallback to a more generic type if specific codec isn't supported
            // This is a common hiccup; browsers can be picky.
            const genericMimeType = 'video/webm';
            if (!MediaRecorder.isTypeSupported(genericMimeType)) {
                console.error('No supported MIME type for MediaRecorder found!');
                return;
            }
            // If fallback is also not supported, we're in trouble.
            // For a robust solution, you might try other codecs like vp9 or h264 if available.
        }

        const mediaRecorder = new MediaRecorder(stream, { mimeType: mimeType });
        const recordedChunks = [];

        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
            }
        };

        mediaRecorder.onstop = () => {
            const blob = new Blob(recordedChunks, { type: mimeType });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'screen-recording.webm';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url); // 释放URL对象
            stream.getTracks().forEach(track => track.stop()); // 停止所有媒体流轨道
        };

        mediaRecorder.start();
        console.log('Recording started...');

        // 实际应用中，你可能需要一个停止按钮来触发 mediaRecorder.stop()
        // 这里为了演示，我们假设在10秒后停止
        // setTimeout(() => {
        //     mediaRecorder.stop();
        //     console.log('Recording stopped after 10 seconds.');
        // }, 10000);

        // 返回 mediaRecorder 和 stream，以便外部控制停止
        return { mediaRecorder, stream };

    } catch (err) {
        console.error('Error starting screen recording:', err);
        // 用户拒绝权限或者发生其他错误
        alert('无法开始屏幕录制。请确保您已授予权限。');
    }
}

// 示例：如何调用和停止
// let recorderControls;
// document.getElementById('startButton').onclick = async () => {
//     recorderControls = await startScreenRecording();
// };
// document.getElementById('stopButton').onclick = () => {
//     if (recorderControls && recorderControls.mediaRecorder.state === 'recording') {
//         recorderControls.mediaRecorder.stop();
//         recorderControls.stream.getTracks().forEach(track => track.stop());
//         console.log('Recording stopped manually.');
//     }
// };

登录后复制

这段代码首先请求屏幕共享，成功后创建一个

MediaRecorder

登录后复制

实例，监听

ondataavailable

登录后复制

事件来收集录制数据，并在

onstop

登录后复制

事件中将数据合并成Blob并提供下载。这里选择

video/webm; codecs=vp8

登录后复制

作为MIME类型，因为它在浏览器间的兼容性通常最好。

为什么选择

getDisplayMedia()

登录后复制

而不是

getUserMedia()

登录后复制

进行屏幕录制？

这是一个很关键的设计决策，直接关系到用户隐私和体验。简单来说，

getUserMedia()

登录后复制

主要是为了获取用户的摄像头和麦克风输入，它的权限模型相对直接：要么允许访问，要么不允许。它并不知道屏幕上的具体内容，也无法让用户选择要分享哪个窗口或标签页。

而

getDisplayMedia()

登录后复制

则不然，它是专门为屏幕内容捕获设计的。当你调用它时，浏览器会弹出一个原生的、操作系统级别的选择器。这个选择器允许用户精确地选择他们想要分享的：是整个屏幕（包括所有应用程序和桌面），还是某个特定的应用程序窗口，又或者是当前浏览器中的某个标签页。这种细粒度的控制，对于用户而言，极大地增强了安全感和隐私保护。想想看，如果一个网站可以直接录制你的整个桌面，而你只能选择“是”或“否”，那会是多么令人不安。

getDisplayMedia()

登录后复制

的设计哲学就是将这种控制权交还给用户，让他们清楚地知道自己在分享什么，并且可以随时停止。

从技术实现的角度，

getDisplayMedia()

登录后复制

返回的

MediaStream

登录后复制

对象，其内部的视频轨道（

video track

登录后复制

）直接承载了用户选择的屏幕区域的像素数据，而不是摄像头捕捉到的画面。这种明确的职责划分，让开发者能够更专注于屏幕录制这一特定功能，而无需担心混淆或滥用摄像头权限。这不仅仅是API名称的差异，更是Web平台在隐私和权限管理上深思熟虑的体现。

录制过程中如何处理音频，以及可能遇到的挑战？

在屏幕录制中处理音频，往往比视频部分要复杂一些，因为它涉及到不同的音频源和潜在的混合需求。

getDisplayMedia()

登录后复制

在理想情况下，可以捕获系统音频，但这需要用户在屏幕共享选择器中明确授权。当用户选择分享整个屏幕或某个应用窗口时，通常会有一个选项来包含“系统音频”。如果用户勾选了，那么

getDisplayMedia()

登录后复制

返回的

MediaStream

登录后复制

就会包含一个音频轨道。

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357

查看详情

然而，挑战在于：

浏览器和操作系统兼容性： 并非所有浏览器或操作系统组合都支持捕获系统音频。例如，在某些Linux发行版上，或者特定版本的Firefox中，系统音频捕获可能受限或根本不支持。Chrome在Windows和macOS上对系统音频的支持通常较好。这意味着你需要有回退方案，或者至少要告知用户这种可能性。
音频源混合： 很多时候，你不仅仅想录制系统音频，还想同时录制用户的麦克风声音（比如进行旁白解说）。这时，仅仅依靠
```
getDisplayMedia()
```
登录后复制
就不够了。你需要：
- 通过
```
getUserMedia({ audio: true })
```
  登录后复制
  单独获取麦克风音频流。
- 使用Web Audio API，具体来说是
```
AudioContext
```
  登录后复制
  ，将这两个音频流（系统音频和麦克风音频）混合起来。这通常涉及创建
```
MediaStreamAudioSourceNode
```
  登录后复制
  来接收每个音频流，然后将它们连接到
```
AudioContext
```
  登录后复制
  的
```
destination
```
  登录后复制
  或一个
```
MediaStreamDestinationNode
```
  登录后复制
  ，最后将这个混合后的流作为
```
MediaRecorder
```
  登录后复制
  的音频输入。
- 这个混合过程需要精确的时序和音量控制，否则可能出现回音、失真或不同步的问题。
“当前标签页”音频：
```
getDisplayMedia()
```
登录后复制
有一个实验性的
```
preferCurrentTab
```
登录后复制
选项，当设置为
```
true
```
登录后复制
时，它会尝试优先捕获当前标签页的音频。这对于录制教学视频或演示特定网页内容时非常有用，因为它避免了捕获整个系统或应用窗口的嘈杂背景音。但这个选项的可用性和行为也可能因浏览器而异。

处理音频，尤其是混合音频，确实是屏幕录制功能中一个比较高级也容易踩坑的地方。它要求开发者对

MediaStream

登录后复制

和Web Audio API都有较深的理解，并且要做好跨浏览器兼容性的测试和处理。一个常见的“陷阱”就是假设

audio: true

登录后复制

就能万事大吉，而忽略了用户授权、浏览器支持以及多音源混合的复杂性。

如何优化录制性能和文件大小，以及常见的兼容性问题？

优化屏幕录制，既要保证用户体验（性能流畅），又要考虑实际存储和传输（文件大小），同时还得面对浏览器和设备差异带来的兼容性挑战。这三者之间往往需要权衡。

录制性能与文件大小优化：

选择合适的MIME类型和编码器： 这是最直接影响文件大小和兼容性的因素。
- ```
video/webm; codecs=vp8
```
  登录后复制
  或
```
video/webm; codecs=vp9
```
  登录后复制
  是目前浏览器端最推荐的组合。WebM容器格式开放，VP8/VP9编码器效率高且免费，兼容性广泛。VP9通常比VP8提供更好的压缩比和质量。
- 如果需要H.264编码（例如，为了更好的兼容某些非浏览器播放器），可以尝试
```
video/mp4; codecs=avc1
```
  登录后复制
  ，但H.264在某些浏览器中可能受限于操作系统或硬件支持，且可能涉及专利费用。
- 通过
```
MediaRecorder.isTypeSupported()
```
  登录后复制
  进行检测，确保所选MIME类型在当前浏览器中可用，这是关键。
调整比特率（
bitsPerSecond
登录后复制
）：在
```
MediaRecorder
```
登录后复制
的选项中，可以设置
```
bitsPerSecond
```
登录后复制
。降低比特率会显著减小文件大小，但会牺牲视频质量。你需要找到一个平衡点，既能保持可接受的画质，又能控制文件大小。例如，对于屏幕录制，如果内容主要是静态文字或缓慢的UI操作，较低的比特率可能就足够了。
```
const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm; codecs=vp8',
    bitsPerSecond: 2500000 // 2.5 Mbps，可以根据需求调整
});
```
登录后复制
帧率（Frame Rate）：
```
getDisplayMedia()
```
登录后复制
本身通常会尝试以显示器的刷新率（或一个合理的默认值，如30fps）捕获。虽然你不能直接在
```
getDisplayMedia
```
登录后复制
的约束中精确控制输出帧率，但过高的帧率会增加CPU/GPU的负担和文件大小。在某些情况下，如果内容变化不频繁，较低的帧率（例如15fps）也能接受，但通常浏览器会自行优化。
分辨率： 录制分辨率越高，文件越大。
```
getDisplayMedia()
```
登录后复制
默认会捕获用户选择的区域的原始分辨率。如果你不需要那么高的分辨率，可以在获取流之后，通过
```
Canvas
```
登录后复制
或其他方式对视频帧进行缩放，但这会增加客户端处理的复杂性。更实际的做法是，如果用户选择录制整个4K屏幕，而你只需要1080p，可以考虑后期处理。

常见的兼容性问题：

getDisplayMedia()
登录后复制
支持度：现代浏览器（Chrome, Firefox, Edge, Safari 13+）普遍支持
```
getDisplayMedia()
```
登录后复制
。但旧版浏览器可能不支持，或者功能不完整。始终要检查
```
navigator.mediaDevices.getDisplayMedia
```
登录后复制
是否存在。
MIME类型和编码器支持： 如前所述，
```
MediaRecorder
```
登录后复制
对特定MIME类型和编码器的支持因浏览器而异。WebM (VP8/VP9) 是最稳妥的选择。如果你需要MP4 (H.264)，务必进行充分测试。
系统音频捕获： 这是最大的痛点之一。不同操作系统和浏览器对系统音频的捕获支持差异很大。例如，Safari对系统音频的支持相对较晚且可能有限制。用户在选择屏幕共享时，也可能忘记勾选“分享系统音频”选项。
性能瓶颈： 在低端设备上，即使是中等质量的录制也可能导致CPU占用过高，影响系统流畅性，甚至导致录制卡顿或掉帧。这通常是硬件限制，难以通过软件完全解决，只能通过降低质量设置来缓解。
跨域iframe： 如果你的录制逻辑在一个iframe中，并且该iframe是跨域的，那么
```
getDisplayMedia()
```
登录后复制
可能会受到安全策略的限制。需要确保
```
iframe
```
登录后复制
设置了
```
allow="display-capture"
```
登录后复制
权限策略。
用户权限： 用户随时可以拒绝屏幕共享请求，或者在录制过程中通过浏览器UI停止共享。你的应用需要优雅地处理这些情况，例如显示友好的提示信息。