CN111245856A - 一种h5播放实时视频的方法与系统 - Google Patents

一种h5播放实时视频的方法与系统 Download PDF

Info

Publication number
CN111245856A
CN111245856A CN202010053773.1A CN202010053773A CN111245856A CN 111245856 A CN111245856 A CN 111245856A CN 202010053773 A CN202010053773 A CN 202010053773A CN 111245856 A CN111245856 A CN 111245856A
Authority
CN
China
Prior art keywords
real
stream
time
video stream
server
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
CN202010053773.1A
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.)
LOOVEE Inc
Original Assignee
LOOVEE Inc
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 LOOVEE Inc filed Critical LOOVEE Inc
Priority to CN202010053773.1A priority Critical patent/CN111245856A/zh
Publication of CN111245856A publication Critical patent/CN111245856A/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/60—Network streaming of media packets
    • H04L65/75—Media network packet handling
    • 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

Abstract

本发明提供了一种H5播放实时视频的方法，包括以下步骤：S1、在推流端，将推流格式调整为h264 baseline模式；S2、将视频流转发到rtmp流媒体服务器；S3、用node.js服务器启动脚本对h264 baseline的视频流进行解码，并重新组装成适合websocket模式的视频流；S4、H5客户端启动连接到node.js服务器的监听端口，并告知node.js服务需要哪一路视频流；S5、Node.js对当前视频流进行实时转发；S6、当流媒体有中断的时候，根据rtmp流媒体服务器相关事件进行停止或者重启解码并转发；S7、H5客户端利用转发的视频流，用canvas实时绘制视频流。本发明还提供了一种H5播放实时视频的系统。本发明的有益效果是：实现了H5播放实时视频。

Description

一种H5播放实时视频的方法与系统
技术领域
本发明涉及播放实时视频，尤其涉及一种H5播放实时视频的方法与系统。
背景技术
H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来。基于这种H5解码技术将接收到的视频信息，就可以通过网页的形式播放出来。
目前，H5播放视频，大部分都不支持websocket方式，都是通过m3u8格式进行播放，延迟将近10秒，无法应用于实时场景。
发明内容
为了解决现有技术中的问题，本发明提供了一种H5播放实时视频的方法与系统。
本发明提供了一种H5播放实时视频的方法，包括以下步骤：
S1、在推流端，将推流格式调整为h264 baseline模式；
S2、将视频流转发到rtmp流媒体服务器；
S3、用node.js服务器启动脚本对h264 baseline的视频流进行解码，并重新组装成适合websocket模式的视频流；
S4、H5客户端启动连接到node.js服务器的监听端口，并告知node.js服务需要哪一路视频流；
S5、Node.js对当前视频流进行实时转发；
S6、当流媒体有中断的时候，根据rtmp流媒体服务器相关事件进行停止或者重启解码并转发；
S7、H5客户端利用转发的视频流，用canvas实时绘制视频流。
作为本发明的进一步改进，在步骤S1中，在推流端，将推流格式由h264 high模式，改变成h264 baseline模式。
作为本发明的进一步改进，node.js服务器的实时解码过程如下：
1） 启动流媒体服务器；
2） 推流端将h264 high模式改为h264 baseline模式，并推流到流媒体服务器；
3） Node.js服务器对流媒体服务器流事件进行监控；
4） 进行流事件处理，如果流断开，则停止转码，如果新流产生，则启动脚本并实时解码组装。
作为本发明的进一步改进，H5客户端的实时播放流程如下：
1） H5客户端通过websocket连接到Node.js服务器；
2） H5客户端指定需要哪一路视频流；
3） Node.js服务器实时转发视频流；
4） H5客户端用canvas实时绘制视频流。
本发明还提供了一种H5播放实时视频的系统，包括可读存储介质，所述可读存储介质中存储有执行指令，所述执行指令被处理器执行时用于实现如上述中任一项所述的方法。
本发明的有益效果是：实现了H5播放实时视频。
附图说明
图1是本发明一种H5播放实时视频的方法的node.js服务器的实时解码流程图。
图2是本发明一种H5播放实时视频的方法的node.js服务器的H5客户端的实时播放流程图。
具体实施方式
下面结合附图说明及具体实施方式对本发明作进一步说明。
一种H5播放实时视频的方法，包括以下步骤：
1.在推流端，将原来的推流格式h264 high模式，改变成h264 baseline模式。
2.将视频流转发到rtmp流媒体服务器。
3.用node.js启动脚本对h264 baseline的视频流进行解码，并重新组装成适合websocket模式的视频流。
4.H5客户端启动连接到node.js的监听端口，并告知node.js服务需要哪一路视频流。
5.Node.js对当前视频流进行实时转发。
6.当流媒体有中断的时候，根据rtmp流媒体服务器相关事件进行停止或者重启解码并转发。
7.H5客户端利用转发的视频流，用canvas实时绘制视频流。
本发明提供的一种H5播放实时视频的方法,改变推流的模式，能兼容app和h5；需要实现rtmp视频流解码成websocket的视频流；要能监控视频流的状态，实现程序自动停止和重启视频流的解码和转发。
如图1所示，node.js服务器的实时解码过程如下：
1） 启动流媒体服务器；
2） 推流端将h264 high模式改为h264 baseline模式，并推流到流媒体服务器；
3） Node.js服务器对流媒体服务器流事件进行监控；
4） 进行流事件处理，如果流断开，则停止转码，如果新流产生，则启动脚本并实时解码组装。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
如图2所示，H5客户端的实时播放流程如下：
5） H5客户端通过websocket连接到Node.js服务器；
1） H5客户端指定需要哪一路视频流；
2） Node.js服务器实时转发视频流；
3） H5客户端用canvas实时绘制视频流。
H5播放实时视频应用到娃娃部落抓娃娃的实例：
1.在推流端，将推流参数调整为h264的baseline 模式。
2.Node.js调用相关的脚本，对rtmp流媒体服务器事件进行监控，同时对客户端的连接进行监听。
3.当有新的baseline模式的流上来时，启动一个脚本进行实时转码。
4.当有新的用户通过h5来观看或者游戏的时候，通过canvas实时绘制视频流。
一种H5播放实时视频的系统，包括可读存储介质，所述可读存储介质中存储有执行指令，所述执行指令被处理器执行时用于实现如上述中任一项所述的方法。
本发明提供的一种H5播放实时视频的方法与系统，可以在H5或者微信网页里面直接打开视频，并且能实时操作，做到基本无延时，延时在200ms以内。
本发明提供的一种H5播放实时视频的方法与系统，具有以下效果：
1、以前需要通过APP才能体验的方式，扩展到H5也能支持。
2、对业务的拉新产生了比较好的效果。
3、在480*640的视频流下解码并组装，一个8核16G内存的服务器，可以支持同时128路转码分发。
以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (5)

1.一种H5播放实时视频的方法，其特征在于，包括以下步骤：
S1、在推流端，将推流格式调整为h264 baseline模式；
S2、将视频流转发到rtmp流媒体服务器；
S3、用node.js服务器启动脚本对h264 baseline的视频流进行解码，并重新组装成适合websocket模式的视频流；
S4、H5客户端启动连接到node.js服务器的监听端口，并告知node.js服务需要哪一路视频流；
S5、Node.js对当前视频流进行实时转发；
S6、当流媒体有中断的时候，根据rtmp流媒体服务器相关事件进行停止或者重启解码并转发；
S7、H5客户端利用转发的视频流，用canvas实时绘制视频流。
2.根据权利要求1所述的H5播放实时视频的方法，其特征在于：在步骤S1中，在推流端，将推流格式由h264 high模式，改变成h264 baseline模式。
3.根据权利要求1所述的H5播放实时视频的方法，其特征在于：node.js服务器的实时解码过程如下：
启动流媒体服务器；
推流端将h264 high模式改为h264 baseline模式，并推流到流媒体服务器；
Node.js服务器对流媒体服务器流事件进行监控；
进行流事件处理，如果流断开，则停止转码，如果新流产生，则启动脚本并实时解码组装。
4.根据权利要求1所述的H5播放实时视频的方法，其特征在于，H5客户端的实时播放流程如下：
H5客户端通过websocket连接到Node.js服务器；
H5客户端指定需要哪一路视频流；
Node.js服务器实时转发视频流；
H5客户端用canvas实时绘制视频流。
5.一种H5播放实时视频的系统，其特征在于：包括可读存储介质，所述可读存储介质中存储有执行指令，所述执行指令被处理器执行时用于实现如权利要求1至4中任一项所述的方法。
CN202010053773.1A 2020-01-17 2020-01-17 一种h5播放实时视频的方法与系统 Pending CN111245856A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010053773.1A CN111245856A (zh) 2020-01-17 2020-01-17 一种h5播放实时视频的方法与系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010053773.1A CN111245856A (zh) 2020-01-17 2020-01-17 一种h5播放实时视频的方法与系统

Publications (1)

Publication Number Publication Date
CN111245856A true CN111245856A (zh) 2020-06-05

Family

ID=70870250

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010053773.1A Pending CN111245856A (zh) 2020-01-17 2020-01-17 一种h5播放实时视频的方法与系统

Country Status (1)

Country Link
CN (1) CN111245856A (zh)

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103780681A (zh) * 2014-01-06 2014-05-07 南京莱斯信息技术股份有限公司 一种高实时性Web应用系统及其数据实时推送方法
US20160037215A1 (en) * 2014-07-31 2016-02-04 Diego Cardona Live streaming-tv content, acquisition, transformation, encryption, and distribution system, and method for its use
CN105871897A (zh) * 2016-05-20 2016-08-17 腾讯科技（深圳）有限公司 一种控制媒体播放的方法、相关装置以及系统
CN107395681A (zh) * 2017-06-22 2017-11-24 深圳市嵘兴实业发展有限公司 无线电监测数据实时推送及动态图绘制方法
CN107670279A (zh) * 2017-10-26 2018-02-09 天津科技大学 基于WebGL的3D网页游戏的开发方法及系统
CN107948159A (zh) * 2017-11-27 2018-04-20 宁波市科技园区明天医网科技有限公司 一种基于浏览器的医学影像同步显示和诊断操作的方法
CN108805300A (zh) * 2018-05-30 2018-11-13 上海理工大学 数控机床远程实时协作故障诊断及维修系统
US20190026121A1 (en) * 2017-07-19 2019-01-24 Vmware, Inc. Redirecting multimedia captured on a mobile device to a virtual desktop using image scanning
CN110446010A (zh) * 2019-08-02 2019-11-12 江西航天鄱湖云科技有限公司 基于web的视频监控方法、装置、存储介质、服务器及系统
CN110661752A (zh) * 2018-06-29 2020-01-07 广州弘度信息科技有限公司 一种无插件实时视频播放系统及方法

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103780681A (zh) * 2014-01-06 2014-05-07 南京莱斯信息技术股份有限公司 一种高实时性Web应用系统及其数据实时推送方法
US20160037215A1 (en) * 2014-07-31 2016-02-04 Diego Cardona Live streaming-tv content, acquisition, transformation, encryption, and distribution system, and method for its use
CN105871897A (zh) * 2016-05-20 2016-08-17 腾讯科技（深圳）有限公司 一种控制媒体播放的方法、相关装置以及系统
CN107395681A (zh) * 2017-06-22 2017-11-24 深圳市嵘兴实业发展有限公司 无线电监测数据实时推送及动态图绘制方法
US20190026121A1 (en) * 2017-07-19 2019-01-24 Vmware, Inc. Redirecting multimedia captured on a mobile device to a virtual desktop using image scanning
CN107670279A (zh) * 2017-10-26 2018-02-09 天津科技大学 基于WebGL的3D网页游戏的开发方法及系统
CN107948159A (zh) * 2017-11-27 2018-04-20 宁波市科技园区明天医网科技有限公司 一种基于浏览器的医学影像同步显示和诊断操作的方法
CN108805300A (zh) * 2018-05-30 2018-11-13 上海理工大学 数控机床远程实时协作故障诊断及维修系统
CN110661752A (zh) * 2018-06-29 2020-01-07 广州弘度信息科技有限公司 一种无插件实时视频播放系统及方法
CN110446010A (zh) * 2019-08-02 2019-11-12 江西航天鄱湖云科技有限公司 基于web的视频监控方法、装置、存储介质、服务器及系统

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
JERRY: "HTML5 视频直播（二）", 《HTTPS://IMQUQU.COM/POST/HTML5-LIVE-PLAYER-2.HTML》 *
XINGRZ: "使用websocket进行HTML5视频直播", 《HTTPS://SEGMENTFAULT.COM/A/1190000000392586》 *

Similar Documents

Publication Publication Date Title
CN110324671B (zh) 网页视频播放方法及装置、电子设备及存储介质
US20040031052A1 (en) Information platform
US8713420B2 (en) Synchronization of web applications and media
US20140195649A1 (en) Automatic detection of a similar application stored on a networked media device through a multicast capability of an operating system accessed through an application of a mobile device
WO2019094748A1 (en) Interfaces between dash aware application and dash client for service interactivity support
WO2010139236A1 (zh) 在网络电视上展示及时消息的方法和系统
CN111064973A (zh) 一种基于ipv9的直播系统
JP2008544584A5 (zh)
US11259096B2 (en) HTML5-based audio/video playing method and apparatus, and live audio/video streaming method and system
WO2013139138A1 (zh) 一种互动消息展示方法、装置及系统
CN101247511A (zh) Iptv内容相关信息展现方法及系统
US20140181243A1 (en) Server-based content tracking apparatus and method
US20080271097A1 (en) System And Method For Receiving And Playing Network Television Programs
WO2013097454A1 (zh) 一种视频插播的方法、装置及系统
CN112073809A (zh) 一种支持浏览器播放任意编码格式视频的方法
CN105187895A (zh) 针对移动平台硬件加速播放视频的数据缓存方法及系统
CN107197386A (zh) 一种无客户端的跨平台视频播放实现方法
EP3741132A1 (en) Processing dynamic web content of an iso bmff web resource track
CN108494792A (zh) 一种flash播放器播放hls视频流的转换系统及其工作方法
US20230294001A1 (en) Content stream processing
CN113923502B (zh) 直播视频播放方法及装置
US20180146261A1 (en) Message Sending Method and Device, Code Stream Processing Method and Device
CN111245856A (zh) 一种h5播放实时视频的方法与系统
CN111818361A (zh) 控制流媒体业务交互的方法、web客户端设备及系统
EP3652953B1 (fr) Procédé de signalisation d'une substitution à un terminal, procédé de substitution par un terminal, produits programme d'ordinateur, système et terminal correspondants

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20200605