Blazor WASM 摄像头流显示与帧数据获取问题

云上老周

2026-8-28

Blazor 摄像头实时流取帧实现方案

核心需求

实现Blazor端摄像头条码识别能力，需满足两个要求：

页面实时渲染摄像头采集的实时画面
流播放过程中逐帧获取可用于解码的图像数据

BlazorMedia 回调数据异常原因

BlazorMedia组件OnData事件回调默认返回的byte[]为无格式头的原始RGBA像素裸数据，不包含BMP/JPEG/PNG等标准图片格式的文件头标识，直接按标准图片文件流解码必然失败。
基础接入代码参考：

<VideoMedia OnData="GotData"></VideoMedia>

@code 
{
    private void GotData(byte[] bytes)
    {
        // 默认配置下此处为原始RGBA像素数组，非标准图片格式字节流
    }
}

正确实现方式

方案1：直接使用原始像素数据解码

绝大多数条码识别库（如ZXing）支持直接传入原始像素数组完成解码，无需转成标准图片格式，性能最优：

为VideoMedia组件补充明确参数，固定输出分辨率、像素格式、帧率：

<VideoMedia 
    Width="640"
    Height="480"
    Camera="true"
    OnData="GotData"
    PixelFormat="PixelFormat.RGBA"
    FrameRate="15">
</VideoMedia>

在GotData回调中，将字节数组、对应宽高、像素格式作为入参直接传入条码解码方法即可，无需额外转码。

方案2：配置组件输出标准JPEG格式帧

如果业务逻辑必须使用带格式头的标准图片字节流，添加CaptureType参数指定输出JPEG格式：

<VideoMedia 
    Width="640"
    Height="480"
    Camera="true"
    OnData="GotData"
    CaptureType="CaptureType.JPEG"
    FrameRate="15">
</VideoMedia>

配置完成后，GotData回调返回的字节数组即为标准JPEG格式数据，文件起始标识为0xFF 0xD8，可直接转成图片对象或传入解码逻辑。