WebRTC视频通话需先调用MediaDevices.getUserMedia()获取摄像头权限并显示本地流，再通过RTCPeerConnection建立连接、交换SDP与ICE候选者实现信令，最后绑定远程流到video元素播放；需注意HTTPS、STUN/TURN配置、autoplay/muted设置及浏览器兼容性。
获取摄像头权限并显示本地视频流
使用 MediaDevices.getUserMedia() 是 WebRTC 视频通话的第一步。它请求用户授权访问摄像头和麦克风，并返回一个 MediaStream 对象：
- 确保页面通过 HTTPS 或 localhost 提供服务（现代浏览器强制要求）
- 调用时传入约束对象，例如
{ video: true, audio: true } - 将返回的 stream 赋值给
<video></video>元素的srcObject属性即可实时显示画面
示例代码：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
const video = document.getElementById('localVideo');
video.srcObject = stream;
})
.catch(err => console.error('访问摄像头失败:', err));
创建对等连接（PeerConnection）并交换信令
RTCPeerConnection 是 WebRTC 的核心，负责媒体传输。但它本身不处理连接发现和协商，需要你自行实现信令（signaling）——即在两个客户端之间传递 SDP 和 ICE 候选者。
- 初始化连接时需配置 STUN/TURN 服务器（如
stun:stun.l.google.com:19302），用于 NAT 穿透 - 一方调用
createOffer()生成本地会话描述（SDP），设置为本地描述后通过信令通道发送给对方 - 另一方收到后调用
setRemoteDescription()，再调用createAnswer()返回应答 SDP - 双方还需监听
icecandidate事件，将各自收集到的 ICE 候选者通过信令通道互发
将远程视频流绑定到页面元素
当远端成功加入连接并开始传输媒体流时，RTCPeerConnection 会触发 track 事件（或旧版的 addstream）：
立即学习“Java免费学习笔记（深入）”；
- 监听
pc.ontrack，从事件参数中提取event.streams[0] - 将其赋给另一个
<video></video>元素的srcObject，即可播放对方视频 - 注意：需在
setRemoteDescription之后再添加 track 监听，否则可能错过初始流
处理常见问题与基础优化
实际开发中容易遇到黑屏、无声、连接失败等问题，关键点在于：
- 检查浏览器兼容性（Chrome/Firefox/Edge 支持良好，Safari 需注意版本和权限策略）
- 确保
video元素设置了autoplay和muted（尤其在自动播放策略严格的环境下） - 调试时打开
chrome://webrtc-internals查看连接状态、带宽、丢包等实时指标 - 若需跨域通信，信令服务器可用 WebSocket 实现（如 Node.js + Socket.IO），但 WebRTC 本身不依赖服务器中转媒体
不复杂但容易忽略
