PyTorch动态生成视频流式传输至前端仅播放首段的问题求助

当前方案使用multipart/x-mixed-replace协议传输独立MP4片段，但浏览器<video>标签不支持通过这种方式连续播放多个完整MP4文件——每个独立MP4都包含完整的文件头（moov原子），浏览器无法自动拼接成连续播放流，因此播放完第一个片段后就会停止。

以下是两种可行的解决思路：

方案一：MediaSource API 实现前端流式拼接 #

核心是让后端输出碎片化MP4（fMP4），前端通过MediaSource API将流式接收的片段喂给视频标签，无需等待全量生成。

后端调整（FastAPI/Python） #

1. 生成碎片化MP4：修改视频生成逻辑，确保输出格式为fMP4（moov原子位于文件头部，支持流式解析）。如果使用moviepy，添加frag_keyframe_interval=1参数：

import os
import tempfile
from fastapi import FastAPI, Response, StreamingResponse

app = FastAPI()

def gen(videoname):
    for frame in generate_video_pytorch(videoname):
        with tempfile.NamedTemporaryFile(suffix=".mp4", delete=False) as temp_file:
            temp_filename = temp_file.name
            # 生成碎片化MP4，确保每个关键帧对应可流式解析的片段
            frame.write_videofile(temp_filename, codec="libx264", audio_codec="aac", 
                                  logger=None, frag_keyframe_interval=1)
        
        with open(temp_filename, "rb") as f:
            yield f.read()
        # 及时删除临时文件，避免磁盘占用
        os.unlink(temp_filename)

@app.get("/stream_video")
async def stream_video(videoname: str, response: Response):
    response.headers["Cache-Control"] = "no-cache"
    response.headers["Connection"] = "keep-alive"
    response.headers["Content-Type"] = "video/mp4"
    response.headers["Accept-Ranges"] = "bytes"
    # 移除multipart协议，直接返回fMP4字节流
    return StreamingResponse(gen(videoname), media_type="video/mp4")

2. 关键修改：移除multipart/x-mixed-replace，直接返回video/mp4格式的字节流，确保响应头支持流式传输。

前端调整（HTML/JS） #

使用MediaSource API处理流式视频，手动拼接片段：

<h1>Video streaming</h1>
<form id="stream_form">
    <label for="filename">Enter Video Name:</label><br>
    <input type="text" id="filename" name="filename" value="videoname"><br>
    <input type="submit" value="Stream">
</form>

<video id="stream_video" controls autoplay width="400">
    Your browser does not support the video tag.
</video>

<script>
document.getElementById('stream_form').addEventListener('submit', async (event) => {
    event.preventDefault();
    const videoName = document.getElementById('filename').value;
    const videoElement = document.getElementById('stream_video');
    
    // 初始化MediaSource
    const mediaSource = new MediaSource();
    videoElement.src = URL.createObjectURL(mediaSource);
    
    mediaSource.addEventListener('sourceopen', async () => {
        // 匹配H.264视频和AAC音频的codec格式
        const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
        sourceBuffer.mode = 'sequence'; // 按顺序拼接片段
        
        // 发起流式请求
        const response = await fetch(`http://localhost:8000/stream_video?video_name=${encodeURIComponent(videoName)}`);
        const reader = response.body.getReader();
        
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            
            // 等待sourceBuffer可写入，避免并发写入冲突
            while (sourceBuffer.updating) {
                await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
            }
            
            sourceBuffer.appendBuffer(value);
        }
        
        // 所有片段加载完成后结束流
        while (sourceBuffer.updating) {
            await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
        }
        mediaSource.endOfStream();
    });
});
</script>

方案二：HLS 流媒体协议 #

如果需要更好的多端兼容性（如移动端），可采用HLS协议：将生成的视频片段转成TS格式，实时维护m3u8播放列表，前端加载m3u8地址即可实现连续播放。

核心步骤 #

1. 后端处理：

   • 将每个PyTorch生成的视频片段转成固定时长（1-10秒）的TS格式（可通过ffmpeg或python-ffmpeg库实现）。
   • 实时更新m3u8播放列表，每次生成新TS片段就添加对应的条目。
   • 提供m3u8文件和TS片段的访问接口（FastAPI可静态服务TS文件，动态返回最新m3u8内容）。

2. 前端处理：
   使用原生HLS支持（现代浏览器已内置）或video.js等库加载m3u8地址：

<video id="stream_video" controls autoplay width="400" playsinline>
    <source src="http://localhost:8000/stream_hls?video_name=xxx" type="application/x-mpegURL">
</video>

关键注意事项 #

• 碎片化MP4是MediaSource API的核心要求，普通MP4因moov原子在文件末尾，无法被流式解析。
• HLS协议需将视频切成统一时长的TS片段，即使生成的原始片段长度不固定，也可通过转码适配。
• 后端需及时清理临时文件，避免磁盘占用过高。

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