js实现直播
使用WebRTC实现直播
WebRTC（Web Real-Time Communication）是浏览器原生支持的实时通信技术，适合低延迟直播场景。
基础实现步骤 创建RTCPeerConnection对象建立点对点连接：
const peerConnection = new RTCPeerConnection(configuration);通过getUserMedia获取媒体流并添加到连接中：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
stream.getTracks().forEach(track => {
peerConnection.addTrack(track, stream);
});
});交换ICE候选信息和SDP描述：
peerConnection.onicecandidate = event => {
if (event.candidate) {
// 发送candidate给对等端
}
};使用MediaSource Extensions（MSE）
适合非实时直播场景，通过分段加载媒体内容实现。
实现流程 创建MediaSource对象并绑定video元素：
const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);监听sourceopen事件添加SourceBuffer：
mediaSource.addEventListener('sourceopen', () => {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
// 通过fetch或websocket获取媒体片段
// sourceBuffer.appendBuffer(newData);
});处理分段加载和缓冲：
function appendSegment(segment) {
if (sourceBuffer.updating) {
// 排队等待
} else {
sourceBuffer.appendBuffer(segment);
}
}使用第三方SDK方案
常见SDK选择
- Agora：提供全平台SDK，支持1080p高清和超低延迟
- ZEGOCLOUD：支持H.265编码，提供美颜特效
- 腾讯云LVB：集成腾讯云生态，支持千万级并发
集成示例（以Agora为例） 初始化客户端：
const client = AgoraRTC.createClient({ mode: "live", codec: "h264" });设置角色并加入频道：
client.setClientRole("host");
client.join(APPID, CHANNEL, TOKEN, uid);发布本地流：
AgoraRTC.createMicrophoneAndCameraTracks().then([audioTrack, videoTrack] => {
client.publish([audioTrack, videoTrack]);
});性能优化方案
编码参数调整
const cameraTrack = await AgoraRTC.createCameraTrack({
encoderConfig: "1080p_1", // 分辨率配置
bitrateMin: 2000, // 最小码率
bitrateMax: 4000 // 最大码率
});自适应码率策略
client.on("network-quality", (stats) => {
if (stats.downlinkNetworkQuality > 3) {
cameraTrack.setEncoderConfiguration("480p_1");
}
});CDN融合方案 通过RTMP转推实现大规模分发：
client.startLiveStreaming({
videoWidth: 1280,
videoHeight: 720,
videoFramerate: 30
}, true);注意事项
浏览器兼容性
- WebRTC需HTTPS环境
- Safari对MSE的支持有限制
- 移动端需处理自动播放策略
安全措施
- 使用Token鉴权机制
- 实现房间权限控制
- 开启DTLS-SRTP加密
监控指标
- 端到端延迟监控
- 卡顿率统计
- 首帧时间优化
