首先通过 getDisplayMedia() 获取屏幕视频流，再将其视频轨道添加到 RTCPeerConnection 中实现共享。需在 HTTPS 环境下调用 getDisplayMedia({ video: true }) 请求用户选择屏幕内容，成功后返回 MediaStream 并绑定到 video 元素。随后将流的视频轨道通过 addTrack() 加入连接，或使用 replaceTrack() 动态切换现有轨道。共享过程中需触发信令协商，发送新的 offer 与 answer 同步媒体参数，并通过 WebSocket 等通道交换 ICE 候选。用户停止共享时会触发 ended 事件，应通知对端回退至摄像头画面。注意浏览器兼容性：Chrome、Edge、Firefox 支持良好，Safari 和移动端支持有限；同时需处理权限拒绝、异常提示及带宽优化，如降低分辨率或帧率。核心在于正确获取屏幕流并集成至 WebRTC 连接，确保信令同步与状态更新。
实现基于WebRTC的屏幕共享功能，核心是通过 getDisplayMedia() 获取屏幕视频流，再将其加入到 RTCPeerConnection 中进行传输。整个过程不需要复杂的服务器架构，但需要处理权限、兼容性和信令交互。
获取屏幕视频流
使用 navigator.getDisplayMedia() 可以请求用户共享其屏幕内容。与 getUserMedia() 不同，这个方法专门用于捕获屏幕。
基本调用方式如下：
- 确保在 HTTPS 环境下运行（本地 localhost 除外）
- 调用
getDisplayMedia({ video: true })请求屏幕共享 - 用户会看到选择窗口，可选整个屏幕、某个窗口或标签页
- 返回一个 Promise，成功后得到 MediaStream 对象
async function startScreenShare() {
try {
const stream = await navigator.getDisplayMedia({ video: true });
document.getElementById('video').srcObject = stream;
return stream;
} catch (err) {
console.error("屏幕共享失败:", err);
}
}
集成到 WebRTC 连接中
拿到屏幕流后，需要将视频轨道添加到已建立的 RTCPeerConnection 实例中，以便发送给远端。
- 从屏幕流中提取视频轨道：
stream.getVideoTracks()[0] - 使用
peerConnection.addTrack(track, stream)添加轨道 - 如果已有连接，可以直接替换当前视频轨道
例如动态切换共享状态：
function replaceVideoTrack(newStream, peerConnection) {
const sender = peerConnection.getSenders().find(s => s.track.kind === 'video');
sender.replaceTrack(newStream.getVideoTracks()[0]);
}
处理信令和连接协商
WebRTC 需要通过信令机制交换 SDP 描述和 ICE 候选。屏幕共享开始后，若需通知对方更新接收流，应重新进行一次协商。
- 触发 renegotiation：创建新的 offer 并发送给对方
- 对方回应 answer，完成媒体参数同步
- 可通过 WebSocket 或 Socket.IO 实现信令通道
注意：当用户停止共享时，会触发 ended 事件，应及时通知对端关闭或回退到摄像头画面。
兼容性与注意事项
- 目前主流浏览器（Chrome、Edge、Firefox）支持较好，Safari 支持有限
- 移动端通常不支持屏幕共享
- 某些浏览器可能不允许同时共享多个源
- 务必处理权限拒绝和异常情况，提供友好的提示
- 考虑带宽问题，屏幕内容可适当降低分辨率或帧率
基本上就这些。关键在于正确获取屏幕流并将其接入通信管道，配合信令协调两端状态。实现起来不复杂但容易忽略细节，比如重新协商和错误处理。
