目录
API列表
WebRTC JavaScript API是Web Real-Time Communication (WebRTC)技术的核心，它允许网页应用实现浏览器间的实时音频、视频通信及数据共享，无需依赖插件。
navigator.mediaDevices.getUserMedia()
作用：请求访问用户的媒体设备（如摄像头和麦克风）。
代码示例：
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function(stream) {
// 成功获取媒体流后的处理
const videoElement = document.querySelector('video');
videoElement.srcObject = stream;
})
.catch(function(err) {
console.log("Error accessing media devices", err);
});
RTCPeerConnection
作用：建立和维护两个浏览器之间的点对点连接。
创建实例：
const pc = new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
添加本地媒体流：
stream.getTracks().forEach(track => pc.addTrack(track, stream));
事件监听
onicecandidate：当发现一个新的ICE候选时触发。onnegotiationneeded：当需要开始新的会话协商时触发。ontrack：当远端流的轨道被添加或删除时触发。
pc.onicecandidate = event => {
if (event.candidate) {
// 发送ICE候选到远端
}
};
pc.ontrack = event => {
// 显示远端视频流
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = event.streams[0];
};
信令操作
虽然不是WebRTC API的一部分，但信令机制是WebRTC应用中不可或缺的，用于交换SDP和ICE候选信息。
创建Offer：
pc.createOffer().then(offer => {
return pc.setLocalDescription(offer);
}).then(() => {
// 发送pc.localDescription到远端
});
处理Answer：
pc.setRemoteDescription(new RTCSessionDescription(offer));
pc.createAnswer().then(answer => {
return pc.setLocalDescription(answer);
}).then(() => {
// 发送pc.localDescription到远端
});
RTCDataChannel
作用：用于浏览器间传输任意数据，如文本、文件等。
创建和使用：
const dataChannel = pc.createDataChannel("channelName");
dataChannel.onopen = () => {
dataChannel.send("Hello from sender!");
};
dataChannel.onmessage = event => {
console.log("Received:", event.data);
};
getDisplayMedia
作用：捕获和分享屏幕内容。
使用示例：
navigator.mediaDevices.getDisplayMedia({video: true})
.then(stream => {
// 分享屏幕的逻辑
})
.catch(error => {
console.error("Error getting display media", error);
});
RTCRtpTransceiver
作用：RTCRtpTransceiver接口代表一个音频或视频的发送和接收双向通道，它封装了RTCRtpSender和RTCRtpReceiver，并提供了对这些通道的控制，如添加、移除和方向控制。
// 创建并添加音频Transceiver
const audioTransceiver = pc.addTransceiver('audio');
audioTransceiver.direction = 'sendrecv'; // 默认是'inactive'
// 创建并添加视频Transceiver
const videoTransceiver = pc.addTransceiver('video', {direction: 'recvonly'}); // 只接收视频
getStats()
作用：提供关于连接和媒体流的统计信息，如延迟、丢包率、带宽使用情况等，对于性能监控和调试非常有用。
使用示例：
pc.getStats().then(stats => {
stats.forEach(report => {
console.log(report.id, report.type);
// 根据报告类型处理数据，例如：
if (report.type === 'inbound-rtp') {
console.log(`Packet loss: ${report.packetsLost}`);
}
});
});
适配器模式与兼容性处理
由于WebRTC规范在不同浏览器中的实现可能存在差异，使用如adapter.js这样的适配库可以自动处理这些差异，确保代码的跨浏览器兼容性。
引入Adapter.js：
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
高级功能与优化
- 带宽适应：根据网络状况动态调整视频编码比特率和分辨率，可以使用setParameters()方法或在SDP中指定编码参数。
- 多流处理：支持多个音频或视频轨道，通过addTrack()和removeTrack()动态管理媒体流。
- 音频处理：利用Web Audio API增强音频功能，如混音、噪声抑制、回声消除等。
- 连接管理：实现重连逻辑，当连接断开时自动尝试重新建立连接。
- 安全性增强：确保信令通道的安全，使用HTTPS和WSS，对敏感信息进行加密处理。
集成 TURN 服务器
在某些网络环境下，P2P连接可能因为NAT穿越问题而失败。此时，Traversal Using Relays around NAT (TURN)服务器成为必要的辅助工具，它作为中继，帮助两端建立连接。
配置TURN服务器：
const pc = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' },
{
urls: 'turn:numb.viagenie.ca',
username: 'your_username',
credential: 'your_password'
}
]
});
确保你有合法的TURN服务器凭据，并根据实际情况替换username和credential。
音频和视频编码器选择
WebRTC支持多种音频和视频编解码器，不同的编解码器对带宽和质量有不同的影响。开发者可以根据应用场景选择最合适的编解码器。
查看支持的编解码器：
console.log(navigator.mediaDevices.getSupportedConstraints());
设置首选编解码器： 在创建RTCPeerConnection时，可以通过SDP Offer/Answer过程协商编解码器，或者使用特定API（如果支持）来设置首选编解码器。
音视频同步
WebRTC通过时间戳来确保音频和视频的同步。然而，在复杂网络环境下，仍可能出现不同步现象。开发者可能需要实现自定义的同步逻辑，比如基于PTS/DTS（Presentation Time Stamp / Decoding Time Stamp）进行调整。
低延迟优化
对于实时性要求极高的应用（如在线游戏、远程手术），降低延迟是关键。这可能涉及减少编解码延迟、优化网络传输策略、使用更高效的编解码器（如AV1）等。
服务质量(QoS)策略
应用QoS策略可以帮助优先保障关键数据（如音频）的传输，避免在带宽紧张时影响用户体验。这可以通过在RTCRtpSender上设置优先级来实现。
测试和调试工具
- Chrome DevTools：提供了WebRTC相关的调试面板，可查看连接状态、媒体统计信息等。
- webrtc-internals：Chrome的一个实验性功能，提供详细的WebRTC内部运行数据，非常适合深入分析和调试。
- external libraries：如simple-peer、peerjs等库，它们提供了更高级的API和内置的调试工具。