JavaScript屏幕捕获与媒体流

首先，通过 getDisplayMedia()实现屏幕捕获，用于共享桌面内容；其次，使用 getUserMedia()获取摄像头和麦克风输入流；接着，可将两者结合并通过 canva s 合成实现画中画效果；最后，需注意仅在https 下运行、用户操作触发、浏览器 兼容性及监听共享结束 事件，以确保功能正常与用户体验。

在现代 Web 应用中，实现屏幕捕获和媒体流处理已成为视频会议、在线教学、远程协作等场景的重要功能。javaScript 通过 MediaDevices.getDisplayMedia() 提供了对屏幕内容捕获的能力，结合 getUserMedia() 可灵活管理音频和视频流。

屏幕捕获：使用 getDisplayMedia()

该方法用于获取用户屏幕或窗口的媒体流，常用于共享桌面内容。

const screenstream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: false // 可选：是否捕获系统声音（部分 浏览器 支持）
});

调用后会弹出系统 选择器，让用户选择要共享的屏幕、窗口或标签页。返回的 MediaStream 可绑定到 <video> 元素进行预览或录制。

摄像头与麦克风捕获：getUserMedia()

用于获取用户的摄像头和麦克风输入流。

立即学习“Java 免费学习笔记（深入）”；

const cameraStream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
});

将获取的流赋值给视频元素的 srcObject 即可实时播放：

AI 新媒体文章

专为新媒体人打造的 AI 写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

75

查看详情

document.getElementById(‘video’).srcObject = cameraStream;

合并媒体流与高级控制

有时需要同时共享屏幕和摄像头画中画效果，可通过组合多个流实现。

• 分别调用 getDisplayMedia() 和 getUserMedia()
• 使用 canvas 将摄像头小窗绘制到屏幕流上
• 通过 canvas.captureStream() 创建新的合成流

这样生成的流可用于录制或推送到服务器。

注意事项与兼容性

屏幕捕获涉及隐私，因此必须在安全上下文（HTTPS）下运行，并且只能响应用户操作（如 点击事件）触发。

• chrome、edge 支持较好，firefox 需配置权限
• 移动端支持有限，多数设备不支持屏幕捕获
• audio: true 在 getDisplayMedia 中可能仅捕获标签页内音频

监听流的结束事件也很重要，以便及时通知用户共享已停止：

screenStream.getVideoTracks()[0].onended = () => {
  console.log(‘ 屏幕共享已停止 ’);
};

基本上就这些。掌握屏幕和媒体流的捕获方式，能为 Web 应用增添强大互动能力，但需注意权限管理和用户体验设计。不复杂但容易忽略细节。