在 WebRTC 屏幕共享场景中，当切换共享源（如从桌面窗口切换到新屏幕捕获）时，仅在发送端更新媒体流而接收端无响应，通常是因未正确识别并替换对应视频轨道所致；关键在于校验 RTCRtpSender.track.kind 类型后再执行 replaceTrack。
在 webrtc 屏幕共享场景中，当切换共享源（如从桌面窗口切换到新屏幕捕获）时，仅在发送端更新媒体流而接收端无响应，通常是因未正确识别并替换对应视频轨道所致；关键在于校验 `rtcrtpsender.track.kind` 类型后再执行 `replacetrack`。
在实现动态屏幕共享流切换时，常见误区是直接对所有 RTCRtpSender 调用 replaceTrack()，而忽略了 WebRTC 连接中可能同时存在音频、视频、数据等多个 sender，且并非每个 sender 都持有视频轨道。若向音频 sender 传入视频 track，将触发 TypeError: Failed to execute 'replaceTrack' on 'RTCRtpSender': The provided track is of a different kind — 这正是你遇到的错误根源。
✅ 正确做法是：先筛选出视频类型的 sender，再执行轨道替换。以下是优化后的核心逻辑：
if (this.$store.rtcmConnection.streamEvents[this.screenId]) {
try {
// 获取新的屏幕共享流（仅视频）
const newStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
const newVideoTrack = newStream.getVideoTracks()[0];
const event = this.$store.rtcmConnection.streamEvents[this.screenId];
if (!event?.stream?.isVideo) return;
this.userIds.forEach(userId => {
const peerContainer = this.$store.rtcmConnection.peers[userId];
if (!peerContainer || !peerContainer.peer) return;
// 遍历该 peer 的所有 sender，仅对 video sender 执行 replaceTrack
peerContainer.peer.getSenders().forEach(sender => {
if (sender.track?.kind === 'video') { // ✅ 关键校验！
sender.replaceTrack(newVideoTrack)
.catch(err => console.error('Failed to replace video track:', err));
}
});
});
// 同步更新本地 stream（用于 UI 或状态管理）
const oldTrack = event.stream.getVideoTracks()[0];
if (oldTrack) event.stream.removeTrack(oldTrack);
event.stream.addTrack(newVideoTrack);
} catch (err) {
console.error('Screen capture failed:', err);
}
} else {
this.$store.rtcmConnection.addStream({
screen: true,
oneway: true,
});
}
⚠️ 注意事项：
-
replaceTrack(null)可用于暂停视频传输，但需确保 receiver 端能处理空 track（如显示占位图或冻结帧）； -
getDisplayMedia()是异步且用户授权敏感操作，务必包裹try/catch并处理拒绝情形（如用户点击“取消”）； - 不要依赖
stream.getTracks()[0]的顺序 — 始终使用getVideoTracks()/getAudioTracks()显式获取； - 若使用
adapter.js或旧版浏览器兼容层，请确认其对replaceTrack的 polyfill 支持完整； - 接收端无需额外操作 — WebRTC 协议层会自动协商并应用新轨道，只要 sender 替换成功，远端
ontrack事件会触发（若已监听），视频画面即实时更新。
总结：WebRTC 动态轨道更新的核心原则是「精准匹配」—— sender 与 track 的 kind 必须一致。漏掉 sender.track?.kind === 'video' 这一判断，不仅导致 JS 报错，更会使流更新逻辑中断，造成接收端画面卡死。加上该防护后，屏幕共享即可平滑切换，真正实现双向实时同步。
