基于wasm的web端无插件监控实时预览方法技术

本发明专利技术的实施例公开基于wasm的web端无插件监控实时预览方法，涉及视频播放技术领域。所述方法，包括：对目标摄像头的实时监控视频流进行拉取；通过目标浏览器加载用于视频转码的wasm转码程序，从而通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换，得到目标浏览器可以直接渲染播放的视频协议格式的目标视频流；将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放。本发明专利技术具有兼容性强，部署方便，消耗资源低等优点，有效地提高了用户使用体验。效地提高了用户使用体验。效地提高了用户使用体验。

【技术实现步骤摘要】
基于wasm的web端无插件监控实时预览方法


[0001]本专利技术属于视频播放
，尤其涉及基于wasm的web端无插件监控实时预览方法。

技术介绍

[0002]随着视频监控技术的发展，部署成本越来越低，监控效果越来越好，应用场景越来越多，如安全重点区域，人流密集区域，仓库等等，都设置有视频监控。播放监控摄像头实时监控视频的本地客户端应用，跨平台兼容性较差，往往能在windows系统上正常使用的本地客户端应用，在android系统上却不能正常运行，不同的平台系统需要进行特殊的适配才能让本地客户端应用正常运行，另外，本地客户端更新慢，一旦本地客户端应用发现问题或有新特性发布，用户都需要花费大量时间来更新，从而严重影响了用户的体验。
[0003]为了提高用户的体验，提出了使用如IE ActiveX插件、NaCl/PNaCl/PPAPI插件方式来播放实时监控视频的方法，虽然在一定程度上解决了本地客户端应用的兼容性和更新问题，但是IE已经被淘汰，用户逐步减少；NaCl/PNaCl/PPAPI插件也因多种因素不被浏览器厂家支持，给用户带来了使用不便的问题。另外使用后端转码浏览器的方法，可以直接播放的视频码流格式(往往为RTSP协议的视频流)，来查看监控视频画面，但是此类方法消耗服务器资源非常高，使得成本剧增。

技术实现思路

[0004]有鉴于此，本专利技术实施例提供基于wasm的web端无插件监控实时预览方法，用于不仅解决使用本地客户端应用和插件方式播放实时监控视频方法，降低用户体验问题，而且也解决通过后端转码浏览器播放实时监控视频方法，消耗服务器资源过高，成本较大的问题。本专利技术先通过wasm转码程序对实时监控视频流进行转换，然后浏览器的前端界面就可以播放转码后实时监控视频流，具有兼容性强，部署方便，消耗资源低等优点，有效地提高了用户使用体验。
[0005]本专利技术实施例提供基于wasm的web端无插件监控实时预览方法，包括：
[0006]对目标摄像头的实时监控视频流进行拉取；
[0007]通过目标浏览器加载用于视频转码的wasm转码程序，从而通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换，得到目标浏览器可以直接渲染播放的视频协议格式的目标视频流；
[0008]将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放。
[0009]在一可选实施例中，在所述对目标摄像头的实时监控视频流进行拉取之前，还包括：
[0010]将所述目标浏览器后端用于视频转码的C/C++代码编译为wasm转码程序；
[0011]其中，所述通过目标浏览器加载用于视频转码的wasm转码程序，包括：所述目标浏览器通过JS胶水代码加载所述wasm转码程序。
[0012]在一可选实施例中，在所述对目标摄像头的实时监控视频流进行拉取之前，还包括：
[0013]将全部监控摄像头的标识以矩阵形式排列在所述目标浏览器的前端界面上显示；
[0014]接收用户对所述前端界面上显示的至少一个监控摄像头的标识的选定，将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头。
[0015]在一可选实施例中，当被选定的监控摄像头有多个时，所述将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头，还包括：将多个目标摄像头根据被选定顺序从1开始顺序编号，得到目标摄像头与临时编号的对应关系；
[0016]所述对目标摄像头的实时监控视频流进行拉取，包括：
[0017]按照目标摄像头对应的临时编号从小到大的顺序，依次拉取所述多个目标摄像头的实时监控视频流；
[0018]将拉取到的多个目标摄像头的实时监控视频流按照拉取顺序按序组合，得到第一组合视频流；所述第一组合视频流中的每段视频流具有相应的目标摄像头对应的临时编号信息；
[0019]其中，所述通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换，得到目标浏览器可以直接渲染播放的视频协议格式的目标视频流，包括：
[0020]通过所述wasm转码程序将所述第一组合视频流转换为目标浏览器可以直接渲染播放的视频协议格式的第二组合视频流；
[0021]将所述第二组合视频流根据临时编号信息拆分为多个目标摄像头各自对应的目标视频流。
[0022]在一可选实施例中，所述将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放，包括：
[0023]将所述多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上排列成互不重叠的矩阵形式的多个视频窗口中播放。
[0024]在一可选实施例中，所述接收用户对所述前端界面上显示的监控摄像头中至少一个监控摄像头的标识的选定，将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头，还包括：
[0025]记录目标摄像头的总数以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标；其中，所述二维直角坐标系以所述目标浏览器的前端界面的左上顶点为原点，以所述前端界面的上边界向右为X轴正方向，以所述前端界面的左边界向下为Y轴正方向；
[0026]所述将所述多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上排列成互不重叠的矩阵形式的多个视频窗口中播放，包括：
[0027]根据目标摄像头的总数、每个目标摄像头对应的临时编号以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标，基于第一公式确定每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标；
[0028]根据每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标以及目标摄像头的总数，基于第二公式确定每个目标摄像头在所述前端界面上对应的视频窗口的显示区域；
[0029]将每个目标摄像头对应的目标视频流发送至其在所述前端界面上对应的视频窗口中播放；
[0030]其中，所述第一公式为：
[0031][0032]所述第二公式为：
[0033][0034]所述第一公式和第二公式中，(X(i),Y(i))表示临时编号为i的目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标；A表示所述目标浏览器的正方形的前端界面的边长；i＝1,2,
…
,n；n表示目标摄像头的总数；％表示取余符号；表示做整数除法；表示向下取整；D{X(i),Y(i)}表示临时编号为i的目标摄像头在所述前端界面上对应的视频窗口的显示区域在所述二维直角坐标系中所覆盖的坐标点集合；集合；表示将k1的值从1取值到时每改变一次k1的值都需要将k2的值从1取值到代入到括号中计算。
[0035]在一可选实施例中，所述将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放，还包括：
[0036]显示每个目标摄像头对应的目标视频流播放的延时状态。
[0037]在一可选实施例中，所述显示每个目标摄像头对应的目标视频流播放的延时状态，包括：...

【技术保护点】

【技术特征摘要】
1.基于wasm的web端无插件监控实时预览方法，其特征在于，包括：对目标摄像头的实时监控视频流进行拉取；通过目标浏览器加载用于视频转码的wasm转码程序，从而通过所述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端无插件监控实时预览方法，其特征在于，所述接收用户对所述前端界面上显示的监控摄像头中至少一个监控摄像头的标识的选定，将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头，还包括：
记录目标摄像头的总数以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标；其中，所述二维直角坐标系以所述目标浏览器的前端界面的左上顶点为原点，以所述前端界面的上边...

【专利技术属性】
技术研发人员：余丹，邢智涣，兰雨晴，王丹星，于艺春，
申请(专利权)人：慧之安信息技术股份有限公司，
类型：发明
国别省市：