现状背景 #

ESP32设备当前提供两个独立的HTTP流：

• MJPEG视频流：由摄像头模块直接输出压缩后的JPG帧，通过multipart/x-mixed-replace格式传输，Chrome可直接播放。
• MP3音频流：麦克风采集的音频经ESP32实时压缩为MP3，通过audio/mpeg格式传输，Chrome需缓冲后播放。

受限于ESP32性能，无法将MJPEG转码为H264，且MKV容器因库体积过大无法部署，现需实现单个HTTP响应内同步传输MJPEG与MP3流，让Chrome能识别并大致同步播放。

现有MJPEG流HTTP响应格式 #

HTTP/1.1 200 OK
Content-Type: multipart/x-mixed-replace;boundary=123456789000000000000987654321
Transfer-Encoding: chunked
Access-Control-Allow-Origin: *
X-Framerate: 60
--123456789000000000000987654321
Content-Type: image/jpeg
Content-Length: 15021
X-Timestamp: 556.000000

...jpg_frame_bytes...
--123456789000000000000987654321
Content-Type: image/jpeg
Content-Length: 14680
X-Timestamp: 557.000000

...jpg_frame_bytes...

现有MP3流HTTP响应格式 #

HTTP/1.1 200 OK
Content-Type: audio/mpeg
Access-Control-Allow-Origin: *

...mp3_data...
...mp3_data...
...mp3_data...

可行解决方案 #

方案1：复用multipart/x-mixed-replace交织传输 #

利用multipart/x-mixed-replace支持不同类型内容块的特性，在同一个响应中交替传输JPG帧和MP3分片，通过X-Timestamp字段做同步标记。

ESP32端实现要点

1. 保持原MJPEG的multipart边界不变，在JPG帧块之间插入MP3分片块：

   --123456789000000000000987654321
   Content-Type: audio/mpeg
   Content-Length: [mp3_chunk_size]
   X-Timestamp: [audio_timestamp]
   
   ...mp3_chunk_bytes...
   --123456789000000000000987654321
   Content-Type: image/jpeg
   Content-Length: [jpg_frame_size]
   X-Timestamp: [video_timestamp]
   
   ...jpg_frame_bytes...
   

2. 控制MP3分片大小：按固定时长（如100ms）切割MP3流，确保每个分片体积小、传输延迟低，避免影响视频流的实时性。
3. 严格对齐X-Timestamp：视频帧和对应音频分片的时间戳尽量保持一致，误差控制在100ms内，保证同步效果。

前端（Chrome）实现要点

1. 使用Fetch API获取流式响应，通过ReadableStream逐块解析multipart内容。
2. 对每个块按Content-Type分类：
   • 类型为image/jpeg时，将字节数据转为Blob，更新<img>元素的src属性实现视频播放。
   • 类型为audio/mpeg时，将字节数据存入AudioContext的缓冲区，结合X-Timestamp调整播放时机，实现音画同步。

方案2：将MP3数据嵌入JPEG元数据 #

在摄像头输出的JPG帧中嵌入小段MP3音频数据（利用JPEG的APP扩展段，如APP1/APP2），每个JPG帧携带对应时间戳的音频片段。

ESP32端实现要点

1. 无需重新编码JPG帧，仅在现有JPG数据的头部插入APP扩展段：
   • APP段格式：0xFFE1 [length] [identifier] [mp3_data]，其中identifier可自定义（如MP3AUDIO），length为后续数据的字节数。
2. 控制嵌入的MP3数据大小：根据JPG帧的帧率（如60fps），每帧嵌入约16ms的MP3数据（对应60fps的单帧时长），避免元数据过大影响传输速度。
3. 保留原X-Timestamp字段，方便前端同步音画。

前端（Chrome）实现要点

1. 加载JPG帧后，解析JPEG的二进制数据，提取APP扩展段中的MP3数据。
2. 将提取的MP3数据拼接成完整流，通过AudioContext播放，同时根据X-Timestamp对齐视频帧的显示时机。

方案对比 #

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