局域网摄像头流传输问题：HTML5 Video元素无法加载

1. HTML5 Video元素的核心问题 #

• 格式不匹配：当前ffmpeg输出的是裸MPEG-TS流，但给video标签指定的type="video/mp4"完全错误。HTML5 Video原生对裸TS流兼容性极差，几乎所有现代浏览器都无法直接识别和解码这种无标准容器头的流。
• HTTP响应头缺失：你的Node.js服务器仅直接管道传输流，未设置正确的响应头：
  • 未指定对应TS流的Content-Type: video/MP2T，即便设置正确，浏览器依然不支持直接播放裸TS流；
  • 缺少Transfer-Encoding: chunked，浏览器无法识别流的分段边界，导致一直处于加载状态。
• 容器格式限制：浏览器原生仅支持MP4（分段可流化版本）、WebM、Ogg等带标准容器结构的媒体流，裸TS流不在原生支持范围内，只有专业播放器（如VLC、ffplay）能直接处理这种底层流格式。

2. 更优实现方案 #

方案一：分段MP4（fMP4）—— 最简配置，原生支持 #

这是最贴近你当前需求的方案，无需额外服务，仅调整ffmpeg命令和Node.js响应头即可：

调整后的ffmpeg命令

ffmpeg -f video4linux2 -i /dev/video0 \
  -an -c:v libx264 -b:v 1024k -video_size 800x600 -pix_fmt yuv420p -preset ultrafast \
  -tune zerolatency -g 16 -keyint_min 16 -movflags frag_keyframe+empty_moov+default_base_moof -f mp4 pipe:1

参数说明：

• -movflags frag_keyframe+empty_moov+default_base_moof：生成可流化的分段MP4，无全局moov头，每个关键帧对应一个片段，适配实时流传输场景。

Node.js服务器响应头设置

// 在管道传输前添加响应头
res.writeHead(200, {
  'Content-Type': 'video/mp4',
  'Transfer-Encoding': 'chunked',
  'Connection': 'keep-alive',
  'Cache-Control': 'no-cache'
});
// 将ffmpeg的stdout管道到响应对象
ffmpegProcess.stdout.pipe(res);

此时video标签可直接使用：

<video src="http://192.168.0.1:3000/stream" autoplay muted playsinline></video>

方案二：HLS流—— 兼容性更强，适配多客户端 #

如果需要更好的兼容性（比如支持旧浏览器），可以采用HLS流：

ffmpeg推流命令

ffmpeg -f video4linux2 -i /dev/video0 \
  -an -c:v libx264 -b:v 1024k -video_size 800x600 -pix_fmt yuv420p -preset ultrafast \
  -tune zerolatency -g 16 -keyint_min 16 -f hls -hls_time 2 -hls_list_size 3 -hls_flags delete_segments+append_list /path/to/stream.m3u8

参数说明：

• -hls_time 2：每2秒生成一个TS片段；
• -hls_list_size 3：仅保留最新3个片段，避免磁盘占用过高；
• -hls_flags delete_segments+append_list：自动删除旧片段并更新m3u8播放列表。

客户端播放

现代浏览器（Chrome、Safari）原生支持HLS，可直接使用：

<video src="http://192.168.0.1:3000/stream.m3u8" type="application/x-mpegURL" autoplay muted playsinline></video>

旧浏览器可借助video.js等第三方库实现兼容。

方案三：WebRTC—— 极低延迟，实时性最优 #

如果追求最低延迟（局域网内可做到<100ms），WebRTC是最佳选择：

• 无需容器封装，直接传输媒体流；
• 需搭建简单的信令服务器（Node.js即可实现），用于客户端与服务器交换媒体协商信息；
• 可使用ffmpeg将摄像头流转成WebRTC兼容的格式，或借助Janus、Mediasoup等媒体服务器简化流处理逻辑。

内容的提问来源于stack exchange，提问作者Franck Freiburger