一种在浏览器网页中播放视频的方法及系统技术方案

技术编号:27491294 阅读:25 留言:0更新日期:2021-03-02 18:10
一种在浏览器网页中播放视频的方法,包括:客户端在启动后创建本地HTTP服务和Websocket服务;浏览器单元加载播放器网页,与客户端单元建立Websocket连接;浏览器单元向客户端单元发送视频播放请求;客户端单元将视频播放请求消息转换成满足GB/T 28181标准规定的媒体请求SIP消息,并发送给流媒体服务器单元;流媒体服务器单元判断媒体请求类型,根据媒体请求类型,进行预设处理;客户端单元对RTP包进行组帧处理,并将每一帧数据解码为YUV或RGB格式;客户端单元将解码后的帧数据通过Websocket发送给浏览器单元;浏览器单元接收帧数据,根据每一帧数据解码的YUV或RGB格式,将帧数据使用HTML5 WebGL或Canvas进行渲染显示。本发明专利技术对浏览器类型和版本没有任何限制,具有节省人力物力和开发时间优势。具有节省人力物力和开发时间优势。具有节省人力物力和开发时间优势。

【技术实现步骤摘要】
一种在浏览器网页中播放视频的方法及系统


[0001]本专利技术涉及的是计算机软件工程
,特别涉及一种在浏览器网页中播放视频的方法及系统。

技术介绍

[0002]随着平安城市视频监控系统的建设和发展,目前国内大多数视频监控厂商的平台和设备都已支持GB/T 28181-2016《公共安全视频监控联网系统信息传输、交换、控制技术要求》标准规范,GB/T 28181-2016标准规定了公共安全视频监控联网系统的互联结构,传输、交换、控制的基本要求和安全性要求,以及控制、传输流程和协议接口等技术要求。采用统一的GB/T 28181协议进行音视频媒体数据的传输控制,有效解决了各厂家应用平台媒体数据对接以及平台互联、互通问题。传统的视频监控系统一般采用客户端/服务器架构,使用桌面软件客户端或者手机APP客户端实现获取设备实时视频、历史视频回放、设备控制等相关操作,随着现代Web技术的不断发展成熟,越来越多的应用系统开始从客户端转向Web浏览器方式,目前在浏览器网页中实现视频播放,主要包括插件式播放和无插件播放两种方式。
[0003]插件式播放,是指在浏览器中安装浏览器插件以支持视频播放功能,主要有以下几种技术方案:
[0004]在网页中安装和使用Adobe Flash或Microsoft Silverlight插件实现视频播放功能,这种方案在早期应用比较广泛,需要用户手动安装网站提供的网页播放插件,在插件安全性、文件格式等方面存在的一定的限制,近年来随着HTML5技术的发展成熟,这种技术方案已经逐渐被HTML5技术所替代。
[0005]采用ActiveX或NPAPI/PPAPI技术,将视频编解码和渲染显示等功能以网页控件形式封装后嵌入在网页中使用,这种技术的缺点是受限于浏览器类型和版本,安全性、兼容性和稳定性较差,目前新版本的主流浏览器(如谷歌的Chrome浏览器)已逐渐淘汰和不支持这种插件使用方式。
[0006]无插件播放,是指无需安装第三方浏览器插件即可实现视频播放功能,目前主要有以下几种技术方案:
[0007](1)使用HTML5的<video>标签播放视频,HTML5目前仅支持OggTheora、WebM和MP4等有限几种视频格式,使用<video>标签无法直接播放基于GB/T 28181协议获取到的音视频媒体内容。
[0008](2)采用RTMP、HLS、HTTP-FLV等媒体传输协议实现视频播放,需要将基于GB/T 28181协议获取的视频流,即PS格式封装的RTP数据包,转换成RTMP、HLS、HTTP-FLV等浏览器支持的媒体格式。这种方案的不足之处是需要对媒体格式进行转码,存在实时性较差、延迟高、生成文件碎片等缺点,适合对延时性要求不太高的视频直播领域。
[0009]采用WebRTC技术,WebRTC(Web Real Time Communication)能够实现基于网页的语音对话或视频通话,以无插件的方式实现Web端的实时通信功能。缺点是技术较为复杂,
需要做大量的开发工作。

技术实现思路

[0010]鉴于上述问题,提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的一种在浏览器网页中播放视频的方法及系统。
[0011]为了解决上述技术问题,本申请实施例公开了如下技术方案:
[0012]一种在浏览器网页中播放视频的方法,包括:
[0013]S101.客户端单元启动,在启动后创建本地HTTP服务和Websocket服务,客户端单元在启动后向流媒体服务器单元发送SIP注册消息,流媒体服务器单元对收到的注册消息进行校验,将校验结果返回给客户端单元,并管理该客户端单元的会话状态;
[0014]S102.浏览器单元加载播放器网页,与客户端单元建立Websocket连接,浏览器单元与客户端单元之间使用HTTP或Websocket进行消息通信;
[0015]S103.浏览器单元向客户端单元发送视频播放请求消息;
[0016]S104.客户端单元接收到浏览器单元的视频播放请求消息后,将视频播放请求消息转换成满足GB/T 28181标准规定的媒体请求SIP消息,并发送给流媒体服务器单元;
[0017]S105.流媒体服务器单元接收到客户端单元的媒体请求SIP消息后,判断媒体请求类型,根据媒体请求类型,进行预设处理,以PS格式封装的RTP数据包格式进行封装传输给客户端单元;
[0018]S106.客户端单元接收流媒体服务器单元发送的RTP包数据,对RTP包进行组帧处理,并将每一帧数据解码为YUV或RGB格式;
[0019]S107.客户端单元将解码后的帧数据通过Websocket发送给浏览器单元;
[0020]S108.浏览器单元接收帧数据,根据每一帧数据解码的YUV或RGB格式,将帧数据使用HTML5 WebGL或Canvas进行渲染显示。
[0021]进一步地,一种在浏览器网页中播放视频的方法,还包括:S109.停止视频播放时,浏览器单元向客户端单元发送停止视频播放消息。
[0022]进一步地,一种在浏览器网页中播放视频的方法,还包括:S110.客户端单元接收到停止视频播放消息后,将停止视频播放消息转换为满足GB/T 28181标准规定的SIP消息,并发送给流媒体服务器单元。
[0023]进一步地,一种在浏览器网页中播放视频的方法,S111.流媒体服务器单元接收到停止媒体播放SIP消息后,停止向客户端单元分发视频流。
[0024]进一步地,S101中,客户端单元向流媒体服务器单元的注册流程,符合GB/T 28181标准规定的设备或系统注册的会话控制过程。
[0025]进一步地,S102中,使用Websocket进行媒体流数据传输,消息通信和媒体传输采用不同的Websocket通信连接。
[0026]进一步地,S105中,媒体请求类型包括实时视频播放请求和历史视频播放请求,当为实时视频播放请求时,向对应的前端设备单元发送实时视频请求,将前端设备单元的实时视频数据通过媒体分发模块发送给客户端单元;当为历史视频播放请求时,由中心管理模块向历史视频回放模块发送视频回放请求,历史视频回放模块查询和读取对应录像文件并将媒体数据发送给客户端单元。
[0027]进一步地,当每一帧数据解码为YUV格式时,使用WebGL渲染方法,包括如下步骤:
[0028]S201,浏览器单元加载播放页面,执行WebGL初始化:创建WebGL上下文,创建和编译顶点着色器vertexShader,创建和编译片元着色器fragmentShader,创建一个WebGLProgram对象附加顶点着色器vertexShader和片元着色器fragmentShader,链接和使用WebGLProgram对象,初始化顶点缓冲区,激活纹理单元,创建和绑定纹理对象;
[0029]S202,浏览器单元通过Webso本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种在浏览器网页中播放视频的方法,其特征在于,包括:S101.客户端单元启动,在启动后创建本地HTTP服务和Websocket服务,客户端单元在启动后向流媒体服务器单元发送SIP注册消息,流媒体服务器单元对收到的注册消息进行校验,将校验结果返回给客户端单元,并管理该客户端单元的会话状态;S102.浏览器单元加载播放器网页,与客户端单元建立Websocket连接,浏览器单元与客户端单元之间使用HTTP或Websocket进行消息通信;S103.浏览器单元向客户端单元发送视频播放请求消息;S104.客户端单元接收到浏览器单元的视频播放请求消息后,将视频播放请求消息转换成满足GB/T 28181标准规定的媒体请求SIP消息,并发送给流媒体服务器单元;S105.流媒体服务器单元接收到客户端单元的媒体请求SIP消息后,判断媒体请求类型,根据媒体请求类型,进行预设处理,以PS格式封装的RTP数据包格式进行封装传输给客户端单元;S106.客户端单元接收流媒体服务器单元发送的RTP包数据,对RTP包进行组帧处理,并将每一帧数据解码为YUV或RGB格式;S107.客户端单元将解码后的帧数据通过Websocket发送给浏览器单元;S108.浏览器单元接收帧数据,根据每一帧数据解码的YUV或RGB格式,将帧数据使用HTML5 WebGL或Canvas进行渲染显示。2.如权利要求1的一种在浏览器网页中播放视频的方法,其特征在于,还包括:S109.停止视频播放时,浏览器单元向客户端单元发送停止视频播放消息。3.如权利要求2的一种在浏览器网页中播放视频的方法,其特征在于,还包括:S110.客户端单元接收到停止视频播放消息后,将停止视频播放消息转换为满足GB/T 28181标准规定的SIP消息,并发送给流媒体服务器单元。4.如权利要求3的一种在浏览器网页中播放视频的方法,其特征在于,S111.流媒体服务器单元接收到停止媒体播放SIP消息后,停止向客户端单元分发视频流。5.如权利要求1的一种在浏览器网页中播放视频的方法,其特征在于,S101中,客户端单元向流媒体服务器单元的注册流程,符合GB/T 28181标准规定的设备或系统注册的会话控制过程。6.如权利要求1的一种在浏览器网页中播放视频的方法,其特征在于,S102中,使用Websocket进行媒体流数据传输,消息通信和媒体传输采用不同的Websocket通信连接。7.如权利要求1的一种在浏览器网页中播放视频的方法,其特征在于,S105中,媒体请求类型包括实时视频播放请求和历史视频播放请求,当为实时视频播放请求时,向对应的前端设备单元发送实时视频请求,将前端设备单元的实时视频数据通过媒体分发模块发送给客户端单元;当为历史视频播放请求时,由中心管理模块向历史视频回放模块发送视频回放请求,历史...

【专利技术属性】
技术研发人员:陈璐
申请(专利权)人:武汉烽火众智数字技术有限责任公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1