本文详解如何基于 webrtc 实现双向屏幕共享——不仅捕获本地屏幕，更关键的是通过信令协调与 sdp 协商，将本地屏幕流发送给远端并正确渲染对方的共享画面。
本文详解如何基于 webrtc 实现双向屏幕共享——不仅捕获本地屏幕，更关键的是通过信令协调与 sdp 协商，将本地屏幕流发送给远端并正确渲染对方的共享画面。
在 WebRTC 应用中，“本地屏幕共享”仅是第一步；要让两个参与者（如 A 和 B）互相看到对方的屏幕，必须构建完整的点对点媒体通信链路。这远不止调用 getDisplayMedia() 那么简单——它涉及媒体获取、连接建立、信令交换、SDP 协商、ICE 候选收集与传输、以及远端流的绑定与渲染五大核心环节。
✅ 正确流程概览（双向屏幕共享）
- 本地捕获：使用 navigator.mediaDevices.getDisplayMedia() 获取本地方屏流（如你已实现）；
- 信令服务：通过 WebSocket 或 HTTP 服务器（如 Socket.IO、Node.js + Express）交换会话元数据（offer/answer、ICE candidates）；
- PeerConnection 初始化：双方各自创建 RTCPeerConnection，配置 STUN/TURN 服务器（推荐 stun:stun.l.google.com:19302）；
- 添加媒体轨道：将 getDisplayMedia() 返回的 MediaStream 中的视频轨道通过 addTrack() 添加到连接中；
- SDP 协商：发起方创建 offer → 发送至远端 → 远端设置 remoteDescription → 创建 answer → 回传 → 双方设置 local/remote description；
- ICE 候选自动交换：监听 icecandidate 事件，将候选发送给对方，并调用 addIceCandidate() 应用；
- 接收与渲染：监听 track 事件，将远端流（event.streams[0]）赋值给 <video> 元素的 srcObject。
? 关键代码示例（精简可运行骨架）
// 1. 初始化 RTCPeerConnection（双方均需执行）
const pc = new RTCPeerConnection({
iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
});
// 2. 捕获本地屏幕（你的原有逻辑可复用）
async function startScreenShare() {
try {
const screenStream = await navigator.mediaDevices.getDisplayMedia({
video: { cursor: "always" },
audio: false
});
// 将屏幕轨道添加到连接（自动触发 renegotiation）
screenStream.getVideoTracks().forEach(track => pc.addTrack(track, screenStream));
// 监听远端流到达
pc.ontrack = (event) => {
const remoteVideo = document.getElementById("remote-video");
remoteVideo.srcObject = event.streams[0]; // 渲染对方屏幕
remoteVideo.play().catch(e => console.warn("Auto-play prevented:", e));
};
// 3. 开始协商：创建 offer（仅发起方调用）
if (isInitiator) {
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// 通过信令服务器发送 offer
signalingChannel.send({ type: "offer", sdp: pc.localDescription });
}
} catch (err) {
console.error("Screen share failed:", err);
}
}
// 4. 处理远端信令消息（双方均需监听）
signalingChannel.onmessage = async (msg) => {
if (msg.type === "offer") {
await pc.setRemoteDescription(new RTCSessionDescription(msg));
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
signalingChannel.send({ type: "answer", sdp: pc.localDescription });
} else if (msg.type === "answer") {
await pc.setRemoteDescription(new RTCSessionDescription(msg));
} else if (msg.type === "candidate") {
await pc.addIceCandidate(new RTCIceCandidate(msg.candidate));
}
};
// 5. 自动转发 ICE 候选（双方）
pc.onicecandidate = (e) => {
if (e.candidate) {
signalingChannel.send({ type: "candidate", candidate: e.candidate });
}
};⚠️ 必须注意的关键事项
- 信令不可省略：WebRTC 本身不提供信令机制，必须自行实现（推荐 Socket.IO 或 Pusher）；
- HTTPS 强制要求：getDisplayMedia() 和 WebRTC 在现代浏览器中仅支持 HTTPS（或 localhost）；
- 权限与兼容性：Chrome / Edge 支持良好；Safari 17.4+ 才完全支持 getDisplayMedia 的多窗口捕获；Firefox 需启用 media.getusermedia.screensharing.enabled；
- 避免重复添加轨道：多次调用 addTrack() 同一轨道会导致错误，建议先 removeTrack() 或检查是否已存在；
- 错误处理必加：setLocalDescription/setRemoteDescription 等异步操作均可能抛出 DOMException，务必 try/catch；
- 资源释放：页面卸载前应调用 pc.close() 并停止所有轨道，防止内存泄漏。
✅ 总结
实现远程屏幕共享 ≠ 仅调用 getDisplayMedia()。它是一个端到端的实时通信系统工程：本地采集是输入，信令是神经，SDP 是协议语言，ICE 是寻路引擎，而 ontrack 是最终输出接口。建议从 Mozilla 官方 WebRTC 教程（WebRTC API Protocols）入手，再结合 WebRTC Samples 的 getdisplaymedia 与 pc1-pc2 示例进行联调。只有打通信令闭环，才能真正看见“对方的桌面”。
