如何在Python中像ShoutCast一样将OpenCV输出流推送到浏览器？

我尝试在网页浏览器中显示经OpenCV处理后的视频，实现类似ShoutCast的流媒体效果。我了解ShoutCast通过HTTP协议实现该功能，但不知道如何让页面加载完成的同时显示视频，而非持续加载直至处理结束。此外我发现ShoutCast不会周期性向流页面发送数据，但播放时长仍在增加且音频持续播放，请问该如何实现此功能？

我的测试代码 #

import os
from flask import Flask, Response
import cv2
from utils.app_root_dir import app_root_dir

app = Flask(__name__)

def generate_frames():
    cap = cv2.VideoCapture(os.path.normpath(app_root_dir().joinpath("data/temp", "video-979257305707693982.mp4")))
    while cap.isOpened():
        ret, frame = cap.read()
        if not ret:
            break
        ret, buffer = cv2.imencode('.jpg', frame)
        frame = buffer.tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/video-stream')
def video_feed():
    return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame', status=None)

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True, threaded=True)

测试所用ShoutCast流 #

• 流#1：音频流
• 流#2：音频流

一、实现页面加载完成即显示视频（而非等待处理结束） #

你当前使用的multipart/x-mixed-replace协议本身就是增量式推送帧数据，浏览器收到第一帧就会渲染，不会等待全部流结束。若出现“持续加载”的情况，可从以下几点调整：

1. 控制帧推送帧率：OpenCV读取本地视频时，若不匹配原帧率推送，可能导致逻辑阻塞或推送过快。可添加延时同步原视频帧率：

   import time
   def generate_frames():
       cap = cv2.VideoCapture(os.path.normpath(app_root_dir().joinpath("data/temp", "video-979257305707693982.mp4")))
       fps = cap.get(cv2.CAP_PROP_FPS)  # 获取原视频帧率
       while cap.isOpened():
           ret, frame = cap.read()
           if not ret:
               break
           ret, buffer = cv2.imencode('.jpg', frame)
           frame = buffer.tobytes()
           yield (b'--frame\r\n'
                  b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
           time.sleep(1/fps)  # 按原帧率延时
   

2. 优化响应头配置：禁用缓存避免浏览器缓存旧帧，同时明确响应状态码：

   @app.route('/video-stream')
   def video_feed():
       return Response(
           generate_frames(),
           mimetype='multipart/x-mixed-replace; boundary=frame',
           headers={'Cache-Control': 'no-cache, no-store, must-revalidate'}
       )
   

3. 前端页面配合：不要直接访问流地址，改用HTML页面嵌入<img>标签加载流，浏览器会逐帧渲染：

   <!DOCTYPE html>
   <html>
   <body>
       <img src="/video-stream" alt="Video Stream">
   </body>
   </html>
   

二、模拟ShoutCast的“无周期性数据但播放时长递增”特性 #

ShoutCast核心是HTTP持久连接下的连续字节流推送，播放器通过缓存维持播放时长。要实现类似效果，需调整流传输方式：

1. 改用字节流协议：放弃multipart/x-mixed-replace分段推送，直接推送编码后的标准视频字节流（如H.264+AAC封装的MP4），让浏览器原生播放器处理：

   import time
   def generate_stream():
       # 若为实时处理，需先将OpenCV帧编码为H.264/AAC格式的字节流
       with open(os.path.normpath(app_root_dir().joinpath("data/temp", "video-979257305707693982.mp4")), 'rb') as f:
           while True:
               chunk = f.read(1024*1024)  # 按1MB块推送
               if not chunk:
                   break
               yield chunk
               time.sleep(0.1)  # 模拟实时流延时
   
   @app.route('/video-stream')
   def video_feed():
       return Response(
           generate_stream(),
           mimetype='video/mp4',
           headers={
               'Cache-Control': 'no-cache',
               'Transfer-Encoding': 'chunked',
               'Content-Type': 'video/mp4'
           }
       )
   

2. 关键逻辑说明：浏览器原生播放器会缓存一定量的流数据，即使服务器暂时停止推送，播放器仍会播放缓存内容并持续递增时长。只要推送的是标准流媒体格式，播放器会自动处理缓存、时长计算等逻辑，和ShoutCast音频流的表现一致。

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