h5 实现直播

H5 实现直播的技术方案

H5 实现直播主要依赖于 HTML5 的 video 标签结合流媒体协议（如 HLS、DASH 或 WebRTC）。以下是几种常见的实现方式：

使用 HLS (HTTP Live Streaming)

HLS 是苹果推出的流媒体协议，兼容大部分现代浏览器（除早期 Firefox）。实现步骤如下：

1. 准备 HLS 流媒体文件（.m3u8 索引文件和 .ts 分片文件），通常由服务端生成。

2. 在 HTML 中通过 video 标签直接播放：

   <video controls>
   <source src="http://example.com/live/stream.m3u8" type="application/x-mpegURL">
   </video>

3. 对于不原生支持 HLS 的浏览器（如 Firefox），需引入 hls.js 库：

   <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
   <script>
   if (Hls.isSupported()) {
    const video = document.getElementById('video');
    const hls = new Hls();
    hls.loadSource('http://example.com/live/stream.m3u8');
    hls.attachMedia(video);
   }
   </script>

使用 WebRTC 实现低延迟直播

WebRTC 适合需要实时交互的场景（如直播连麦），延迟可控制在 1 秒内：

1. 通过 RTCPeerConnection 建立 P2P 连接：

   const pc = new RTCPeerConnection();
   pc.addStream(mediaStream); // 发送端添加媒体流
   pc.onaddstream = e => videoElement.srcObject = e.stream; // 接收端处理流

2. 使用信令服务器（如 Socket.io）交换 SDP 信息：

   socket.on('offer', async offer => {
   await pc.setRemoteDescription(offer);
   const answer = await pc.createAnswer();
   await pc.setLocalDescription(answer);
   socket.emit('answer', answer);
   });

使用 MSE (Media Source Extensions)

MSE 允许 JavaScript 动态生成媒体流，适合自定义流处理：

1. 创建 MediaSource 对象并绑定到 video 标签：

   const mediaSource = new MediaSource();
   video.src = URL.createObjectURL(mediaSource);

2. 通过 SourceBuffer 添加媒体分段：

   mediaSource.addEventListener('sourceopen', () => {
   const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
   fetch('video_segment.mp4').then(res => res.arrayBuffer()).then(data => {
    sourceBuffer.appendBuffer(data);
   });
   });

服务端推流方案

1. 编码工具：使用 OBS、FFmpeg 等工具推流：

   ffmpeg -i input.mp4 -c:v libx264 -f hls -hls_time 4 -hls_list_size 6 stream.m3u8

2. CDN 支持：选择支持 HLS/DASH 的 CDN 服务（如阿里云直播、腾讯云直播）。

3. WebSocket 传输：对于私有协议，可通过 WebSocket 传输二进制数据：

   

   const ws = new WebSocket('wss://example.com/live');
   ws.binaryType = 'arraybuffer';
   ws.onmessage = e => {
   sourceBuffer.appendBuffer(e.data);
   };

注意事项

• 兼容性：HLS 在 iOS 上支持最好，Android 需测试目标浏览器版本。
• 延迟优化：HLS 默认延迟较高（10s+），可通过减少分片时长（如 1s）降低延迟。
• 自适应码率：HLS/DASH 支持多码率切换，需服务端生成多版本流。
• DRM 保护：重要内容可集成 Widevine 或 FairPlay 加密。

以上方案可根据实际需求组合使用，例如用 WebRTC 实现主播端推流，用 HLS 实现观众端播放。