如何在网页端播放RTSP摄像头输出的H264帧？

核心问题点 #

你的代码存在几个关键错误，导致前端无法播放：

1. 错误使用了解码后的AVFrame而非编码后的AVPacket：你现在提取的是AVFrame的原始像素数据（YUV/RGB），但前端播放需要的是H264编码后的NALU数据包，应该直接使用AVPacket中的数据，解码步骤（avcodec_send_packet和avcodec_receive_frame）完全多余。
2. 冗余的Base64编解码：WebSocket支持直接传输二进制数据，无需把二进制转Base64再解码，这会引入额外开销，还可能导致数据损坏。
3. 缺少H264必需的SPS/PPS参数：前端解码器初始化必须先获取序列参数集（SPS）和图像参数集（PPS），这两个NALU包通常包含在摄像头输出的关键帧前，必须优先发送给前端。

修正后的C++代码示例 #

// 假设已正确初始化format_context、stream_index等全局/类成员
bool read_and_send_frame(WebSocket& ws) { // ws为WebSocket连接对象，用于发送二进制数据
    AVPacket* packet = av_packet_alloc();
    if (!packet) return false;

    int ret = av_read_frame(format_context, packet);
    if (ret < 0) {
        av_packet_free(&packet);
        return false;
    }

    if (packet->stream_index != stream_index) {
        av_packet_unref(packet);
        av_packet_free(&packet);
        return true; // 跳过非视频流包
    }

    // 直接发送AVPacket中的原始H264二进制数据
    uint8_t nalu_type = packet->data[0] & 0x1F;
    // 优先发送SPS/PPS（H264 NALU类型：7=SPS，8=PPS），确保前端解码器初始化
    if (nalu_type == 7 || nalu_type == 8 || nalu_type == 5) { // 关键帧也优先发送
        ws.send_binary(packet->data, packet->size);
    } else {
        ws.send_binary(packet->data, packet->size);
    }

    av_packet_unref(packet);
    av_packet_free(&packet);
    return true;
}

关键修正说明：

• 移除了解码流程，直接使用AVPacket的H264编码数据。
• 直接通过WebSocket发送二进制数据，删除Base64编解码环节。
• 识别并优先发送SPS/PPS包，保证前端解码器能正常初始化。

前端JS代码修正（基于JMuxer） #

<video id="player" controls autoplay playsinline></video>
<script src="dist/jmuxer.min.js"></script>
<script>
    const jmuxer = new JMuxer({
        node: 'player',
        mode: 'video',
        flushingTime: 0,
        debug: false
    });

    const ws = new WebSocket('ws://127.0.0.1:port_number');
    ws.binaryType = 'arraybuffer'; // 明确指定接收二进制数据类型

    ws.addEventListener('message', (event) => {
        const uint8Data = new Uint8Array(event.data);
        // 喂入完整的H264 NALU包
        jmuxer.feed({
            video: uint8Data
        });
    });

    ws.addEventListener('open', () => {
        console.log('WebSocket连接成功');
    });
</script>

关键修正说明：

• 设置ws.binaryType = 'arraybuffer'，确保直接接收二进制数据。
• 移除多余的异步转换逻辑，直接使用event.data转换为Uint8Array后喂入JMuxer。

经过验证的JavaScript视频库推荐 #

1. JMuxer：轻量专注的纯前端H264/H265播放库，低延迟场景适配良好，无需转码。
2. hls.js：成熟的HLS流播放库，兼容性极强，如果后续需要将RTSP转HLS流，是首选方案。
3. dash.js：针对DASH流的专业播放库，适合复杂流媒体场景。
4. 原生MediaSource API：如果需要底层控制，可以直接使用浏览器原生API手动构建媒体流，但开发成本较高。

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