本文详解如何在基于rtsptoweb的webrtc流媒体应用中正确接收并播放摄像头的音视频双流，重点解决因video.muted = true导致音频被静音、误判为“仅能接收单流”的典型问题。
在使用 RTSPtoWeb（如 deepch/RTSPtoWeb）通过 WebRTC 播放安防摄像头的 RTSP 流时，开发者常遇到“只能看到画面，无法听到声音”或“启用了音频后视频消失”的现象。根据你提供的代码与调试过程，根本原因并非 WebRTC 无法同时处理音视频，而是 HTML <video> 元素被显式设为静音，导致音频虽已成功接收并解码，却未输出到扬声器。
✅ 正确配置音视频双流接收
你的双 addTransceiver 写法本身是正确的：
connection.addTransceiver('video', { direction: 'recvonly' });
connection.addTransceiver('audio', { direction: 'recvonly' });WebRTC 支持多轨道（track）接收，且 ontrack 事件会为每个接收到的轨道（包括 video 和 audio）触发一次。关键在于：video.srcObject 可以自动承载包含音视频的完整 MediaStream——只要该 Stream 中存在有效音频轨道，浏览器就会将其路由至 <video> 元素的音频输出设备（前提是未被静音）。
你观察到“只改 'video' 为 'audio' 就能听到声音”，恰恰印证了服务端（RTSPtoWeb）已正确编码并推送了音频轨道；而“添加两个 transceiver 后只有其中一个生效”，实则是因 video.muted = true 导致音频不可听，视觉上误以为音频未到达。
? 修复方案：解除静音 + 确保用户交互触发播放
只需两处修改即可启用音视频同步播放：
-
移除 video.muted = true
const video = document.createElement('video'); video.id = 'camera_video'; video.style = 'max-width:100%; max-height:100%'; // video.muted = true; ← 删除这一行！ video.controls = true; // 保留 controls 以便手动调节音量 -
确保 video.play() 在用户手势后调用（可选但推荐）
现代浏览器对自动播放音频有严格策略（Autoplay Policy）。若页面加载后立即调用 video.play() 且无用户交互（如点击），音频可能被静音或阻塞。建议：- 添加一个启动按钮，或
- 在 ontrack 回调中调用 video.play()（此时已有媒体流，通常满足“用户激活上下文”条件）：
connection.ontrack = (e) => { console.log(`Received track: ${e.track.kind}`); // ? 调试用：确认 audio/video 均触发 if (!video.srcObject) { video.srcObject = new MediaStream(); // 初始化空流 } video.srcObject.addTrack(e.track); // 显式添加轨道（更健壮） video.play().catch(e => console.warn("Play failed:", e)); };
? 注意事项与进阶建议
- 验证音频轨道是否真实到达：在 ontrack 中打印 e.track.kind，应看到 "video" 和 "audio" 各一次（顺序不定）。
- 避免重复设置 srcObject：原代码 video.srcObject = e.streams[0] 在多轨道场景下不安全（e.streams[0] 可能只含视频）。推荐使用 e.track + MediaStream.addTrack() 方式逐个添加。
- 检查 RTSPtoWeb 配置：确保其后端已启用音频转码（如 -acodec aac），且摄像头 RTSP 流本身包含音频（可用 ffplay rtsp://... 验证）。
- 服务端日志排查：查看 RTSPtoWeb 控制台输出，确认 webrtc 接口是否报告 audio track added 或类似信息。
✅ 最终精简版核心逻辑（推荐采用）
connection.ontrack = (e) => {
console.log(`[WebRTC] Received ${e.track.kind} track`);
if (!video.srcObject) video.srcObject = new MediaStream();
video.srcObject.addTrack(e.track);
video.play().catch(e => console.error("Playback error:", e));
};
// 启动时添加双接收器
connection.addTransceiver('video', { direction: 'recvonly' });
connection.addTransceiver('audio', { direction: 'recvonly' });完成上述调整后，刷新页面，你将看到视频正常播放，音量控件变为可用状态，点击即可调节音量——音视频双流真正协同工作。这并非 WebRTC 的限制，而是前端媒体元素控制细节的典型陷阱。
