浏览器端重构IP摄像头视频查看器时WebSocket无视频流问题求助

核心问题解答 #

• 连接成功后摄像头自动推送视频流的预期是错误的。几乎所有商用IP摄像头的WebSocket服务都不会在连接建立后主动推流，需要客户端先发送符合设备协议规范的请求指令，才会开始返回视频流数据。
• 你的实现大方向是正确的：官方UI用<canvas>+libde265.js的技术栈，本质就是通过WebSocket传输H.265编码的裸流数据，前端软解码后绘制到画布上，和你的思路完全匹配。

具体操作建议 #

第一步：抓取官方触发推流的指令 #

你需要先打开官方Web UI的浏览器开发者工具，抓取WebSocket通信的完整报文：

1. 切换到网络>WebSocket面板，找到对应ws://192.168.0.20:80/websocket的连接
2. 查看连接建立后，官方前端主动发送的第一条/前几条报文内容，这些就是触发推流的指令
3. 注意报文的格式：大概率是JSON格式字符串，也可能是二进制Buffer，需要完整复制报文内容和格式

第二步：调试指令获取流数据 #

在你的代码中，连接建立成功后，先发送你抓取到的触发指令，即可收到摄像头推送的H.265流数据：

const WS_URL = 'ws://192.168.0.20:80/websocket';
// 替换为你抓取到的实际触发指令，示例为常见的JSON格式请求
const START_STREAM_CMD = JSON.stringify({cmd: "start_stream", channel: 0, stream_type: "main"});

function setupWebSocket() {
    const ws = new WebSocket(WS_URL);
    // 如果指令是二进制格式，需要指定binaryType
    // ws.binaryType = 'arraybuffer';

    ws.onopen = function() { 
        console.log('connected');
        // 连接建立后立刻发送触发推流的指令
        ws.send(START_STREAM_CMD);
    }
    ws.onmessage = function(e) {
        // 这里收到的e.data就是H.265的帧数据
        console.log('收到流数据：', e.data);
    }
    ws.onerror = function(e) {
        console.error('连接错误：', e);
    }

    return ws;
}

const ws = setupWebSocket();

第三步：H.265流解码绘制 #

拿到流数据后，直接调用libde265.js的解码接口即可，步骤如下：

• 初始化libde265解码器实例
• 每次收到WebSocket消息时，将H.265帧数据送入解码器
• 监听解码器的帧输出回调，将YUV格式的帧数据转换为RGB，绘制到canvas上即可
• 注意处理I帧、P帧的顺序，避免花屏

其他注意事项 #

• 部分摄像头的WebSocket连接需要附带登录后的鉴权信息，比如Cookie、token参数，要确保你的请求和官方UI的请求头完全一致
• 如果流数据是分段传输的，需要自己做帧拼接，完整的一帧数据才能正常解码
• 4K 8MP的H.265流软解码对CPU性能要求较高，建议优先用低清子流测试

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