CN114745599A - 基于wasm的web端无插件监控实时预览方法 - Google Patents

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

Info

Publication number
CN114745599A
CN114745599A CN202210228708.7A CN202210228708A CN114745599A CN 114745599 A CN114745599 A CN 114745599A CN 202210228708 A CN202210228708 A CN 202210228708A CN 114745599 A CN114745599 A CN 114745599A
Authority
CN
China
Prior art keywords
target
camera
video
video stream
monitoring
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202210228708.7A
Other languages
English (en)
Other versions
CN114745599B (zh
Inventor
余丹
邢智涣
兰雨晴
王丹星
于艺春
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Standard Intelligent Security Technology Co Ltd
Original Assignee
China Standard Intelligent Security Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by China Standard Intelligent Security Technology Co Ltd filed Critical China Standard Intelligent Security Technology Co Ltd
Priority to CN202210228708.7A priority Critical patent/CN114745599B/zh
Publication of CN114745599A publication Critical patent/CN114745599A/zh
Application granted granted Critical
Publication of CN114745599B publication Critical patent/CN114745599B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8166—Monomedia components thereof involving executable data, e.g. software
    • H04N21/8193—Monomedia components thereof involving executable data, e.g. software dedicated tools, e.g. video decoder software or IPMP tool
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • H04L67/025—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP] for remote control or remote monitoring of applications
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8166—Monomedia components thereof involving executable data, e.g. software
    • H04N21/8173—End-user applications, e.g. Web browser, game

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Signal Processing (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • Multimedia (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Closed-Circuit Television Systems (AREA)

Abstract

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

Description

基于wasm的web端无插件监控实时预览方法
技术领域
本发明属于视频播放技术领域，尤其涉及基于wasm的web端无插件监控实时预览方法。
背景技术
随着视频监控技术的发展，部署成本越来越低，监控效果越来越好，应用场景越来越多，如安全重点区域，人流密集区域，仓库等等，都设置有视频监控。播放监控摄像头实时监控视频的本地客户端应用，跨平台兼容性较差，往往能在windows系统上正常使用的本地客户端应用，在android系统上却不能正常运行，不同的平台系统需要进行特殊的适配才能让本地客户端应用正常运行，另外，本地客户端更新慢，一旦本地客户端应用发现问题或有新特性发布，用户都需要花费大量时间来更新，从而严重影响了用户的体验。
为了提高用户的体验，提出了使用如IE ActiveX插件、NaCl/PNaCl/PPAPI插件方式来播放实时监控视频的方法，虽然在一定程度上解决了本地客户端应用的兼容性和更新问题，但是IE已经被淘汰，用户逐步减少；NaCl/PNaCl/PPAPI插件也因多种因素不被浏览器厂家支持，给用户带来了使用不便的问题。另外使用后端转码浏览器的方法，可以直接播放的视频码流格式(往往为RTSP协议的视频流)，来查看监控视频画面，但是此类方法消耗服务器资源非常高，使得成本剧增。
发明内容
有鉴于此，本发明实施例提供基于wasm的web端无插件监控实时预览方法，用于不仅解决使用本地客户端应用和插件方式播放实时监控视频方法，降低用户体验问题，而且也解决通过后端转码浏览器播放实时监控视频方法，消耗服务器资源过高，成本较大的问题。本发明先通过wasm转码程序对实时监控视频流进行转换，然后浏览器的前端界面就可以播放转码后实时监控视频流，具有兼容性强，部署方便，消耗资源低等优点，有效地提高了用户使用体验。
本发明实施例提供基于wasm的web端无插件监控实时预览方法，包括：
对目标摄像头的实时监控视频流进行拉取；
通过目标浏览器加载用于视频转码的wasm转码程序，从而通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换，得到目标浏览器可以直接渲染播放的视频协议格式的目标视频流；
将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放。
在一可选实施例中，在所述对目标摄像头的实时监控视频流进行拉取之前，还包括：
将所述目标浏览器后端用于视频转码的C/C++代码编译为wasm转码程序；
其中，所述通过目标浏览器加载用于视频转码的wasm转码程序，包括：所述目标浏览器通过JS胶水代码加载所述wasm转码程序。
在一可选实施例中，在所述对目标摄像头的实时监控视频流进行拉取之前，还包括：
将全部监控摄像头的标识以矩阵形式排列在所述目标浏览器的前端界面上显示；
接收用户对所述前端界面上显示的至少一个监控摄像头的标识的选定，将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头。
在一可选实施例中，当被选定的监控摄像头有多个时，所述将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头，还包括：将多个目标摄像头根据被选定顺序从1开始顺序编号，得到目标摄像头与临时编号的对应关系；
所述对目标摄像头的实时监控视频流进行拉取，包括：
按照目标摄像头对应的临时编号从小到大的顺序，依次拉取所述多个目标摄像头的实时监控视频流；
将拉取到的多个目标摄像头的实时监控视频流按照拉取顺序按序组合，得到第一组合视频流；所述第一组合视频流中的每段视频流具有相应的目标摄像头对应的临时编号信息；
其中，所述通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换，得到目标浏览器可以直接渲染播放的视频协议格式的目标视频流，包括：
通过所述wasm转码程序将所述第一组合视频流转换为目标浏览器可以直接渲染播放的视频协议格式的第二组合视频流；
将所述第二组合视频流根据临时编号信息拆分为多个目标摄像头各自对应的目标视频流。
在一可选实施例中，所述将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放，包括：
将所述多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上排列成互不重叠的矩阵形式的多个视频窗口中播放。
在一可选实施例中，所述接收用户对所述前端界面上显示的监控摄像头中至少一个监控摄像头的标识的选定，将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头，还包括：
记录目标摄像头的总数以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标；其中，所述二维直角坐标系以所述目标浏览器的前端界面的左上顶点为原点，以所述前端界面的上边界向右为X轴正方向，以所述前端界面的左边界向下为Y轴正方向；
所述将所述多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上排列成互不重叠的矩阵形式的多个视频窗口中播放，包括：
根据目标摄像头的总数、每个目标摄像头对应的临时编号以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标，基于第一公式确定每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标；
根据每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标以及目标摄像头的总数，基于第二公式确定每个目标摄像头在所述前端界面上对应的视频窗口的显示区域；
将每个目标摄像头对应的目标视频流发送至其在所述前端界面上对应的视频窗口中播放；
其中，所述第一公式为：
Figure BDA0003539765970000041
所述第二公式为：
Figure BDA0003539765970000042
所述第一公式和第二公式中，(X(i),Y(i))表示临时编号为i的目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标；A表示所述目标浏览器的正方形的前端界面的边长；i＝1,2,…,n；n表示目标摄像头的总数；％表示取余符号；
Figure BDA0003539765970000043
表示做整数除法；
Figure BDA0003539765970000048
表示向下取整；D{X(i),Y(i)}表示临时编号为i的目标摄像头在所述前端界面上对应的视频窗口的显示区域在所述二维直角坐标系中所覆盖的坐标点集合；
Figure BDA0003539765970000044
Figure BDA0003539765970000045
表示将k1的值从1取值到
Figure BDA0003539765970000046
时每改变一次k1的值都需要将k2的值从1取值到
Figure BDA0003539765970000047
代入到括号中计算。
在一可选实施例中，所述将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放，还包括：
显示每个目标摄像头对应的目标视频流播放的延时状态。
在一可选实施例中，所述显示每个目标摄像头对应的目标视频流播放的延时状态，包括：
获取每个目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻信息；
根据每个目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻信息，基于第三公式确定每个目标摄像头对应的时延状态指示值；
对于每个目标摄像头，控制该目标摄像头对应的三个颜色标记点中显示第一颜色的颜色标记点数量等于该目标摄像头对应的时延状态指示值，以显示第一颜色的颜色标记点数量表征目标摄像头对应的目标视频流播放的延时状态；
其中，每个目标摄像头在所述前端界面上对应的视频窗口中指定位置处均有三个颜色标记点；
所述第三公式为：
Figure BDA0003539765970000051
所述第三公式中，E(t,i)表示当前时刻临时编号为i的目标摄像头对应的时延状态指示值；i＝1,2,…,n；n表示目标摄像头的总数；t表示当前时刻；t(i)表示临时编号为i的目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻；
Figure BDA0003539765970000052
表示将i的值从1取值到n得到t(i)的最小值；
Figure BDA0003539765970000053
表示向上取整。
本发明提供的基于wasm的web端无插件监控实时预览方法，首先拉取实时监控视频流，然后目标游览器通过加载的用于视频转码的wasm转码程序，对实时监控视频流进行转换，获得目标浏览器可以直接渲染播放的视频协议格式的目标视频流，最后目标浏览器的前端界面上的视频窗口，就可以播放目标视频流。本发明具有兼容性强，部署方便，消耗资源低等优点，能有效地提高了用户使用体验。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1为本发明实施例提供的基于wasm的web端无插件监控实时预览方法实施例一流程示意图；
图2为本发明实施例提供的基于wasm的web端无插件监控实时预览方法实施例二流程示意图；
图3为本发明实施例提供的基于wasm的web端无插件监控实时预览方法实施例三流程示意图。
具体实施方式
下面结合附图对本发明实施例进行详细描述。
应当明确，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
图1为本发明实施例提供的基于wasm的web端无插件监控实时预览方法实施例一流程示意图。参见图1，该方法包括如下步骤S101-S103：
S101：对目标摄像头的实时监控视频流进行拉取。
本实施例中，视频监控系统一般都设置了大量分布式的监控摄像头，从而可以让用户全方位的了解监控区域。用户可以选择其中需要查看的摄像头作为本次目标摄像头，则监控系统会从后台拉取相应目标摄像头的实时监控视频流。
作为一可选实施例，本步骤S101之前，还包括：
S1011：将全部监控摄像头的标识以矩阵形式排列在所述目标浏览器的前端界面上显示。
S1012：接收用户对所述前端界面上显示的至少一个监控摄像头的标识的选定，将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头。
本实施例中，将多个监控摄像头的标识以矩阵形式、图形化的方式进行展示，便于用户选择监控摄像头作为目标摄像头，有效地提高了用户使用体验。
S102：通过目标浏览器加载用于视频转码的wasm转码程序，从而通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换，得到目标浏览器可以直接渲染播放的视频协议格式的目标视频流。
本实施例中，wasm(WebAssembly)是用于浏览器内客户端脚本的低级、可移植的字节码格式，是一种运行在现代网络浏览器中的新型代码、并且提供新的性能特性和效果，对于浏览器下载和加载是有效的。因采用了二进制编码，具有执行性能优越，占用存储空间小，可以使用C/C++/RUST/Go等多种语言编写智能合约并编译成wasm格式的字节码，此处可以先将目标浏览器后端用于视频转码的C/C++代码编译为wasm转码程序，便于后续目标浏览器进行加载。目前，支持wasm的浏览器种类较多，多数较新的浏览器都支持wasm。wasm运行于浏览器框架，原生跨平台，兼容多平台系统，因此无需另做兼容，从而能有效地提高了系统的兼容性。
在一可选实施例中，所述目标浏览器通过JS胶水代码加载所述wasm转码程序。
本实施例中，胶水代码(glue code)也叫粘合代码，用途是粘合那些不兼容的代码。以wasm为编译目标时，C/C++代码被编译为.wasm文件时，会生成对应的.js胶水代码文件。通过此JS胶水代码，就可以让浏览器加载所述wasm转码程序，具有使用方便、灵活的优点。
S103：将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放。
本发明实施例提供的基于wasm的web端无插件监控实时预览方法，首先拉取实时监控视频流，然后目标游览器通过加载的用于视频转码的wasm转码程序，对实时监控视频流进行转换，获得目标浏览器可以直接渲染播放的视频协议格式的目标视频流，最后目标浏览器的前端界面上的视频窗口，就可以播放目标视频流。本发明具有兼容性强，部署方便，消耗资源低等优点，能有效地提高了用户使用体验。
图2为本发明实施例提供的基于wasm的web端无插件监控实时预览方法实施例二流程示意图。参见图2，该方法包括如下步骤S201-S211：
S201：将全部监控摄像头的标识以矩阵形式排列在所述目标浏览器的前端界面上显示。
S202：接收用户对所述前端界面上显示的至少一个监控摄像头的标识的选定，将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头。
S203：判断被选定的监控摄像头的数量是否大于1；是则执行S204，否则执行S209。
本实施例中，当用户只选择了一个监控摄像头，则只需处理一个实时监控视频流，当用户选择了多个监控摄像头，后续需要将多个实时监控视频流进行组合后转码，根据用户选择不同数量的摄像头，区别的进行处理，从而有效地提高了系统处理效率。
S204：将多个目标摄像头根据被选定顺序从1开始顺序编号，得到目标摄像头与临时编号的对应关系。
本实施例中，若存在标识为A1,A2,A3,A4,A5,A6的监控摄像头，依次被选中的摄像头标识为A1,A2,A4,A6，则将选中的目标摄像头A1,A2A,4,A6的按选中顺序临时编号为1(对应A1),2(对应A2),3(对应A4),4(对应A6)，便于后续按照临时编号对实时监控视频流进行处理。
S205：按照目标摄像头对应的临时编号从小到大的顺序，依次拉取所述多个目标摄像头的实时监控视频流。
本实施例中，临时编号从小到大的顺序客观的反映了用户选择监控摄像头的顺序，这个顺序也反映了用户关注的程度，一般情况下，先选择的一般都是用户更关注的，然后按照临时编号从小到大的顺序依次拉取所述多个目标摄像头的实时监控视频流，保证了用户先选中的监控摄像头的实时监控视频流得到先处理，从而最大化降低关注监控视频流显示的网络时延。
S206：将拉取到的多个目标摄像头的实时监控视频流按照拉取顺序按序组合，得到第一组合视频流。
其中，所述第一组合视频流中的每段视频流具有相应的目标摄像头对应的临时编号信息。
S207：通过所述wasm转码程序将所述第一组合视频流转换为目标浏览器可以直接渲染播放的视频协议格式的第二组合视频流。
本实施例中，将用户选中的多个监控摄像头的实时监控视频流进行合并，并进行统一的转换，将有效地提高系统计算性能。
S208：将所述第二组合视频流根据临时编号信息拆分为多个目标摄像头各自对应的目标视频流，并执行S211。
S209：对目标摄像头的实时监控视频流进行拉取。
S210：通过目标浏览器加载用于视频转码的wasm转码程序，从而通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换，得到目标浏览器可以直接渲染播放的视频协议格式的目标视频流。
S211：将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放。
作为一可选实施例，本步骤S211，还包括：将所述多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上排列成互不重叠的矩阵形式的多个视频窗口中播放。本实施例中，将多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上排列成互不重叠的矩阵形式的多个视频窗口中播放，从而保证了用户可以同时观看选中的监控摄像头拍摄的视频，有效地提高了用户的体验。
本发明实施例提供的基于wasm的web端无插件监控实时预览方法，首先拉取用户选中的多个监控摄像头的实时监控视频流，然后将这些实时监控视频流进行合并，然后目标游览器通过加载的用于视频转码的wasm转码程序，对合并后的实时监控视频流进行转换，获得目标浏览器可以直接渲染播放的视频协议格式的目标视频流，最后目标浏览器的前端界面上的视频窗口，就可以播放目标视频流。本发明具有兼容性强，部署方便，消耗资源低，效率高等优点，能有效地提高用户使用体验。
图3为本发明实施例提供的基于wasm的web端无插件监控实时预览方法实施例三流程示意图。参见图3，该方法包括如下步骤S301-S315：
S301：将全部监控摄像头的标识以矩阵形式排列在所述目标浏览器的前端界面上显示。
S302：接收用户对所述前端界面上显示的至少一个监控摄像头的标识的选定，所述将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头。
S303：判断被选定的监控摄像头的数量是否大于1；是则执行S304，否则执行S313。
S304：记录目标摄像头的总数以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标。
其中，所述二维直角坐标系以所述目标浏览器的前端界面的左上顶点为原点，以所述前端界面的上边界向右为X轴正方向，以所述前端界面的左边界向下为Y轴正方向。
本实施例中，建立二维直角坐标系，所有的位置信息都可以用坐标值来表示，便于后续进行位置的计算和获取。
S305：将多个目标摄像头根据被选定顺序从1开始顺序编号，得到目标摄像头与临时编号的对应关系。
S306：按照目标摄像头对应的临时编号从小到大的顺序，依次拉取所述多个目标摄像头的实时监控视频流。
S307：将拉取到的多个目标摄像头的实时监控视频流按照拉取顺序按序组合，得到第一组合视频流。
其中所述第一组合视频流中的每段视频流具有相应的目标摄像头对应的临时编号信息。
S308：通过所述wasm转码程序将所述第一组合视频流转换为目标浏览器可以直接渲染播放的视频协议格式的第二组合视频流。
S309：将所述第二组合视频流根据临时编号信息拆分为多个目标摄像头各自对应的目标视频流。
S310：根据目标摄像头的总数、每个目标摄像头对应的临时编号以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标，基于第一公式确定每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标。
优选地，所述第一公式为：
Figure BDA0003539765970000101
在第一公式中，(X(i),Y(i))表示临时编号为i的目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标；A表示所述目标浏览器的正方形的前端界面的边长；i＝1,2,…,n；n表示目标摄像头的总数；％表示取余符号；
Figure BDA0003539765970000111
表示做整数除法；
Figure BDA0003539765970000112
表示向下取整。
本实施例中，根据使用者的选择的每个摄像头的编号坐标以及选择摄像头的编号个数得到每个摄像头所对应的视频在浏览器界面上进行显示的显示中心点坐标，进而计算机可以根据使用者选择摄像头的数量自动进行显示定位，确保每一个被选中的摄像头视频都可以显示在浏览器的界面上，并且不重叠。
S311：根据每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标以及目标摄像头的总数，基于第二公式确定每个目标摄像头在所述前端界面上对应的视频窗口的显示区域。
优选地，所述第二公式为：
Figure BDA0003539765970000113
在第二公式中，D{X(i),Y(i)}表示临时编号为i的目标摄像头在所述前端界面上对应的视频窗口的显示区域在所述二维直角坐标系中所覆盖的坐标点集合；
Figure BDA0003539765970000114
表示将k1的值从1取值到
Figure BDA0003539765970000115
时每改变一次k1的值都需要将k2的值从1取值到
Figure BDA0003539765970000116
代入到括号中计算。
本实施例中，根据每个摄像头所对应的视频在浏览器界面上进行显示的显示中心点坐标以及使用者选择摄像头的个数得到每个摄像头所对应的视频的显示区域，从而根据坐标点的集合形成显示摄像头视频的像素点进行显示图像，确保视频显示的正确以及不遮挡其他视频。
S312：将每个目标摄像头对应的目标视频流发送至其在所述前端界面上对应的视频窗口中播放，并退出流程。
S313：对目标摄像头的实时监控视频流进行拉取。
S314：通过目标浏览器加载用于视频转码的wasm转码程序，从而通过所述wasm转码程序对所述目标摄像头的实时监控视频流进行转换，得到目标浏览器可以直接渲染播放的视频协议格式的目标视频流。
S315：将所述目标视频流发送至目标浏览器的前端界面上播放。
作为一可选实施例，步骤S311和S314之后，还包括：显示每个目标摄像头对应的目标视频流播放的延时状态。优选地，所述显示每个目标摄像头对应的目标视频流播放的延时状态，包括：
S401：获取每个目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻信息。
S402：根据每个目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻信息，基于第三公式确定每个目标摄像头对应的时延状态指示值。
优选地，所述第三公式为：
Figure BDA0003539765970000121
所述第三公式中，E(t,i)表示当前时刻临时编号为i的目标摄像头对应的时延状态指示值；t表示当前时刻；t(i)表示临时编号为i的目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻；
Figure BDA0003539765970000122
表示将i的值从1取值到n得到t(i)的最小值；
Figure BDA0003539765970000123
表示向上取整。
本实施例中，根据第三公式，E(t,i)的取值为1,2,3，其值越大代表延迟越大，同时可以用三个颜色标记点与之对应，例如E(t,i)＝1时，则可以让第一个颜色标记点显示为红色，另外两个颜色标记点可以显示为绿色，可以让视频观看者快速的了解视频延时情况。
S403：对于每个目标摄像头，控制该目标摄像头对应的三个颜色标记点中显示第一颜色的颜色标记点数量等于该目标摄像头对应的时延状态指示值，以显示第一颜色的颜色标记点数量表征目标摄像头对应的目标视频流播放的延时状态；
其中，每个目标摄像头在所述前端界面上对应的视频窗口中指定位置处均有三个颜色标记点。
本实施例中，根据每个摄像头所对应的实时视频码流的转换过程控制每个视频显示区域的内部上方三个颜色标记点的颜色，进而知晓每个实时视频因转换导致的延时程度，进而可以根据所述颜色标记点来知晓每个视频的延时状态，保证对摄像头视频的监控可靠性。
本发明实施例提供的基于wasm的web端无插件监控实时预览方法，首先拉取实时监控视频流，然后目标游览器通过加载的用于视频转码的wasm转码程序，对实时监控视频流进行转换，获得目标浏览器可以直接渲染播放的视频协议格式的目标视频流，最后目标浏览器的前端界面上就可以播放目标视频流，在播放目标视频流的同时，也可以显示目标视频流的延时情况。本发明具有兼容性强，部署方便，消耗资源低，监控可靠性高等优点，能有效地提高了用户使用体验。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (8)

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端无插件监控实时预览方法，其特征在于，所述接收用户对所述前端界面上显示的监控摄像头中至少一个监控摄像头的标识的选定，将被选定的监控摄像头的标识对应的监控摄像头作为目标摄像头，还包括：
记录目标摄像头的总数以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标；其中，所述二维直角坐标系以所述目标浏览器的前端界面的左上顶点为原点，以所述前端界面的上边界向右为X轴正方向，以所述前端界面的左边界向下为Y轴正方向；
所述将所述多个目标摄像头各自对应的目标视频流发送至目标浏览器的前端界面上排列成互不重叠的矩阵形式的多个视频窗口中播放，包括：
根据目标摄像头的总数、每个目标摄像头对应的临时编号以及每个目标摄像头的标识中心点在预设的二维直角坐标系中的坐标，基于第一公式确定每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标；
根据每个目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标以及目标摄像头的总数，基于第二公式确定每个目标摄像头在所述前端界面上对应的视频窗口的显示区域；
将每个目标摄像头对应的目标视频流发送至其在所述前端界面上对应的视频窗口中播放；
其中，所述第一公式为：
Figure FDA0003539765960000031
所述第二公式为：
Figure FDA0003539765960000032
所述第一公式和第二公式中，(X(i),Y(i))表示临时编号为i的目标摄像头在所述前端界面上对应的视频窗口的中心点在所述二维直角坐标系中的坐标；A表示所述目标浏览器的正方形的前端界面的边长；i＝1,2,…,n；n表示目标摄像头的总数；％表示取余符号；
Figure FDA0003539765960000033
表示做整数除法；
Figure FDA0003539765960000034
表示向下取整；D{X(i),Y(i)}表示临时编号为i的目标摄像头在所述前端界面上对应的视频窗口的显示区域在所述二维直角坐标系中所覆盖的坐标点集合；
Figure FDA0003539765960000035
Figure FDA0003539765960000036
表示将k1的值从1取值到
Figure FDA0003539765960000037
时每改变一次k1的值都需要将k2的值从1取值到
Figure FDA0003539765960000038
代入到括号中计算。
7.如权利要求4-6任一项所述的基于wasm的web端无插件监控实时预览方法，其特征在于，所述将所述目标视频流发送至目标浏览器的前端界面上的视频窗口中播放，还包括：
显示每个目标摄像头对应的目标视频流播放的延时状态。
8.如权利要求7所述的基于wasm的web端无插件监控实时预览方法，其特征在于，所述显示每个目标摄像头对应的目标视频流播放的延时状态，包括：
获取每个目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻信息；
根据每个目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻信息，基于第三公式确定每个目标摄像头对应的时延状态指示值；
对于每个目标摄像头，控制该目标摄像头对应的三个颜色标记点中显示第一颜色的颜色标记点数量等于该目标摄像头对应的时延状态指示值，以显示第一颜色的颜色标记点数量表征目标摄像头对应的目标视频流播放的延时状态；
其中，每个目标摄像头在所述前端界面上对应的视频窗口中指定位置处均有三个颜色标记点；
所述第三公式为：
Figure FDA0003539765960000041
所述第三公式中，E(t,i)表示当前时刻临时编号为i的目标摄像头对应的时延状态指示值；i＝1,2,…,n；n表示目标摄像头的总数；t表示当前时刻；t(i)表示临时编号为i的目标摄像头对应的目标视频流在所述前端界面上对应的视频窗口中播放的初始时刻；
Figure FDA0003539765960000042
表示将i的值从1取值到n得到t(i)的最小值；
Figure FDA0003539765960000043
表示向上取整。
CN202210228708.7A 2022-03-10 2022-03-10 基于wasm的web端无插件监控实时预览方法 Active CN114745599B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210228708.7A CN114745599B (zh) 2022-03-10 2022-03-10 基于wasm的web端无插件监控实时预览方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210228708.7A CN114745599B (zh) 2022-03-10 2022-03-10 基于wasm的web端无插件监控实时预览方法

Publications (2)

Publication Number Publication Date
CN114745599A true CN114745599A (zh) 2022-07-12
CN114745599B CN114745599B (zh) 2023-04-25

Family

ID=82275759

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210228708.7A Active CN114745599B (zh) 2022-03-10 2022-03-10 基于wasm的web端无插件监控实时预览方法

Country Status (1)

Country Link
CN (1) CN114745599B (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107548124A (zh) * 2017-07-27 2018-01-05 捷开通讯(深圳)有限公司 显示无线接入点的网络状态的方法及装置
WO2019179264A1 (zh) * 2018-03-22 2019-09-26 杭州海康威视数字技术股份有限公司 一种视频播放方法、装置、电子设备及存储介质
CN111724248A (zh) * 2020-06-29 2020-09-29 深圳壹账通智能科技有限公司 机器学习算法的部署方法、微表情识别方法及终端设备
CN111741295A (zh) * 2020-08-14 2020-10-02 北京全路通信信号研究设计院集团有限公司 一种连续监测视频网络端到端QoS指标的监测系统及其方法
CN112261377A (zh) * 2020-10-23 2021-01-22 青岛以萨数据技术有限公司 web版监控视频播放方法、电子设备及存储介质
CN113271479A (zh) * 2021-05-17 2021-08-17 中移智行网络科技有限公司 播放处理方法、装置及相关设备
CN113727184A (zh) * 2020-05-25 2021-11-30 京东城市(北京)数字科技有限公司 视频播放方法、装置、系统、存储介质以及电子设备
US11196963B1 (en) * 2020-12-10 2021-12-07 Amazon Technologies, Inc. Programmable video composition layout

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107548124A (zh) * 2017-07-27 2018-01-05 捷开通讯(深圳)有限公司 显示无线接入点的网络状态的方法及装置
WO2019179264A1 (zh) * 2018-03-22 2019-09-26 杭州海康威视数字技术股份有限公司 一种视频播放方法、装置、电子设备及存储介质
CN113727184A (zh) * 2020-05-25 2021-11-30 京东城市(北京)数字科技有限公司 视频播放方法、装置、系统、存储介质以及电子设备
CN111724248A (zh) * 2020-06-29 2020-09-29 深圳壹账通智能科技有限公司 机器学习算法的部署方法、微表情识别方法及终端设备
CN111741295A (zh) * 2020-08-14 2020-10-02 北京全路通信信号研究设计院集团有限公司 一种连续监测视频网络端到端QoS指标的监测系统及其方法
CN112261377A (zh) * 2020-10-23 2021-01-22 青岛以萨数据技术有限公司 web版监控视频播放方法、电子设备及存储介质
US11196963B1 (en) * 2020-12-10 2021-12-07 Amazon Technologies, Inc. Programmable video composition layout
CN113271479A (zh) * 2021-05-17 2021-08-17 中移智行网络科技有限公司 播放处理方法、装置及相关设备

Also Published As

Publication number Publication date
CN114745599B (zh) 2023-04-25

Similar Documents

Publication Publication Date Title
US11412292B2 (en) Video processing method, video processing device, and storage medium
CN111408136A (zh) 一种游戏交互控制方法、装置及存储介质
CN108337547B (zh) 一种文字动画实现方法、装置、终端和存储介质
CN108304762B (zh) 一种人体姿态匹配方法及其设备、存储介质、终端
CN112070906A (zh) 一种增强现实系统及增强现实数据的生成方法、装置
CN107765976B (zh) 一种消息推送方法、终端及系统
CN110599396A (zh) 信息处理方法及装置
CN112070907A (zh) 一种增强现实系统及增强现实数据的生成方法、装置
CN112104908A (zh) 音视频文件播放方法、装置、计算机设备及可读存储介质
CN113630557A (zh) 图像处理方法、装置、设备、存储介质及计算机程序产品
CN109815407B (zh) 一种信息资源推送方法、装置、设备及存储介质
CN113617026B (zh) 云游戏的处理方法、装置、计算机设备和存储介质
CN117521179B (zh) 氛围灯设备及发光分区布局构造方法、装置和计算机设备
CN112044061B (zh) 游戏画面处理方法、装置、电子设备以及存储介质
CN112446948B (zh) 虚拟现实课件的处理方法、装置、电子设备及存储介质
CN114745599B (zh) 基于wasm的web端无插件监控实时预览方法
CN112199534A (zh) 贴纸推荐方法、装置、电子设备及存储介质
CN108305310B (zh) 一种文字动画实现方法、装置、终端和存储介质
CN109905753B (zh) 角标的显示方法和装置、存储介质、电子装置
CN115379136A (zh) 特效道具处理方法、装置、电子设备及存储介质
WO2014024255A1 (ja) 端末および動画再生プログラム
CN111158826B (zh) 一种界面皮肤生成方法、装置、设备及存储介质
CN114579128A (zh) 一种可视化页面搭建方法及装置、存储介质、计算机设备
CN114257827A (zh) 游戏直播间显示方法、装置、设备及存储介质
CN114640876A (zh) 多媒体业务视频显示方法、装置、计算机设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant