如何将OpenCV输出的视频流在Plotly Dash应用中正常展示

实现思路 #

你提到的参考应用采用的是H.264编码MP4视频输出方案，相比GIF体积更小、画质更高，长视频场景下体验远好于GIF，你可以根据自己的业务场景二选一：

方案1：MP4视频输出（推荐） #

• 用OpenCV完成逐帧姿态检测后，通过cv2.VideoWriter导出为H.264编码的MP4文件，存储到Dash默认的静态资源目录assets下，编码参数选cv2.VideoWriter_fourcc(*'avc1')可保证全浏览器兼容
• 点击Run Model触发的回调逻辑完成处理后，直接返回html.Video组件即可完成渲染，示例配置如下：

html.Video(
    controls = True, # 显示播放控制条
    autoPlay = False, # 不自动播放
    src = "/assets/pose_detection_result.mp4",
    style = {"width": "100%", "margin-top": "1rem"}
)

• 多用户场景下需要给每个输出视频文件名加唯一标识（比如时间戳、用户会话ID），避免不同用户的处理结果互相覆盖。如果不想落地存储文件，可将视频字节流转为Base64编码直接嵌入src属性：

import base64
# 假设video_bytes为生成的MP4二进制内容
base64_video = base64.b64encode(video_bytes).decode("utf-8")
video_src = f"data:video/mp4;base64,{base64_video}"

方案2：GIF输出（适合10秒以内的短结果展示） #

• 帧序列处理完成后，用imageio库拼接生成GIF，同样存储到assets目录
• 回调返回html.Img组件加载GIF即可：

html.Img(
    src = "/assets/pose_detection_result.gif",
    style = {"width": "100%", "margin-top": "1rem"}
)

• 该方案劣势是长视频生成的GIF体积过大、加载慢，且丢失音频信息。

最小可运行回调示例 #

from dash import Dash, html, dcc, Input, Output, State
import os
import cv2

app = Dash(__name__)

app.layout = html.Div([
    dcc.Input(id="youtube_url_input", type="text", placeholder="请输入YouTube视频地址", style={"width":"60%"}),
    html.Button("Run Model", id="run_model_btn", n_clicks=0, style={"margin-left":"1rem"}),
    dcc.Loading( # 加加载动画提升长处理场景体验
        id="loading_wrapper",
        children=[html.Div(id="result_output_area")],
        type="default"
    )
])

@app.callback(
    Output("result_output_area", "children"),
    Input("run_model_btn", "n_clicks"),
    State("youtube_url_input", "value"),
    prevent_initial_call=True
)
def run_pose_detection(n_clicks, youtube_url):
    # 此处写入你的YouTube视频下载、OpenCV逐帧姿态检测逻辑
    # 示例：处理完成后生成MP4到assets目录
    output_file_name = f"pose_result_{n_clicks}_{hash(youtube_url)}.mp4"
    output_path = os.path.join("assets", output_file_name)
    
    # --- 省略你的处理逻辑：写入逐帧姿态检测结果到output_path ---
    
    # 返回视频组件
    return html.Video(
        controls=True,
        src=f"/assets/{output_file_name}",
        style={"width":"100%"}
    )

if __name__ == "__main__":
    app.run_server(debug=True)

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