(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210228708.7 (22)申请日 2022.03.10 (71)申请人 慧之安信息技 术股份有限公司 地址 100000 北京市海淀区昆明湖南路51 号A座二层217号 (72)发明人 余丹　邢智涣　兰雨晴　王丹星　 于艺春　 (74)专利代理 机构 北京广技专利代理事务所 (特殊普通 合伙) 11842 专利代理师 张国香 (51)Int.Cl. H04N 21/81(2011.01) H04L 67/025(2022.01) G06F 16/957(2019.01) G06F 9/451(2018.01) (54)发明名称 基于wasm的web端无插 件监控实时预览方法 (57)摘要 本发明的实施例公开基于wasm的web端无插 件监控实时预览方法， 涉及视频播放技术领域。 所述方法， 包括： 对目标摄像头的实时监控视频 流进行拉取； 通过目标浏览器加载用于视频转码 的wasm转码程序， 从而 通过所述wasm转码程序对 所述目标摄像头的实时监控视频流进行转换， 得 到目标浏览器可以直接渲染播放的视频协议格 式的目标视频流； 将所述目标视频流发送至目标 浏览器的前端界面上的视频窗口中播放。 本发明 具有兼容性强， 部署方便， 消耗资源低等优点， 有 效地提高了用户使用体验。 权利要求书3页 说明书9页 附图3页 CN 114745599 A 2022.07.12 CN 114745599 A 1.基于was m的web端无插 件监控实时预览方法， 其特 征在于， 包括： 对目标摄 像头的实时监控视频流进行拉取； 通过目标浏览器加载用于视频转码的w asm转码程序， 从而通过所述wasm转码程序对所 述目标摄像头的实时监控视频流进行转换， 得到目标浏览器可以直接渲 染播放的视频协 议 格式的目标视频流； 将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播 放。 2.如权利要求1所述的基于wasm的web端无插件监控实时预览方法， 其特征在于， 在所 述对目标摄 像头的实时监控视频流进行拉取之前， 还 包括： 将所述目标浏览器后端用于 视频转码的C /C++代码编译为 wasm转码程序； 其中， 所述通过目标浏览器加载用于视频转码的wasm转码程序， 包括： 所述目标浏览器 通过JS胶水代码加载 所述wasm转码程序。 3.如权利要求1所述的基于wasm的web端无插件监控实时预览方法， 其特征在于， 在所 述对目标摄 像头的实时监控视频流进行拉取之前， 还 包括： 将全部监控摄 像头的标识以矩阵形式排列在所述目标浏览器的前端界面上显示； 接收用户对所述前端界面上显示的至少一个监控摄像头的标识的选定， 将被选定的监 控摄像头的标识对应的监控摄 像头作为目标摄 像头。 4.如权利要求3所述的基于wasm的web端无插件监控实时预览方法， 其特征在于， 当被 选定的监控摄像头有多个时， 所述将 被选定的监控摄像头的标识对应的监控摄像头作为目 标摄像头， 还包括： 将多个目标摄像头根据被选定顺序从1开始顺序编号， 得到目标摄像头 与临时编号的对应关系； 所述对目标摄 像头的实时监控视频流进行拉取， 包括： 按照目标摄像头对应的临时编 号从小到大的顺序， 依次拉取所述多个目标摄像头的实 时监控视频流； 将拉取到的多个目标摄像头的实时监控视频流按照拉取顺序按序组合， 得到第 一组合 视频流； 所述第一组合视频流中的每段视频流具有相应的目标摄像头对应的临时编号信 息； 其中， 所述通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换， 得 到目标浏览器可以直接渲染播 放的视频协议格式的目标视频流， 包括： 通过所述wasm转码程序将所述第一组合视频流转换为目标浏览器可以直接渲染播放 的视频协议格式的第二组合视频流； 将所述第二组合视频流根据临时编号信息拆分为多个目标摄像头各自对应的目标视 频流。 5.如权利要求4所述的基于wasm的web端无插件监控实时预览方法， 其特征在于， 所述 将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播 放， 包括： 将所述多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上排列 成互不重 叠的矩阵形式的多个视频窗口中播 放。 6.如权利要求5所述的基于wasm的web端无插件监控实时预览方法， 其特征在于， 所述 接收用户对所述前端界面上显示的监控摄像头中至少一个监控摄像头的标识的选定， 将 被 选定的监控摄 像头的标识对应的监控摄 像头作为目标摄 像头， 还包括：权　利　要　求　书 1/3 页 2 CN 114745599 A 2记录目标摄像头的总数以及每个目标摄像头的标识中心点在预设的二维直角坐标系 中的坐标； 其中， 所述二 维直角坐标系以所述目标浏览器的前端界面的左上顶 点为原点， 以 所述前端界面的上边界向右为X轴正方向， 以所述前端界面的左边界向下为Y轴正方向； 所述将所述多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上 排列成互不重 叠的矩阵形式的多个视频窗口中播 放， 包括： 根据目标摄像头的总数、 每个目标摄像头对应的临时编号以及每个目标摄像头的标识 中心点在预设的二维直角坐标系中的坐标， 基于第一 公式确定每个目标摄像头在所述前端 界面上对应的视频窗口 的中心点在所述 二维直角坐标系中的坐标； 根据每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐 标系中的坐标以及目标摄像头的总数， 基于第二 公式确定每个目标摄像头在所述前端界面 上对应的视频窗口 的显示区域； 将每个目标摄像头对应的目标视频流发送至其在所述前端界面上对应的视频窗口中 播放； 其中， 所述第一公式为： 所述第二公式为： 所述第一公式和第二公式中， (X(i),Y(i))表示临时编号为i的目标摄像头在 所述前端 界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标； A表示所述目标浏览器 的正方形的前端界面的边长； i ＝1,2,…,n； n表示目标摄 像头的总数； ％表示取余符号； 表 示做整数除法； 表示向下取整； D{X(i),Y(i)}表示临时编号为i的目标摄像头在所述前 端界面上对应的视频窗口的显示区域在所述二维直角坐标系中所覆盖的坐标点集合； 表示将k1的值从 1取值到 时每改变一次k1的值都需要将k2的值从1取值到 代入到括 号中计算。 7.如权利 要求4‑6任一项所述的基于w asm的web端无插件监控实时预览方法， 其特征在 于， 所述将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播 放， 还包括： 显示每个目标摄 像头对应的目标视频流 播放的延时状态。 8.如权利要求7所述的基于wasm的web端无插件监控实时预览方法， 其特征在于， 所述 显示每个目标摄 像头对应的目标视频流 播放的延时状态， 包括： 获取每个目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的权　利　要　求　书 2/3 页 3 CN 114745599 A 3