CN112422508A - 一种在浏览器网页中播放视频的方法及*** - Google Patents

一种在浏览器网页中播放视频的方法及*** Download PDF

Info

Publication number
CN112422508A
CN112422508A CN202011120425.8A CN202011120425A CN112422508A CN 112422508 A CN112422508 A CN 112422508A CN 202011120425 A CN202011120425 A CN 202011120425A CN 112422508 A CN112422508 A CN 112422508A
Authority
CN
China
Prior art keywords
video
unit
browser
playing
request
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.)
Pending
Application number
CN202011120425.8A
Other languages
English (en)
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.)
Wuhan Fiberhome Digtal Technology Co Ltd
Original Assignee
Wuhan Fiberhome Digtal 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 Wuhan Fiberhome Digtal Technology Co Ltd filed Critical Wuhan Fiberhome Digtal Technology Co Ltd
Priority to CN202011120425.8A priority Critical patent/CN112422508A/zh
Publication of CN112422508A publication Critical patent/CN112422508A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L65/00—Network arrangements, protocols or services for supporting real-time applications in data packet communication
    • H04L65/1066—Session management
    • H04L65/1101—Session protocols
    • H04L65/1104—Session initiation protocol [SIP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L65/00—Network arrangements, protocols or services for supporting real-time applications in data packet communication
    • H04L65/1066—Session management
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L65/00—Network arrangements, protocols or services for supporting real-time applications in data packet communication
    • H04L65/60—Network streaming of media packets
    • H04L65/65—Network streaming protocols, e.g. real-time transport protocol [RTP] or real-time control protocol [RTCP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L65/00—Network arrangements, protocols or services for supporting real-time applications in data packet communication
    • H04L65/60—Network streaming of media packets
    • H04L65/70—Media network packetisation
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L65/00—Network arrangements, protocols or services for supporting real-time applications in data packet communication
    • H04L65/60—Network streaming of media packets
    • H04L65/75—Media network packet handling
    • 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/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • H04N21/440218—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display by transcoding between formats or standards, e.g. from MPEG-2 to MPEG-4
    • 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/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • 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
    • H04N21/6437—Real-time Transport Protocol [RTP]

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Business, Economics & Management (AREA)
  • General Business, Economics & Management (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种在浏览器网页中播放视频的方法及***
技术领域
本发明涉及的是计算机软件工程技术领域,特别涉及一种在浏览器网页中播放视频的方法及***。
背景技术
随着平安城市视频监控***的建设和发展，目前国内大多数视频监控厂商的平台和设备都已支持GB/T 28181-2016《公共安全视频监控联网***信息传输、交换、控制技术要求》标准规范，GB/T 28181-2016标准规定了公共安全视频监控联网***的互联结构，传输、交换、控制的基本要求和安全性要求，以及控制、传输流程和协议接口等技术要求。采用统一的GB/T 28181协议进行音视频媒体数据的传输控制，有效解决了各厂家应用平台媒体数据对接以及平台互联、互通问题。传统的视频监控***一般采用客户端/服务器架构，使用桌面软件客户端或者手机APP客户端实现获取设备实时视频、历史视频回放、设备控制等相关操作，随着现代Web技术的不断发展成熟，越来越多的应用***开始从客户端转向Web浏览器方式，目前在浏览器网页中实现视频播放，主要包括插件式播放和无插件播放两种方式。
插件式播放，是指在浏览器中安装浏览器插件以支持视频播放功能，主要有以下几种技术方案：
在网页中安装和使用Adobe Flash或Microsoft Silverlight插件实现视频播放功能，这种方案在早期应用比较广泛，需要用户手动安装网站提供的网页播放插件，在插件安全性、文件格式等方面存在的一定的限制，近年来随着HTML5技术的发展成熟，这种技术方案已经逐渐被HTML5技术所替代。
采用ActiveX或NPAPI/PPAPI技术，将视频编解码和渲染显示等功能以网页控件形式封装后嵌入在网页中使用，这种技术的缺点是受限于浏览器类型和版本，安全性、兼容性和稳定性较差，目前新版本的主流浏览器(如谷歌的Chrome浏览器)已逐渐淘汰和不支持这种插件使用方式。
无插件播放，是指无需安装第三方浏览器插件即可实现视频播放功能，目前主要有以下几种技术方案：
(1)使用HTML5的<video>标签播放视频，HTML5目前仅支持OggTheora、WebM和MP4等有限几种视频格式，使用<video>标签无法直接播放基于GB/T 28181协议获取到的音视频媒体内容。
(2)采用RTMP、HLS、HTTP-FLV等媒体传输协议实现视频播放，需要将基于GB/T28181协议获取的视频流，即PS格式封装的RTP数据包，转换成RTMP、HLS、HTTP-FLV等浏览器支持的媒体格式。这种方案的不足之处是需要对媒体格式进行转码，存在实时性较差、延迟高、生成文件碎片等缺点，适合对延时性要求不太高的视频直播领域。
采用WebRTC技术，WebRTC(Web Real Time Communication)能够实现基于网页的语音对话或视频通话，以无插件的方式实现Web端的实时通信功能。缺点是技术较为复杂，需要做大量的开发工作。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的一种在浏览器网页中播放视频的方法及***。
为了解决上述技术问题，本申请实施例公开了如下技术方案：
一种在浏览器网页中播放视频的方法，包括：
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进行渲染显示。
进一步地，一种在浏览器网页中播放视频的方法，还包括：S109.停止视频播放时，浏览器单元向客户端单元发送停止视频播放消息。
进一步地，一种在浏览器网页中播放视频的方法，还包括：S110.客户端单元接收到停止视频播放消息后，将停止视频播放消息转换为满足GB/T 28181标准规定的SIP消息，并发送给流媒体服务器单元。
进一步地，一种在浏览器网页中播放视频的方法，S111.流媒体服务器单元接收到停止媒体播放SIP消息后，停止向客户端单元分发视频流。
进一步地，S101中，客户端单元向流媒体服务器单元的注册流程，符合GB/T 28181标准规定的设备或***注册的会话控制过程。
进一步地，S102中，使用Websocket进行媒体流数据传输，消息通信和媒体传输采用不同的Websocket通信连接。
进一步地，S105中，媒体请求类型包括实时视频播放请求和历史视频播放请求，当为实时视频播放请求时，向对应的前端设备单元发送实时视频请求，将前端设备单元的实时视频数据通过媒体分发模块发送给客户端单元；当为历史视频播放请求时，由中心管理模块向历史视频回放模块发送视频回放请求，历史视频回放模块查询和读取对应录像文件并将媒体数据发送给客户端单元。
进一步地，当每一帧数据解码为YUV格式时，使用WebGL渲染方法，包括如下步骤：
S201，浏览器单元加载播放页面，执行WebGL初始化：创建WebGL上下文，创建和编译顶点着色器vertexShader，创建和编译片元着色器fragmentShader，创建一个WebGLProgram对象附加顶点着色器vertexShader和片元着色器fragmentShader，链接和使用WebGLProgram对象，初始化顶点缓冲区，激活纹理单元，创建和绑定纹理对象；
S202，浏览器单元通过Websocket连接接收客户端单元发送的YUV格式的视频帧数据；
S203，浏览器单元将YUV格式的视频帧数据转换为Javascript数组格式；
S204，调用WebGL接口设置视口，清空颜色和深度缓冲区；
S205，分别将帧数据数组中的Y、U、V分量绑定到纹理对象，并填充纹理数据；
S206，调用WebGL的drawArrays方法执行绘制操作。
进一步地，当每一帧数据解码为RGB格式时，使用Canvas渲染方法，包括如下步骤：
S301，浏览器单元通过Websocket接收客户端单元发送的RGB格式的视频帧数据；
S302，获取Canvas对象的2d上下文对象context，调用context对象的createImageData方法创建一个图像数组；
S303，将接收到的RGB帧数据拷贝到图像数组数组中；
S304，调用context的putImageData方法，设置图像数据；
S305，调用context的drawImage绘制图像。
本发明还公开了一种在浏览器网页中播放视频的***，包括：浏览器单元、客户端单元、流媒体服务器单元、前端设备单元，其中：
浏览器单元，通过浏览器网页提供视频播放功能相关的图形用户界面；
客户端单元，提供符合GB/T 28181标准的音视频媒体播放相关的信令交互、媒体接收和传输、组帧解码等功能；
流媒体服务器单元，提供前端设备接入、GB/T 28181协议信令的处理和转发、音视频媒体数据流的转发和分发等功能，具体包括中心管理模块、媒体分发模块、历史视频回放模块、历史视频存储模块等；中心管理模块，主要提供前端设备接入和控制、实时视频浏览、平台录像控制等功能；媒体分发模块主要提供媒体数据分发和缓存功能；历史视频回放模块主要提供历史视频播放、暂停、快放、慢放、快进、快退等控制功能；历史视频存储模块提供历史视频的存储和切片等功能；
前端设备单元，包括安装于监控现场的信息采集和处理设备，支持通过GB/T28181协议接入到流媒体服务器单元。
本发明实施例提供的上述技术方案的有益效果至少包括：
本发明公开的一种在浏览器网页中播放视频的方法和***，在浏览器中无需安装浏览器插件即可播放符合GB/T 28181标准的视频媒体内容，可以使用的浏览器类型和版本没有任何限制，只需要使用大多数主流浏览器都能支持的HTML5 Canvas或WebGL特性，采用本地客户端单元代替浏览器插件，具有良好的稳定性和性能优势，本发明提供的方法也具有跨平台的优势，适用于Windows、Linux、Android、IOS等多种操作***平台，能够较好的满足实际项目应用需求。
采用本发明中使用的播放方法，无需投入新的软硬件开发成本，也不需要改变现有软件***架构，只需要对客户端单元模块做少量的改动，即可实现在常见的浏览器网页中播放符合GB/T 28181协议的视频流功能，可以有效节省人力物力和开发时间。
下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。
附图说明
附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
图1为本发明实施例1中，一种在浏览器网页中播放视频的方法流程图；
图2为本发明实施例1中，WebGL渲染方法显示视频帧的流程图；
图3为本发明实施例1中，Canvas渲染方法显示视频帧的流程图；
图4为本发明实施例2中，一种在浏览器网页中播放视频的***结构图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
为了解决现有技术中存在的无插件播放，技术复杂和延时大等问题，本发明实施例提供一种在浏览器网页中播放视频的方法和***。
实施例1
一种在浏览器网页中播放视频的方法，包括：
S101.客户端单元启动，在启动后创建本地HTTP服务和Websocket服务，客户端单元在启动后向流媒体服务器单元发送SIP注册消息，流媒体服务器单元对收到的注册消息进行校验，将校验结果返回给客户端单元，并管理该客户端单元的会话状态。
在本实施例中，客户端单元向流媒体服务器单元的注册流程，符合GB/T 28181标准规定的设备或***注册的会话控制过程。
具体的，HTTP协议是HyperText TransferProtocol(超文本传输协议)的缩写，WebSocket是HTML5标准提供的一种全双工通讯协议，支持双向数据传输，允许服务端主动向客户端推送数据，SIP是会话初始协议(SessionInitiation Protocol)。
在一些优选实施例中，客户端单元启动可以随***开机自动启动运行，也可以由浏览器单元利用浏览器外部协议通过注册表方式启动。
S102.浏览器单元加载播放器网页，与客户端单元建立Websocket连接,浏览器单元与客户端单元之间使用HTTP或Websocket进行消息通信。在本实施例中，使用Websocket进行媒体流数据传输，消息通信和媒体传输采用不同的Websocket通信连接。
S103.浏览器单元向客户端单元发送视频播放请求消息；具体的，视频播放请求消息，可以采用JSON、XML等自定义的消息格式。
S104.客户端单元接收到浏览器单元的视频播放请求消息后，将视频播放请求消息转换成满足GB/T 28181标准规定的媒体请求SIP消息，并发送给流媒体服务器单元。
S105.流媒体服务器单元接收到客户端单元的媒体请求SIP消息后，判断媒体请求类型，根据媒体请求类型，进行预设处理，以PS格式封装的RTP数据包格式进行封装传输给客户端单元。
具体的，PS是指节目流(Program Stream)，RTP是指实时传输协议(Real-timeTransport Protocol)。媒体请求类型包括实时视频播放请求和历史视频播放请求，当为实时视频播放请求时，向对应的前端设备单元发送实时视频请求，将前端设备单元的实时视频数据通过媒体分发模块发送给客户端单元；当为历史视频播放请求时，由中心管理模块向历史视频回放模块发送视频回放请求，历史视频回放模块查询和读取对应录像文件并将媒体数据发送给客户端单元。
S106.客户端单元接收流媒体服务器单元发送的RTP包数据，对RTP包进行组帧处理，并将每一帧数据解码为YUV或RGB格式；
S107.客户端单元将解码后的帧数据通过Websocket发送给浏览器单元；
S108.浏览器单元接收帧数据，根据每一帧数据解码的YUV或RGB格式，将帧数据使用HTML5 WebGL或Canvas进行渲染显示。具体的，浏览器单元接收帧数据，将帧数据渲染显示到HTML5的WebGL或Canvas组件中，具体的，浏览器网页渲染视频帧的方法，包括基于YUV格式的WebGL渲染方法和基于RGB格式的Canvas渲染方法。
在本实施例中，当每一帧数据解码为YUV格式时，使用WebGL渲染方法，基于YUV格式的WebGL渲染方法，包括如下步骤，
S201，浏览器单元加载播放页面，执行WebGL初始化：创建WebGL上下文，创建和编译顶点着色器vertexShader，创建和编译片元着色器fragmentShader，创建一个WebGLProgram对象附加顶点着色器vertexShader和片元着色器fragmentShader，链接和使用WebGLProgram对象，初始化顶点缓冲区，激活纹理单元，创建和绑定纹理对象；
S202，浏览器单元通过Websocket连接接收客户端单元发送的YUV格式的视频帧数据；
S203，浏览器单元将YUV格式的视频帧数据转换为Javascript数组格式；
S204，调用WebGL接口设置视口，清空颜色和深度缓冲区；
S205，分别将帧数据数组中的Y、U、V分量绑定到纹理对象，并填充纹理数据；
S206，调用WebGL的drawArrays方法执行绘制操作；
在本实施例中，当每一帧数据解码为RGB格式时，使用Canvas渲染方法，包括如下步骤：
S301，浏览器单元通过Websocket接收客户端单元发送的RGB格式的视频帧数据；
S302，获取Canvas对象的2d上下文对象context，调用context对象的createImageData方法创建一个图像数组；
S303，将接收到的RGB帧数据拷贝到图像数组数组中；
S304，调用context的putImageData方法，设置图像数据；
S305，调用context的drawImage绘制图像。
本实施例一种在浏览器网页中播放视频的方法，浏览器单元、客户端单元运行于同一台电脑或手机***中，浏览器单元采用主流的网页浏览器，不需要特别安装，浏览器单元与客户端单元之间建立本地通信连接，基于HTTP或Websocket进行消息通信，使用Websocket进行视频数据传输，消息通信和媒体传输采用不同的Websocket通信连接，多路视频播放时各路视频媒体传输采用不同的Websocket通信连接。
本实施例公开的一种在浏览器网页中播放视频的方法，在浏览器中无需安装浏览器插件即可播放符合GB/T 28181标准的视频媒体内容，可以使用的浏览器类型和版本没有任何限制，只需要使用大多数主流浏览器都能支持的HTML5 Canvas或WebGL特性，采用本地客户端单元代替浏览器插件，具有良好的稳定性和性能优势。具有跨平台和节省人力物力和开发时间等优势。
实施例2
本实施例公开了一种在浏览器网页中播放视频的***，包括：浏览器单元1、客户端单元2、流媒体服务器单元3、前端设备单元4，其中：
浏览器单元1，当需要播放支持GB/T 28181标准的视频媒体时，在网页中通过HTTP或Websocket请求方式向客户端单元2发送视频播放请求消息。
客户端单元2，提供视频播放相关的GB/T 28181协议信令交互、媒体接收和传输、组帧解码等功能，当接收到浏览器单元1发出的视频播放请求消息时，将视频播放请求消息转换成满足GB/T 28181协议的SIP媒体请求信令，发送给流媒体服务器单元3。
流媒体服务器单元3，提供支持GB/T 28181协议的通信信令的处理和转发、音视频媒体数据流的转发和分发等功能。在本实施例中，流媒体服务器单元3包括中心管理模块、媒体分发模块、历史视频回放模块、历史视频存储模块等。中心管理模块，主要提供前端设备接入和控制、实时视频浏览、平台录像控制等功能。媒体分发模块主要提供媒体数据分发和缓存功能。历史视频回放模块主要提供历史视频播放、暂停、快放、慢放、快进、快退等功能。历史视频存储模块提供历史视频的存储和切片等功能。当接收到客户端单元2发送的SIP媒体请求信令时，将请求设备的视频流转发给客户端单元2。
前端设备单元4，是指安装于监控现场的信息采集和处理设备，支持通过GB/T28181协议接入到流媒体服务器单元。
浏览器单元1，当需要停止播放视频时，在网页中通过HTTP或Websocket请求方式向客户端单元2发送停止视频播放请求消息，客户端单元2接收到浏览器单元1发出的停止视频播放请求消息时，将停止视频播放请求消息转换成满足GB/T 28181协议的SIP消息，发送给流媒体服务器单元3，流媒体服务器单元3接收到停止媒体播放信令消息时，停止向客户端单元2发送视频流。
本发明公开的一种在浏览器网页中播放视频的***，在浏览器中无需安装浏览器插件即可播放符合GB/T 28181标准的视频媒体内容，可以使用的浏览器类型和版本没有任何限制，只需要使用大多数主流浏览器都能支持的HTML5 Canvas或WebGL特性，采用本地客户端单元代替浏览器插件，具有良好的稳定性和性能优势，本发明提供的方法也具有跨平台的优势，适用于Windows、Linux、Android、IOS等多种操作***平台，能够较好的满足实际项目应用需求。
采用本发明中使用的播放方法，无需投入新的软硬件开发成本，也不需要改变现有软件***架构，只需要对客户端单元模块做少量的改动，即可实现在常见的浏览器网页中播放符合GB/T 28181协议的视频流功能，可以有效节省人力物力和开发时间。
应该明白，公开的过程中的步骤的特定顺序或层次是示例性方法的实例。基于设计偏好，应该理解，过程中的步骤的特定顺序或层次可以在不脱离本公开的保护范围的情况下得到重新安排。所附的方法权利要求以示例性的顺序给出了各种步骤的要素，并且不是要限于的特定顺序或层次。
在上述的详细描述中，各种特征一起组合在单个的实施方案中，以简化本公开。不应该将这种公开方法解释为反映了这样的意图，即，所要求保护的主题的实施方案需要清楚地在每个权利要求中所陈述的特征更多的特征。相反，如所附的权利要求书所反映的那样，本发明处于比所公开的单个实施方案的全部特征少的状态。因此，所附的权利要求书特此清楚地被并入详细描述中，其中每项权利要求独自作为本发明单独的优选实施方案。
本领域技术人员还应当理解，结合本文的实施例描述的各种说明性的逻辑框、模块、电路和算法步骤均可以实现成电子硬件、计算机软件或其组合。为了清楚地说明硬件和软件之间的可交换性，上面对各种说明性的部件、框、模块、电路和步骤均围绕其功能进行了一般地描述。至于这种功能是实现成硬件还是实现成软件，取决于特定的应用和对整个***所施加的设计约束条件。熟练的技术人员可以针对每个特定应用，以变通的方式实现所描述的功能，但是，这种实现决策不应解释为背离本公开的保护范围。
结合本文的实施例所描述的方法或者算法的步骤可直接体现为硬件、由处理器执行的软件模块或其组合。软件模块可以位于RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、移动磁盘、CD-ROM或者本领域熟知的任何其它形式的存储介质中。一种示例性的存储介质连接至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于ASIC中。该ASIC可以位于用户终端中。当然，处理器和存储介质也可以作为分立组件存在于用户终端中。
对于软件实现，本申请中描述的技术可用执行本申请功能的模块(例如，过程、函数等)来实现。这些软件代码可以存储在存储器单元并由处理器执行。存储器单元可以实现在处理器内，也可以实现在处理器外，在后一种情况下，它经由各种手段以通信方式耦合到处理器，这些都是本领域中所公知的。
上文的描述包括一个或多个实施例的举例。当然，为了描述上述实施例而描述部件或方法的所有可能的结合是不可能的，但是本领域普通技术人员应该认识到，各个实施例可以做进一步的组合和排列。因此，本文中描述的实施例旨在涵盖落入所附权利要求书的保护范围内的所有这样的改变、修改和变型。此外，就说明书或权利要求书中使用的术语“包含”，该词的涵盖方式类似于术语“包括”，就如同“包括，”在权利要求中用作衔接词所解释的那样。此外，使用在权利要求书的说明书中的任何一个术语“或者”是要表示“非排它性的或者”。

Claims (10)

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中，媒体请求类型包括实时视频播放请求和历史视频播放请求，当为实时视频播放请求时，向对应的前端设备单元发送实时视频请求，将前端设备单元的实时视频数据通过媒体分发模块发送给客户端单元；当为历史视频播放请求时，由中心管理模块向历史视频回放模块发送视频回放请求，历史视频回放模块查询和读取对应录像文件并将媒体数据发送给客户端单元。
8.如权利要求1的一种在浏览器网页中播放视频的方法，其特征在于，当每一帧数据解码为YUV格式时，使用WebGL渲染方法，包括如下步骤：
S201，浏览器单元加载播放页面，执行WebGL初始化：创建WebGL上下文，创建和编译顶点着色器vertexShader，创建和编译片元着色器fragmentShader，创建一个WebGLProgram对象附加顶点着色器vertexShader和片元着色器fragmentShader，链接和使用WebGLProgram对象，初始化顶点缓冲区，激活纹理单元，创建和绑定纹理对象；
S202，浏览器单元通过Websocket连接接收客户端单元发送的YUV格式的视频帧数据；
S203，浏览器单元将YUV格式的视频帧数据转换为Javascript数组格式；
S204，调用WebGL接口设置视口，清空颜色和深度缓冲区；
S205，分别将帧数据数组中的Y、U、V分量绑定到纹理对象，并填充纹理数据；
S206，调用WebGL的drawArrays方法执行绘制操作。
9.如权利要求1的一种在浏览器网页中播放视频的方法，其特征在于，当每一帧数据解码为RGB格式时，使用Canvas渲染方法，包括如下步骤：
S301，浏览器单元通过Websocket接收客户端单元发送的RGB格式的视频帧数据；
S302，获取Canvas对象的2d上下文对象context，调用context对象的createImageData方法创建一个图像数组；
S303，将接收到的RGB帧数据拷贝到图像数组数组中；
S304，调用context的putImageData方法，设置图像数据；
S305，调用context的drawImage绘制图像。
10.一种在浏览器网页中播放视频的***，其特征在于，包括：浏览器单元、客户端单元、流媒体服务器单元、前端设备单元，其中：
浏览器单元，通过浏览器网页提供视频播放功能相关的图形用户界面；
客户端单元，提供符合GB/T 28181标准的音视频媒体播放相关的信令交互、媒体接收和传输、组帧解码等功能；
流媒体服务器单元，提供前端设备接入GB/T 28181协议信令的处理和转发、音视频媒体数据流的转发和分发等功能，具体包括中心管理模块、媒体分发模块、历史视频回放模块、历史视频存储模块等；中心管理模块，主要提供前端设备接入和控制、实时视频浏览、平台录像控制等功能；媒体分发模块主要提供媒体数据分发和缓存功能；历史视频回放模块主要提供历史视频播放、暂停、快放、慢放、快进、快退等控制功能；历史视频存储模块提供历史视频的存储和切片等功能；
前端设备单元，包括安装于监控现场的信息采集和处理设备，支持通过GB/T 28181协议接入到流媒体服务器单元。
CN202011120425.8A 2020-10-19 2020-10-19 一种在浏览器网页中播放视频的方法及*** Pending CN112422508A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011120425.8A CN112422508A (zh) 2020-10-19 2020-10-19 一种在浏览器网页中播放视频的方法及***

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011120425.8A CN112422508A (zh) 2020-10-19 2020-10-19 一种在浏览器网页中播放视频的方法及***

Publications (1)

Publication Number Publication Date
CN112422508A true CN112422508A (zh) 2021-02-26

Family

ID=74840152

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011120425.8A Pending CN112422508A (zh) 2020-10-19 2020-10-19 一种在浏览器网页中播放视频的方法及***

Country Status (1)

Country Link
CN (1) CN112422508A (zh)

Cited By (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112801854A (zh) * 2021-04-07 2021-05-14 浙江华创视讯科技有限公司 一种视频数据处理方法、装置、存储介质及电子设备
CN112954392A (zh) * 2021-04-07 2021-06-11 多彩贵州印象网络传媒股份有限公司 一种自动实现视频格式转换处理的平台
CN113055747A (zh) * 2021-03-29 2021-06-29 重庆锐明信息技术有限公司 基于视频客户端跨浏览器集成***
CN113206888A (zh) * 2021-05-10 2021-08-03 创新奇智(上海)科技有限公司 基于rtsp的实时视频流传输方法及装置
CN113259737A (zh) * 2021-05-12 2021-08-13 中移智行网络科技有限公司 监控方法、相关设备及可读存储介质
CN113259752A (zh) * 2021-07-12 2021-08-13 广州闪畅信息科技有限公司 浏览器页面中的互动视频的播放控制方法、装置及服务器
CN113268320A (zh) * 2021-05-08 2021-08-17 武汉联影医疗科技有限公司 应用程序的迁移方法、装置、计算机设备和存储介质
CN113271479A (zh) * 2021-05-17 2021-08-17 中移智行网络科技有限公司 播放处理方法、装置及相关设备
CN113329080A (zh) * 2021-05-27 2021-08-31 创新奇智(广州)科技有限公司 基于WebSocket的视频播放方法、装置、电子设备及存储介质
CN113556579A (zh) * 2021-06-07 2021-10-26 武汉众智数字技术有限公司 一种基于HTML5的web无插件播放安防实时视频的方法
CN113691740A (zh) * 2021-07-13 2021-11-23 稿定（厦门）科技有限公司 一种移动端网页视频背景处理方法、***、储存介质
CN113791752A (zh) * 2021-09-16 2021-12-14 深圳市芯中芯科技有限公司 在安卓***中通过js同步控制网页音乐播放状态的方法
CN114040251A (zh) * 2021-09-17 2022-02-11 北京旷视科技有限公司 音视频播放方法、***、存储介质及计算机程序产品
CN114071242A (zh) * 2021-11-16 2022-02-18 重庆赛迪奇智人工智能科技有限公司 视频播放方法、视频推送方法、装置和电子设备
CN114143490A (zh) * 2021-11-29 2022-03-04 云门(深圳)技术有限公司 一种在网页中预览sdi视频信号的方法
CN114666640A (zh) * 2022-05-23 2022-06-24 创意信息技术股份有限公司 一种边缘网关接入服务器
CN115098872A (zh) * 2022-06-17 2022-09-23 深圳市高新兴科技有限公司 一种浏览器视频上传帧截取***与方法
CN115379257A (zh) * 2021-05-20 2022-11-22 阿里巴巴新加坡控股有限公司 一种渲染方法、装置、***、存储介质及程序产品
CN116193211A (zh) * 2023-02-02 2023-05-30 郑州小鸟信息科技有限公司 一种可扩展的基于chromium内核的多媒体播控***
CN116489307A (zh) * 2023-04-04 2023-07-25 上海缓存命中科技有限公司 网络监控***、网络监控方法、装置及相关设备
WO2024109872A1 (zh) * 2022-11-25 2024-05-30 天翼数字生活科技有限公司 一种视频监控播放方法和***

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105430426A (zh) * 2015-11-27 2016-03-23 安徽四创电子股份有限公司 一种基于视频存储的智能云存储***及其存储方法
CN107277004A (zh) * 2017-06-13 2017-10-20 重庆扬讯软件技术股份有限公司 一种浏览器无插件视频直播方法
EP3273696A1 (en) * 2016-07-21 2018-01-24 Hanwha Techwin Co., Ltd. Selective media playing method and apparatus according to live streaming and recorded streaming
CN108337527A (zh) * 2017-12-18 2018-07-27 武汉烽火众智智慧之星科技有限公司 一种接入网关及一种接入方法
CN110661752A (zh) * 2018-06-29 2020-01-07 广州弘度信息科技有限公司 一种无插件实时视频播放***及方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105430426A (zh) * 2015-11-27 2016-03-23 安徽四创电子股份有限公司 一种基于视频存储的智能云存储***及其存储方法
EP3273696A1 (en) * 2016-07-21 2018-01-24 Hanwha Techwin Co., Ltd. Selective media playing method and apparatus according to live streaming and recorded streaming
CN107277004A (zh) * 2017-06-13 2017-10-20 重庆扬讯软件技术股份有限公司 一种浏览器无插件视频直播方法
CN108337527A (zh) * 2017-12-18 2018-07-27 武汉烽火众智智慧之星科技有限公司 一种接入网关及一种接入方法
CN110661752A (zh) * 2018-06-29 2020-01-07 广州弘度信息科技有限公司 一种无插件实时视频播放***及方法

Cited By (29)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113055747A (zh) * 2021-03-29 2021-06-29 重庆锐明信息技术有限公司 基于视频客户端跨浏览器集成***
CN112954392A (zh) * 2021-04-07 2021-06-11 多彩贵州印象网络传媒股份有限公司 一种自动实现视频格式转换处理的平台
CN112801854A (zh) * 2021-04-07 2021-05-14 浙江华创视讯科技有限公司 一种视频数据处理方法、装置、存储介质及电子设备
CN112954392B (zh) * 2021-04-07 2024-01-26 多彩贵州印象网络传媒股份有限公司 一种自动实现视频格式转换处理的平台
CN113268320A (zh) * 2021-05-08 2021-08-17 武汉联影医疗科技有限公司 应用程序的迁移方法、装置、计算机设备和存储介质
CN113206888A (zh) * 2021-05-10 2021-08-03 创新奇智(上海)科技有限公司 基于rtsp的实时视频流传输方法及装置
CN113206888B (zh) * 2021-05-10 2022-12-13 创新奇智(上海)科技有限公司 基于rtsp的实时视频流传输方法及装置
CN113259737A (zh) * 2021-05-12 2021-08-13 中移智行网络科技有限公司 监控方法、相关设备及可读存储介质
CN113271479A (zh) * 2021-05-17 2021-08-17 中移智行网络科技有限公司 播放处理方法、装置及相关设备
CN115379257A (zh) * 2021-05-20 2022-11-22 阿里巴巴新加坡控股有限公司 一种渲染方法、装置、***、存储介质及程序产品
CN115379257B (zh) * 2021-05-20 2024-05-14 阿里巴巴创新公司 一种渲染方法、装置、***、存储介质及程序产品
CN113329080A (zh) * 2021-05-27 2021-08-31 创新奇智(广州)科技有限公司 基于WebSocket的视频播放方法、装置、电子设备及存储介质
CN113329080B (zh) * 2021-05-27 2022-07-19 创新奇智(广州)科技有限公司 基于WebSocket的视频播放方法、装置、电子设备及存储介质
CN113556579A (zh) * 2021-06-07 2021-10-26 武汉众智数字技术有限公司 一种基于HTML5的web无插件播放安防实时视频的方法
CN113259752A (zh) * 2021-07-12 2021-08-13 广州闪畅信息科技有限公司 浏览器页面中的互动视频的播放控制方法、装置及服务器
CN113691740A (zh) * 2021-07-13 2021-11-23 稿定（厦门）科技有限公司 一种移动端网页视频背景处理方法、***、储存介质
WO2023284295A1 (zh) * 2021-07-13 2023-01-19 稿定（厦门）科技有限公司 一种移动端网页视频背景处理方法、***、储存介质
CN113791752B (zh) * 2021-09-16 2024-06-11 深圳市芯中芯科技有限公司 在安卓***中通过js同步控制网页音乐播放状态的方法
CN113791752A (zh) * 2021-09-16 2021-12-14 深圳市芯中芯科技有限公司 在安卓***中通过js同步控制网页音乐播放状态的方法
CN114040251A (zh) * 2021-09-17 2022-02-11 北京旷视科技有限公司 音视频播放方法、***、存储介质及计算机程序产品
CN114071242A (zh) * 2021-11-16 2022-02-18 重庆赛迪奇智人工智能科技有限公司 视频播放方法、视频推送方法、装置和电子设备
CN114143490A (zh) * 2021-11-29 2022-03-04 云门(深圳)技术有限公司 一种在网页中预览sdi视频信号的方法
CN114666640B (zh) * 2022-05-23 2023-03-07 创意信息技术股份有限公司 一种边缘网关接入服务器
CN114666640A (zh) * 2022-05-23 2022-06-24 创意信息技术股份有限公司 一种边缘网关接入服务器
CN115098872A (zh) * 2022-06-17 2022-09-23 深圳市高新兴科技有限公司 一种浏览器视频上传帧截取***与方法
WO2024109872A1 (zh) * 2022-11-25 2024-05-30 天翼数字生活科技有限公司 一种视频监控播放方法和***
CN116193211A (zh) * 2023-02-02 2023-05-30 郑州小鸟信息科技有限公司 一种可扩展的基于chromium内核的多媒体播控***
CN116489307A (zh) * 2023-04-04 2023-07-25 上海缓存命中科技有限公司 网络监控***、网络监控方法、装置及相关设备
CN116489307B (zh) * 2023-04-04 2023-11-28 上海缓存命中科技有限公司 网络监控***、网络监控方法、装置及相关设备

Similar Documents

Publication Publication Date Title
CN112422508A (zh) 一种在浏览器网页中播放视频的方法及***
CN108337528B (zh) 一种预览视频的方法及设备
CN108076364B (zh) 自适应媒体流传输设备和媒体服务设备
CN113556579B (zh) 一种基于HTML5的web无插件播放安防实时视频的方法
CN110324671B (zh) 网页视频播放方法及装置、电子设备及存储介质
US9491505B2 (en) Frame capture and buffering at source device in wireless display system
CN102158553B (zh) 用于远程桌面的播放多媒体文件的方法和装置
CN106303430B (zh) 浏览器中无插件播放实时监控的方法
WO2017219896A1 (zh) 视频流的传输方法及装置
CN104780378A (zh) 一种用于解码视频的方法、装置和播放器
CN112073809B (zh) 一种支持浏览器播放任意编码格式视频的方法
CN101883097A (zh) 服务器设备共享客户端设备屏幕的实现方法及装置
CN102833585B (zh) 一种泛终端视频传输***和方法
CN113938470B (zh) 一种浏览器播放rtsp数据源的方法、装置以及流媒体服务器
CN113973214A (zh) 视频流格式转换方法、装置和存储介质
CN111202980B (zh) 信息传送方法、流媒体云平台和计算机可读存储介质
CN112312221B (zh) 一种音视频播放方法、存储介质及装置
CN110881046A (zh) 一种云手机对接WebRTC协议的方法、装置、介质及终端设备
CN113438487A (zh) 一种兼容私有视频格式网页播放器方法
CN115914745A (zh) 视频的解码方法、装置、电子设备及计算机可读介质
CN106658070B (zh) 视频重定向的方法和装置
CN115022725A (zh) 一种视频播放方法和装置
WO2016107174A1 (zh) 多媒体文件数据的处理方法及***、播放器和客户端
CN112423100A (zh) 基于html5的web音视频自定义渲染方法
CN111683286A (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20210226

RJ01 Rejection of invention patent application after publication