如何将OpenCV输出的视频存储到Plotly Dash的dcc.Store组件中

需求可行性确认 #

这个需求完全可以实现。dcc.Store 支持存储序列化的字符串数据，你只需要把CV模型处理后的视频二进制内容编码为Base64格式的字符串，就可以直接存入dcc.Store，全程不需要在服务端本地生成持久化的视频文件。

核心实现步骤 #

• 第一步：CV模型处理完成后，将输出视频以二进制流的形式暂存在内存中（不用写入本地磁盘），Python侧可以用io.BytesIO类实现内存级的流存储
• 第二步：将内存中的视频二进制内容编码为Base64字符串，需要给字符串补充对应视频格式的媒体类型前缀，比如MP4格式的前缀为data:video/mp4;base64,
• 第三步：回调函数中将拼接完成的Base64字符串输出给dcc.Store组件的data属性存储
• 第四步：需要展示视频时，直接从dcc.Store中读取Base64字符串，赋值给html.Video组件的src属性即可播放

最小实现示例代码 #

import dash
from dash import dcc, html, Input, Output, State, callback
import io
import base64

# 你的CV模型处理依赖包根据实际需求引入即可

app = dash.Dash(__name__)

app.layout = html.Div([
    # 视频选择下拉框
    dcc.Dropdown(
        id="video-select",
        options=[
            {"label": "示例视频1", "value": "video1"},
            {"label": "示例视频2", "value": "video2"}
        ]
    ),
    # 处理触发按钮
    html.Button("运行CV处理", id="process-btn"),
    # 存储处理后视频的dcc.Store，可根据需求调整storage_type
    dcc.Store(id="processed-video-store", storage_type="memory"),
    # 视频展示组件
    html.Video(id="output-video", controls=True, style={"width": "800px", "margin-top": "20px"})
])

@callback(
    Output("processed-video-store", "data"),
    Input("process-btn", "n_clicks"),
    State("video-select", "value"),
    prevent_initial_call=True
)
def process_video(n_clicks, selected_video):
    # 此处替换为你自己的CV模型处理逻辑，不需要写本地文件，直接输出到内存流
    output_stream = io.BytesIO()
    # -------------------
    # 你的CV处理逻辑开始：将处理完成的视频写入output_stream中，以MP4格式为例
    # 你的CV处理逻辑结束
    # -------------------
    output_stream.seek(0)
    # 编码为Base64字符串
    base64_video = base64.b64encode(output_stream.read()).decode('utf-8')
    # 拼接媒体类型前缀
    video_src = f"data:video/mp4;base64,{base64_video}"
    return video_src

@callback(
    Output("output-video", "src"),
    Input("processed-video-store", "data"),
    prevent_initial_call=True
)
def display_video(stored_video):
    return stored_video

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

注意事项 #

• dcc.Store的存储上限受浏览器单条数据大小限制，常规100MB以内的视频都可以正常存储，如果视频体积过大建议拆分存储或者压缩视频后再编码
• 视频编码格式需要和前缀的媒体类型匹配，避免出现无法播放的问题
• storage_type设置为memory时页面刷新后数据会丢失，如果需要临时持久化可以改为localStorage，但会占用用户浏览器的本地存储空间

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