CN114900719A - 一种基于html5播放监控设备实时视频的方法及系统 - Google Patents
一种基于html5播放监控设备实时视频的方法及系统 Download PDFInfo
- Publication number
- CN114900719A CN114900719A CN202210464568.3A CN202210464568A CN114900719A CN 114900719 A CN114900719 A CN 114900719A CN 202210464568 A CN202210464568 A CN 202210464568A CN 114900719 A CN114900719 A CN 114900719A
- Authority
- CN
- China
- Prior art keywords
- client
- video
- interface
- real
- preview
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 34
- 238000012544 monitoring process Methods 0.000 title claims abstract description 24
- 238000012806 monitoring device Methods 0.000 claims description 19
- 230000011664 signaling Effects 0.000 claims description 11
- 238000004806 packaging method and process Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 11
- 238000005516 engineering process Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 6
- 230000008569 process Effects 0.000 description 6
- 230000005540 biological transmission Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 2
- 230000008602 contraction Effects 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 238000007796 conventional method Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
- H04N21/23—Processing of content or additional data; Elementary server operations; Server middleware
- H04N21/238—Interfacing the downstream path of the transmission network, e.g. adapting the transmission rate of a video stream to network bandwidth; Processing of multiplex streams
- H04N21/2387—Stream processing in response to a playback request from an end-user, e.g. for trick-play
-
- 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]
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L69/00—Network arrangements, protocols or services independent of the application payload and not provided for in the other groups of this subclass
- H04L69/16—Implementation or adaptation of Internet protocol [IP], of transmission control protocol [TCP] or of user datagram protocol [UDP]
- H04L69/161—Implementation details of TCP/IP or UDP/IP stack architecture; Specification of modified or new header fields
- H04L69/162—Implementation details of TCP/IP or UDP/IP stack architecture; Specification of modified or new header fields involving adaptations of sockets based mechanisms
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N19/00—Methods or arrangements for coding, decoding, compressing or decompressing digital video signals
- H04N19/40—Methods or arrangements for coding, decoding, compressing or decompressing digital video signals using video transcoding, i.e. partial or full decoding of a coded input stream followed by re-encoding of the decoded output stream
-
- 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/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
- H04N21/23—Processing of content or additional data; Elementary server operations; Server middleware
- H04N21/234—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs
- H04N21/2343—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs involving reformatting operations of video signals for distribution or compliance with end-user requests or end-user device requirements
- H04N21/234309—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs involving reformatting operations of video signals for distribution or compliance with end-user requests or end-user device requirements by transcoding between formats or standards, e.g. from MPEG-2 to MPEG-4 or from Quicktime to Realvideo
-
- 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/60—Network structure or processes for video distribution between server and client or between remote clients; Control signalling between clients, server and network components; Transmission of management data between server and client, e.g. sending from server to client commands for recording incoming content stream; Communication details between server and client
- H04N21/63—Control signaling related to video distribution between client, server and network components; Network processes for video distribution between server and clients or between remote clients, e.g. transmitting basic layer and enhancement layers over different transmission paths, setting up a peer-to-peer communication via Internet between remote STB's; Communication protocols; Addressing
- H04N21/643—Communication protocols
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N7/00—Television systems
- H04N7/18—Closed-circuit television [CCTV] systems, i.e. systems in which the video signal is not broadcast
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Signal Processing (AREA)
- Multimedia (AREA)
- Computer Networks & Wireless Communication (AREA)
- Computer Security & Cryptography (AREA)
- Information Transfer Between Computers (AREA)
- Telephonic Communication Services (AREA)
Abstract
本发明公开了一种基于HTML5播放监控设备实时视频的方法及系统，包括以下步骤：判断是否接收到来自客户端访问设备端的请求，若是，则依次调用相应设备端的连接接口和预览接口；当成功调用预览接口，客户端利用Websocket连接流媒体服务器，流媒体服务器注册设备SDK回调函数，以回调的方式来接收设备端的实时预览视频流，流媒体服务器将从设备端获取到的视频流进行解装后，再进行编码并封装成客户端能播放的格式，通过Websocket服务传送到客户端，实现实时预览视频在客户端上的播放。使用本发明的方法，不依赖任何第三方插件，保证了浏览器的兼容性；不需针对不同厂家的视频监控设备安装多个不同的插件，节省了开发成本。
Description
技术领域
本发明涉及视频播放技术领域，具体涉及一种基于HTML5播放监控设备实时视频的方法及系统。
背景技术
近年来，随着4G、5G技术的发展和互联网的高速发展，各种基于流媒体技术的应用层出不穷，人们对流媒体的需求也越来越多。特别是疫情期间，各种流媒体需求呈爆炸式增长，网络课堂、视频直播、远程医疗、无人机、视频通话、视频会议等众多领域都用到了流媒体技术。视频监控是流媒体技术的重要应用之一。
在视频监控领域逐渐由模拟监控到数字监控，再到方兴未艾的网络视频监控的背景之下，视频监控的发展经历着革命性的变化，人们对网络视频监控的兴趣也是与日俱增。
在目前的视频监控行业，视频监控设备在web端实时预览视频，一般基于ActiveX的网络视频监控系统客户端，针对在一些非IE内核的浏览器不支持加载ActiveX控件的情况，通过NPAPI浏览器插件的方式实现。随着互联网技术的发展，IE内核的浏览器逐渐边缘化；新的浏览器版本也不支持NPAPI插件的方式，并随着国产化操作系统、浏览器等的发展，都不支持IE内核的浏览器或NPAPI插件的方式。因此针对不同厂家的视频监控设备，客户端电脑需要安装不同的播放插件，另外针对不同的浏览器或者浏览器升级时会遇到不兼容的问题。
发明内容
为了克服现有技术的不足，本发明的第一目的在于提供一种基于HTML5播放监控设备实时视频的方法，解决针对不同浏览器和厂家的视频监控设备，客户端需要安装或开发不同的插件的技术问题。本发明的第二目的在于提供一种基于HTML5播放监控设备实时视频的系统，以实现第一目的所提供方法。
为解决上述问题，本发明所采用的技术方案如下：
一种基于HTML5播放监控设备实时视频的方法，包括以下步骤：
判断是否接收到来自客户端访问设备端的请求，若是，则依次调用相应设备端的连接接口和预览接口；
当成功调用预览接口，客户端利用Websocket连接流媒体体服务后，流媒体服务通过注册设备SDK回调函数，以回调的方式来接收设备端的实时预览视频流，流媒体服务器将从设备端获取到的视频流进行解装后，再进行编码并封装成客户端能播放的格式，通过Websocket服务传送到客户端，实现实时预览视频在客户端上的播放。
进一步地，在访问设备端时，客户端HTML5页面的JavaScript脚本通过POST方式，将需要查看的设备端的信息以JSON格式作为主体，调用设备端连接接口HTTP服务；在接收到调用设备端连接接口HTTP服务的请求后，根据设备端类型创建对应厂家SDK调用的对象实例，并根据HTTP请求主体中传递的设备端IP地址、端口、用户名和密码调用连接设备端的接口，并返回连接设备端是否成功的结果到客户端；若返回连接设备端成功，客户端HTML5页面的JavaScript脚本通过POST方式，将启用预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务。
更进一步地，在接收到调用实时视频预览接口HTTP服务的请求后，通过SDK的接口对象实例调用启用设备端预览接口，并返回启用设备端预览是否成功的结果和Websocket地址到客户端；若返回启用设备端预览成功，客户端HTML5页面创建MediaSource将绑定上一步返回的流媒体服务器Websocket地址，并将该Websocket地址设置为＜video＞标签的src；流媒体服务器通过SDK的接口对象实例获取设备端回调返回的视频，并对视频进行转码，由PS流转成fmp4流，并通过Websocket推送到客户端；在客户端通过Websocket接收到视频数据后，客户端HTML5页面的MediaSource创建SourceBuffer，同时调用SourceBuffer的appendBuffer接口将ArrayBuffer数据推送到＜video＞标签；客户端HTML5页面的＜video＞标签调用play方法，开始播放视频。
更进一步地，在预览视频播放时，如需要控制设备端移动，客户端HTML5页面的JavaScript脚本通过POST方式，将移动的方向、开始/停止移动等信息以JSON格式作为主体，调用云台控制接口HTTP服务；在接收到调用云台控制接口HTTP服务的请求后，通过SDK的接口对象实例调用设备端的云台控制接口来控制设备端。
更进一步地，在需要停止实时视频预览时，客户端HTML5页面的JavaScript脚本通过POST方式，将关闭预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务；在接收到调用实时视频预览接口HTTP服务的请求后，流媒体服务器通过SDK的接口对象实例调用关闭设备端预览接口，并返回关闭设备端预览是否成功的结果到客户端浏览器；客户端HTML5页面中的＜video＞标签关闭视频播放的Websocket连接。
更进一步地，在预览视频播放时，设备端或客户端进行切换或关闭，HTML5页面的JavaScript监测到相应事件后，浏览器HTML5页面的JavaScript脚本通过POST方式，将需要断开的设备端的信息以JSON格式作为主体，调用断开设备端连接的HTTP服务。
一种基于HTML5播放监控设备实时视频的系统，包括：
客户端，用于发送访问请求并利用Websocket服务连接流媒体服务器后，通过Websocket方式来接收流媒体服务器重新封装的视频流，进行实时预览视频播放；
Web服务和信令网关服务器，用于接收到来自客户端的访问设备端的请求后，依次调用相应设备端的连接接口和预览接口；
流媒体服务器，用于通过注册设备SDK回调函数，从设备端获取到视频流，并将其进行解装后，再进行编码并封装成客户端能播放的格式，通过Websocket服务传送到客户端。
进一步地，在访问设备端时，客户端HTML5页面的JavaScript脚本通过POST方式，将需要查看的设备端的信息以JSON格式作为主体，调用设备端连接接口HTTP服务；在接收到调用设备端连接接口HTTP服务的请求后，Web服务和信令网关服务器根据设备端类型创建对应厂家SDK调用的对象实例，并根据HTTP请求主体中传递的设备端IP地址、端口、用户名和密码调用连接设备端的接口，并返回连接设备端是否成功的结果到客户端。
更进一步地，若返回连接设备端成功，客户端HTML5页面的JavaScript脚本通过POST方式，将启用预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务，在接受到调用实时视频预览接口HTTP服务的请求后，流媒体服务器通过SDK的接口对象实例调用启用设备端预览接口，并返回启用设备端预览是否成功的结果和Websocket地址到客户端。
更进一步地，若返回启用设备端预览成功，客户端HTML5页面创建MediaSource将绑定上一步返回的流媒体服务器Websocket地址，并将该Websocket地址设置为＜video＞标签的src；流媒体服务器通过SDK的接口对象实例获取设备端回调返回的视频，并对视频进行转码，由PS流转成fmp4流，并通过Websocket推送到客户端；在客户端通过Websocket接收到视频数据后，客户端HTML5页面的MediaSource创建SourceBuffer，同时调用SourceBuffer的appendBuffer接口将ArrayBuffer数据推送到＜video＞标签；客户端HTML5页面的＜video＞标签调用play方法，开始播放视频。
相比现有技术，本发明的有益效果在于：
1、客户端基于HTML5标准支持的＜video＞标签、MSE、WEBSOCKET、JavaScript在网页浏览器实现视频的接收、封装格式转换、播放过程，不依赖任何第三方插件，保证了浏览器的兼容性；也不需针对不同厂家的视频监控设备安装多个不同的插件。
2、兼容性强，支持目前各大主流浏览器；
3、节省了开发成本，在浏览器版本更新时，不存在客户端浏览器兼容的问题，无须针对不同客户端的浏览器开发插件，节省开发成本。
4、节省了运维成本，不存在因浏览器安全、兼容等问题导致无法播放的情况。
下面结合附图和具体实施方式对本发明作进一步详细说明。
附图说明
图1－是本发明一种基于HTML5播放监控设备实时视频的方法的步骤图；
图2－是本发明一种基于HTML5播放监控设备实时视频的方法的交互过程图；
图3－是本发明一种基于HTML5播放监控设备实时视频的系统的架构示意图。
具体实施方式
本发明所提供的一种基于HTML5播放监控设备实时视频的方法，如图1所示，包括以下步骤：
步骤S1，判断是否接收到来自客户端访问设备端的请求，若是，则依次调用相应设备端的连接接口和预览接口；
步骤S2，当成功调用预览接口，客户端利用Websocket服务连接流媒体服务器后，流媒体服务器通过调用注册设备SDK回调函数，以回调的方式来接收设备端的实时预览视频流，流媒体服务器将从设备端获取到的视频流进行解装后，再进行编码并封装成客户端能播放的格式，通过Websocket服务传送到客户端，实现实时预览视频在客户端上的播放。
本发明基于HTML5标准，在W3C的最新的HTML5标准中，定义了一系列新的元素来避免使用插件，其中就包含了＜video＞标签，支持HTML5的浏览器得以实现无插件就原生支持播放媒体内容，但是对媒体内容的格式有所限制，目前视频格式支持度最高的是MPEG－4/H.264，音频则是MP3/AC3。通过MSE(Media Source Extensions)拓展来帮助浏览器识别并处理不支持的视频格式，视频监控设备实时播放网关通过WEBSOCKET将接入的视频监控设备实时码流推送给浏览器，用JavaScript实时转码成HTML5支持的视频流编码格式，提供给HTML5播放器播放。
如图2所示，上述步骤S1和S2的具体实现过程如下：
用户打开客户端，进入设备端视频查看页面；
用户在页面左侧列表中找到需要预览实时视频的设备端，并双击该设备端；
客户端HTML5页面的JavaScript脚本通过POST方式，将需要查看的设备端IP地址、端口、摄像机类型、用户名和密码(加密)等信息以JSON格式作为主体，调用设备端连接接口HTTP服务；
在使用对应的SDK连接设备端时，通过接口层定义统一的SDK调用接口，屏蔽不同厂家的SDK不同的调用方式；所述接口层包括有连接摄像机、断开摄像机连接、启用摄像机预览、停止摄像机预览、抓拍图片、云台控制、获取预置口点、设置预置点、移动到指定预置点、3D缩放、图像调整等，所述各接口在实现时，采用抽象工厂模式，根据不同厂家的SDK接口进行适配和组合；在通过所述接口层调用设备端时，根据已收集的厂家SDK，完成各SDK的初始化，根据客户端请求HTTP服务中的设备端信息，创建对应厂家SDK调用的对象实例，用于实现设备的连接、实时视频预览、云台控制等功能。
在接收到调用设备端连接接口HTTP服务的请求后，根据设备端类型创建对应厂家SDK调用的对象实例，并根据HTTP请求主体中传递的设备端IP地址、端口、用户名和密码调用连接设备端的接口，并返回连接设备端是否成功的结果到客户端；
如连接设备端成功，客户端HTML5页面的JavaScript脚本通过POST方式，将启用预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务；
在接收到调用实时视频预览接口HTTP服务的请求后，通过SDK的接口对象实例调用启用设备端预览接口，并返回启用设备端预览是否成功的结果和Websocket地址到客户端；
如返回启用设备端预览成功，客户端HTML5页面创建MediaSource将绑定上一步返回的流媒体服务器Websocket地址，并将该Websocket地址设置为＜video＞标签的src；
流媒体服务器通过SDK的接口对象实例获取设备端回调返回的视频，并对视频进行转码，由PS流转成fmp4流，并通过Websocket推送到客户端；
客户端的播放器通过Websocket接收到视频数据后；
客户端HTML5页面的MediaSource创建SourceBuffer，同时调用SourceBuffer的appendBuffer接口将ArrayBuffer数据推送到＜video＞标签；
客户端HTML5页面的＜video＞标签调用play方法，开始播放视频；
在预览视频期间，如需要控制设备端移动，客户端HTML5页面的JavaScript脚本通过POST方式，将移动的方向、开始/停止移动等信息以JSON格式作为主体，调用云台控制接口HTTP服务；
在解析调用云台控制接口HTTP服务的命令后，通过SDK的接口对象实例调用设备端的云台控制接口来控制设备；其他的设备端控制命令处理也采用类似的方法实现；
用户需要停止实时视频预览时，浏览器HTML5页面的JavaScript脚本通过POST方式，将关闭预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务；
在接收到调用实时视频预览接口HTTP服务的请求后，流媒体服务器通过SDK的接口对象实例调用关闭设备端预览接口，并返回关闭设备端预览是否成功的结果到客户端；
客户端HTML5页面中的＜video＞标签关闭视频播放的Websocket连接。
进一步地，在客户端播放实时视频时，监测到来自客户端的以下事件后，自动断开相应的websocket连接：
(1)客户端浏览器关闭的情况，客户端通过Websocket连接会发送0x08的Opcode到Websocket服务端，服务端收到该Opcode后，自动关闭该客户端的连接；
(2)Websocket服务端超过10秒未收到客户端的心跳包后，判定客户端已经断开连接，自动关闭该客户端的连接；
(3)Websocket服务端采用异步发送的方式，当该客户端的数据发送缓存队列达到上限时，服务端判定和客户端连接的网络异常，自动关闭该客户端的连接。
具体断开过程如下：
HTML5页面的JavaScript监测到相应事件后，浏览器HTML5页面的JavaScript脚本通过POST方式，将需要断开的摄像机IP地址、端口、摄像机类型、用户名和密码(加密)等信息以JSON格式作为主体，调用视频播放网关服务提供的断开摄像机连接的HTTP服务。
目前很多网页应用为了实现数据的推送，采用的技术都是Ajax轮询。轮询是按照特定的时间间隔(如1s)，由客户端的浏览器向服务器发出HTTP请求，服务器接收到请求后，向客户端的浏览器返回最新的数据。这种传统的方式有着很明显的缺点，即浏览器需要不停地向服务器发出请求，而HTTP请求一般都包含很长的头部信息，真正有效的数据可能只是非常小的一部分，这样不但会浪费很多的带宽资源，而且数据的实时性也会大大降低。
W3C在新的HTML5规范中制定了WebSocket协议和可编程API，该协议为Web应用提供了TCP协议的网络功能，目的是实现下一代客户端/服务器的异步通信。WebSocket使用非安全的WS或安全的WSS协议，可用于任意的客户端和服务器程序。WebSocket的出现克服了传统轮询技术在数据传输稳定性和数据传输量方面的缺点。使用WebSocket协议的服务器和客户端一旦建立起连接后，就可以在任意时刻相互推送信息，客户端不再需要向服务器发送请求，使客户端浏览器具备如同C/S架构下桌面系统的实时通信能力。由于摆脱了传统的Web的请求响应模式，只进行一次请求响应即可完成客户端与服务器端的连接，进而清除了每次请求与响应中包含的头部信息，每次通信传输的都是监控数据，有效减轻了网络的传输负荷，加快了有效数据的传输速度，提高了Web上视频监控播放的实时性。目前主流的浏览器均已支持WebSocket协议。
进一步地，在接收时，还包括接收到来自多个WEB端的需要访问的设备信息后，根据访问的客户端数量及请求的视频流数量，使用Docker容器进行动态扩容或缩容。
Docker容器技术是一种轻量级的虚拟化技术，它不依赖任何操作系统、开发框架和设计语言，具有将Web应用及所需要的应用环境快速打包发布的能力。使用Docker容器构建的Web服务器集群，可以满足Web应用对于服务器性能和快速扩容的需求。通过Docker容器的监控系统能够清楚的了解到当前系统的负载压力，快速通过弹性伸缩模块进行Docker容器系统扩容，迅速提升系统的处理能力，保证系统稳定运行，保障流畅的用户体验。当系统压力峰值过后，系统进行平缓的缩容，回收资源。通过Docker容器的弹性伸缩，既保证了系统的稳定，又充分利用了系统提供的现有资源。与传统通过虚拟机或物理服务器进行系统扩缩的方式相比，Docker系统弹性伸缩能够提供更好的用户体验，更快的系统扩展，更高的资源率。
当使用Docker容器进行动态扩容或缩容时，接入的设备端较多时，根据接入的量来调整部署的服务器数据，以接入设备端100个为例，则需要一台服务器部署Web服务和信令网关服务，一台流媒体服务器，流媒体服务器通过Docker的方式来部署流媒体应用程序。如果接入视频监控设备200个，则需要两台流媒体服务器和一台Web服务和信令网关服务。
在一台部署Web和信令网关服务的服务器配合一台流媒体服务器的情况下，流媒体服务器的每个Docker容器中的服务，通过调用信令服务器的HTTP服务接口，上报该容器的状态，信令服务器进行心跳检测；如果当前接入的量减少，则适当的调小活动容器的数量；如果当前接入的量增加，则适当的调大活动容器的数量，每台服务器的容器数量上限为100个，达到100个接入量时，会自动产生预警提醒用户扩容硬件服务器。
一种基于HTML5播放监控设备实时视频的系统，如图3所示，包括：
客户端，用于发送访问请求并利用Websocket服务连接流媒体服务器后，通过Websocket方式来接收流媒体服务器重新封装的视频流，进行实时预览视频播放；
Web服务和信令网关服务器，用于接收到来自客户端的访问设备端的请求后，依次调用相应设备端的连接接口和预览接口；
流媒体服务器，用于通过注册设备SDK回调函数，从设备端获取到视频流，并将其解装后，再进行编码并封装成客户端能播放的格式，通过Websocket服务传送到客户端。
进一步地，在访问设备端时，客户端HTML5页面的JavaScript脚本通过POST方式，将需要查看的设备端的IP地址、端口、类型、用户名和密码以JSON格式作为主体，调用设备端连接接口HTTP服务；在接收到调用设备端连接接口HTTP服务的请求后，Web服务和信令网关服务器根据设备端类型创建对应厂家SDK调用的对象实例，并根据HTTP请求主体中传递的设备端IP地址、端口、用户名和密码调用连接设备端的接口，并返回连接设备端是否成功的结果到客户端。
更进一步地，若返回连接设备端成功，客户端HTML5页面的JavaScript脚本通过POST方式，将启用预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务，在接受到调用实时视频预览接口HTTP服务的请求后，流媒体服务器通过SDK的接口对象实例调用启用设备端预览接口，并返回启用设备端预览是否成功的结果和Websocket地址到客户端。
更进一步地，若返回启用设备端预览成功，客户端HTML5页面创建MediaSource将绑定上一步返回的流媒体服务器Websocket地址，并将该Websocket地址设置为＜video＞标签的src；流媒体服务器通过SDK的接口对象实例获取设备端回调返回的视频，并对视频进行转码，由PS流转成fmp4流，并通过Websocket推送到客户端；在客户端通过Websocket接收到视频数据后，客户端HTML5页面的MediaSource创建SourceBuffer，同时调用SourceBuffer的appendBuffer接口将ArrayBuffer数据推送到＜video＞标签；客户端HTML5页面的＜video＞标签调用play方法，开始播放视频。
相比现有技术，本发明的有益效果在于：
1、客户端基于HTML5标准支持的＜video＞标签、MSE、WEBSOCKET、JavaScript在网页浏览器实现视频的接收、封装格式转换、播放过程，不依赖任何第三方插件，保证了浏览器的兼容性；也不需针对不同厂家的视频监控设备安装多个不同的插件。
2、兼容性强，支持目前各大主流浏览器；
3、节省了开发成本，在浏览器版本更新时，不存在客户端浏览器兼容的问题，无须针对不同客户端的浏览器开发插件，节省开发成本。
4、节省了运维成本，不存在因浏览器安全、兼容等问题导致无法播放的情况。
上述实施方式仅为本发明的优选实施方式，不能以此来限定本发明保护的范围，本领域的技术人员在本发明的基础上所做的任何非实质性的变化及替换均属于本发明所要求保护的范围。
Claims (10)
1.一种基于HTML5播放监控设备实时视频的方法，其特征在于，包括以下步骤：
判断是否接收到来自客户端访问设备端的请求，若是，则依次调用相应设备端的连接接口和预览接口；
当成功调用预览接口，客户端利用Websocket服务连接流媒体服务器后，流媒体服务器通过注册设备SDK回调函数，以回调的方式来接收设备端的实时预览视频流，流媒体服务器将从设备端获取到的视频流进行解装后，再进行编码并封装成客户端能播放的格式，通过Websocket服务传送到客户端，实现实时预览视频在客户端上的播放。
2.根据权利要求1所述的基于HTML5播放监控设备实时视频的方法，其特征在于，在访问设备端时，客户端HTML5页面的JavaScript脚本通过POST方式，将需要查看的设备端的信息以JSON格式作为主体，调用设备端连接接口HTTP服务；在接收到调用设备端连接接口HTTP服务的请求后，根据设备端类型创建对应厂家SDK调用的对象实例，并根据HTTP请求主体中传递的设备端IP地址、端口、用户名和密码调用连接设备端的接口，并返回连接设备端是否成功的结果到客户端；若返回连接设备端成功，客户端HTML5页面的JavaScript脚本通过POST方式，将启用预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务。
3.根据权利要求2所述的基于HTML5播放监控设备实时视频的方法，其特征在于，在接收到调用实时视频预览接口HTTP服务的请求后，通过SDK的接口对象实例调用启用设备端预览接口，并返回启用设备端预览是否成功的结果和Websocket地址到客户端；若返回启用设备端预览成功，客户端HTML5页面创建MediaSource将绑定上一步返回的流媒体服务器Websocket地址，并将该Websocket地址设置为＜video＞标签的src；流媒体服务器通过SDK的接口对象实例获取设备端回调返回的视频，并对视频进行转码，由PS流转成fmp4流，并通过Websocket推送到客户端；在客户端通过Websocket接收到视频数据后，客户端HTML5页面的MediaSource创建SourceBuffer，同时调用SourceBuffer的appendBuffer接口将ArrayBuffer数据推送到＜video＞标签；客户端HTML5页面的＜video＞标签调用play方法，开始播放视频。
4.根据权利要求3所述的基于HTML5播放监控设备实时视频的方法，其特征在于，在预览视频播放时，如需要控制设备端移动，客户端HTML5页面的JavaScript脚本通过POST方式，将移动的方向、开始/停止移动等信息以JSON格式作为主体，调用云台控制接口HTTP服务；在接收到调用云台控制接口HTTP服务的请求后，通过SDK的接口对象实例调用设备端的云台控制接口来控制设备端。
5.根据权利要求3所述的基于HTML5播放监控设备实时视频的方法，其特征在于，在需要停止实时视频预览时，客户端HTML5页面的JavaScript脚本通过POST方式，将关闭预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务；在接收到调用实时视频预览接口HTTP服务的请求后，流媒体服务器通过SDK的接口对象实例调用关闭设备端预览接口，并返回关闭设备端预览是否成功的结果到客户端浏览器；客户端HTML5页面中的＜video＞标签关闭视频播放的Websocket连接。
6.根据权利要求3所述的基于HTML5播放监控设备实时视频的方法，其特征在于，在预览视频播放时，设备端或客户端进行切换或关闭，HTML5页面的JavaScript监测到相应事件后，浏览器HTML5页面的JavaScript脚本通过POST方式，将需要断开的设备端的信息以JSON格式作为主体，调用断开设备端连接的HTTP服务。
7.一种基于HTML5播放监控设备实时视频的系统，其特征在于，包括：
客户端，用于发送访问请求并利用Websocket服务连接流媒体服务器后，通过Websocket方式来接收流媒体服务器重新封装的视频流，进行实时预览视频播放；
Web服务和信令网关服务器，用于接收到来自客户端的访问设备端的请求后，依次调用相应设备端的连接接口和预览接口；
流媒体服务器，用于通过注册设备SDK回调函数，从设备端获取到视频流，并将其解装后，再进行编码并封装成客户端能播放的格式，通过Websocket服务传送到客户端。
8.根据权利要求7所述的基于HTML5播放监控设备实时视频的系统，其特征在于，在访问设备端时，客户端HTML5页面的JavaScript脚本通过POST方式，将需要查看的设备端的信息以JSON格式作为主体，调用设备端连接接口HTTP服务；在接收到调用设备端连接接口HTTP服务的请求后，Web服务和信令网关服务器根据设备端类型创建对应厂家SDK调用的对象实例，并根据HTTP请求主体中传递的设备端IP地址、端口、用户名和密码调用连接设备端的接口，并返回连接设备端是否成功的结果到客户端。
9.根据权利要求8所述的基于HTML5播放监控设备实时视频的系统，其特征在于，若返回连接设备端成功，客户端HTML5页面的JavaScript脚本通过POST方式，将启用预览的命令以JSON格式作为主体，调用实时视频预览接口HTTP服务，在接受到调用实时视频预览接口HTTP服务的请求后，流媒体服务器通过SDK的接口对象实例调用启用设备端预览接口，并返回启用设备端预览是否成功的结果和Websocket地址到客户端。
10.根据权利要求9所述的基于HTML5播放监控设备实时视频的系统，其特征在于，若返回启用设备端预览成功，客户端HTML5页面创建MediaSource将绑定上一步返回的流媒体服务器Websocket地址，并将该Websocket地址设置为＜video＞标签的src；流媒体服务器通过SDK的接口对象实例获取设备端回调返回的视频，并对视频进行转码，由PS流转成fmp4流，并通过Websocket推送到客户端；在客户端通过Websocket接收到视频数据后，客户端HTML5页面的MediaSource创建SourceBuffer，同时调用SourceBuffer的appendBuffer接口将ArrayBuffer数据推送到＜video＞标签；客户端HTML5页面的＜video＞标签调用play方法，开始播放视频。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210464568.3A CN114900719B (zh) | 2022-04-29 | 2022-04-29 | 一种基于html5播放监控设备实时视频的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210464568.3A CN114900719B (zh) | 2022-04-29 | 2022-04-29 | 一种基于html5播放监控设备实时视频的方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114900719A true CN114900719A (zh) | 2022-08-12 |
| CN114900719B CN114900719B (zh) | 2024-01-30 |
Family
ID=82718680
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210464568.3A Active CN114900719B (zh) | 2022-04-29 | 2022-04-29 | 一种基于html5播放监控设备实时视频的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114900719B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115442641A (zh) * | 2022-08-19 | 2022-12-06 | 浙江源创智控技术有限公司 | 一种基于楼宇监控视频无插件化使用的方法 |
| CN117499736A (zh) * | 2023-12-29 | 2024-02-02 | 杭州阿启视科技有限公司 | 基于windows操作系统的web浏览器插件播放前端摄像机视频的方法 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103533305A (zh) * | 2013-10-10 | 2014-01-22 | 国电南瑞科技股份有限公司 | 一种b/s架构的免插件通用视频监控系统 |
| US20140222894A1 (en) * | 2013-02-04 | 2014-08-07 | Oracle International Corporation | Javascript api for webrtc |
| CN105307019A (zh) * | 2015-10-28 | 2016-02-03 | 四川长虹电器股份有限公司 | 数字电视接收机功能调用的方法 |
| CN105491337A (zh) * | 2015-12-10 | 2016-04-13 | 公安部交通管理科学研究所 | 基于sdk抽象层的网络视频监控设备通用接入方法及装置 |
| CN107395642A (zh) * | 2017-08-31 | 2017-11-24 | 郑州云海信息技术有限公司 | 基于Websocket访问启动TLS认证的Docker容器的方法及系统 |
| CN113485607A (zh) * | 2021-07-07 | 2021-10-08 | 中国搜索信息科技股份有限公司 | 一种可公开的通用视频抓取方法 |
| CN113556579A (zh) * | 2021-06-07 | 2021-10-26 | 武汉众智数字技术有限公司 | 一种基于HTML5的web无插件播放安防实时视频的方法 |
-
2022
- 2022-04-29 CN CN202210464568.3A patent/CN114900719B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140222894A1 (en) * | 2013-02-04 | 2014-08-07 | Oracle International Corporation | Javascript api for webrtc |
| CN103533305A (zh) * | 2013-10-10 | 2014-01-22 | 国电南瑞科技股份有限公司 | 一种b/s架构的免插件通用视频监控系统 |
| CN105307019A (zh) * | 2015-10-28 | 2016-02-03 | 四川长虹电器股份有限公司 | 数字电视接收机功能调用的方法 |
| CN105491337A (zh) * | 2015-12-10 | 2016-04-13 | 公安部交通管理科学研究所 | 基于sdk抽象层的网络视频监控设备通用接入方法及装置 |
| CN107395642A (zh) * | 2017-08-31 | 2017-11-24 | 郑州云海信息技术有限公司 | 基于Websocket访问启动TLS认证的Docker容器的方法及系统 |
| CN113556579A (zh) * | 2021-06-07 | 2021-10-26 | 武汉众智数字技术有限公司 | 一种基于HTML5的web无插件播放安防实时视频的方法 |
| CN113485607A (zh) * | 2021-07-07 | 2021-10-08 | 中国搜索信息科技股份有限公司 | 一种可公开的通用视频抓取方法 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115442641A (zh) * | 2022-08-19 | 2022-12-06 | 浙江源创智控技术有限公司 | 一种基于楼宇监控视频无插件化使用的方法 |
| CN117499736A (zh) * | 2023-12-29 | 2024-02-02 | 杭州阿启视科技有限公司 | 基于windows操作系统的web浏览器插件播放前端摄像机视频的方法 |
| CN117499736B (zh) * | 2023-12-29 | 2024-04-19 | 杭州阿启视科技有限公司 | 基于windows操作系统的web浏览器插件播放前端摄像机视频的方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114900719B (zh) | 2024-01-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108810636B (zh) | 视频播放方法、虚拟现实设备、服务器、系统及存储介质 | |
| CN114900719A (zh) | 一种基于html5播放监控设备实时视频的方法及系统 | |
| US10412130B2 (en) | Method and apparatus for playing media stream on web browser | |
| KR101398319B1 (ko) | 실시간 비디오 검출기 | |
| EP3100245B1 (en) | Selection and display of adaptive rate streams in video security system | |
| US10979785B2 (en) | Media playback apparatus and method for synchronously reproducing video and audio on a web browser | |
| US11089349B2 (en) | Apparatus and method for playing back and seeking media in web browser | |
| US10862940B1 (en) | Low latency live video on a communication session | |
| WO2003071727A2 (en) | An apparatus and method for the delivery of multiple sources of media content | |
| JP2004526227A (ja) | 分散オン・デマンド・メディア変換システムおよび方法 | |
| WO2015134649A1 (en) | Systems and methods for media format substitution | |
| CN111935463B (zh) | 一种通过网页无控件低延迟查看实时监控视频的方法 | |
| US20230045876A1 (en) | Video Playing Method, Apparatus, and System, and Computer Storage Medium | |
| KR101821123B1 (ko) | 웹브라우저 상에서 미디어 스트림을 재생하는 방법 및 장치 | |
| KR101942269B1 (ko) | 웹 브라우저에서 미디어를 재생하고 탐색하는 장치 및 방법 | |
| EP3941070A1 (en) | Resource transmission method and computer device | |
| KR101821124B1 (ko) | 웹브라우저 상에서 미디어 스트림을 재생하는 방법 및 장치 | |
| CN107547517B (zh) | 音视频节目录制方法和网络设备及计算机装置 | |
| CN114745361A (zh) | 一种用于html5浏览器的音视频播放方法及系统 | |
| CN113596112A (zh) | 一种面向视频监控的传输方法 | |
| CN114339146B (zh) | 音视频监控方法、装置、电子设备及计算机可读存储介质 | |
| CN111405325B (zh) | 一种视频内容分发方法和装置及电子设备 | |
| CN113596181A (zh) | 一种数据重定向方法、终端、服务器及存储介质 | |
| CN115022725A (zh) | 一种视频播放方法和装置 | |
| CN115134664A (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 |