CN110944225B - 一种基于html5的不同帧率音视频的同步方法及装置 - Google Patents
一种基于html5的不同帧率音视频的同步方法及装置 Download PDFInfo
- Publication number
- CN110944225B CN110944225B CN201911141635.2A CN201911141635A CN110944225B CN 110944225 B CN110944225 B CN 110944225B CN 201911141635 A CN201911141635 A CN 201911141635A CN 110944225 B CN110944225 B CN 110944225B
- Authority
- CN
- China
- Prior art keywords
- audio
- frame
- video
- playing
- time
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 44
- 238000005070 sampling Methods 0.000 claims abstract description 24
- 238000012544 monitoring process Methods 0.000 claims abstract description 22
- 238000004806 packaging method and process Methods 0.000 claims description 23
- 238000005538 encapsulation Methods 0.000 claims description 19
- 238000012545 processing Methods 0.000 description 12
- 238000004590 computer program Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 7
- 230000001360 synchronised effect Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 239000012634 fragment Substances 0.000 description 5
- 238000012986 modification Methods 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 238000013467 fragmentation Methods 0.000 description 4
- 238000006062 fragmentation reaction Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 238000011161 development Methods 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000009434 installation Methods 0.000 description 2
- 238000012935 Averaging Methods 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 238000013475 authorization Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000002457 bidirectional effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000003139 buffering effect Effects 0.000 description 1
- 239000003795 chemical substances by application Substances 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000009432 framing Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- AWSBQWZZLBPUQH-UHFFFAOYSA-N mdat Chemical compound C1=C2CC(N)CCC2=CC2=C1OCO2 AWSBQWZZLBPUQH-UHFFFAOYSA-N 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002085 persistent effect Effects 0.000 description 1
- 230000036316 preload Effects 0.000 description 1
- 238000011160 research 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/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/4302—Content synchronisation processes, e.g. decoder synchronisation
- H04N21/4307—Synchronising the rendering of multiple content streams or additional data on devices, e.g. synchronisation of audio on a mobile phone with the video output on the TV screen
-
- 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/439—Processing of audio elementary streams
-
- 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
-
- 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/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/85—Assembly of content; Generation of multimedia applications
- H04N21/854—Content authoring
- H04N21/8543—Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Computer Security & Cryptography (AREA)
- Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
Abstract
本发明提供了一种基于HTML5的不同帧率音视频同步方法及装置，其中的方法包括：从服务端接收视频流和音频流；基于采样率对音频流中包含的音频帧数据按照固定时长进行播放；实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，实现不同帧率音视频的同步。本发明提供的方法中，视频帧可以以音频帧时间轴为参考，实现视音频同步播放。
Description
技术领域
本发明涉及音视频处理技术领域，具体涉及一种基于HTML5的不同帧率音视频的同步方法及装置。
背景技术
在HTML5标准出现以前，浏览器上实现实时音视频流的播放，一般都采用自定义开发插件或flashplayer插件的方式。自定义开发插件需要针对不同的浏览器开发不同的插件版本，IE使用ActiveX架构开发，NPAPI架构浏览器(firefox、chrome、Safari)需采用NPAPI架构开发，费时费力。采用flash插件方案，虽然解决了跨浏览器问题，但flash插件是个封闭保护插件，开放的接口有限，同时其音视频流格式也是其专有的，必须使用专有的后台服务，导致其可扩展性十分有限，难于在实时流直播中大量应用。同时，以上两种方案，均需要在浏览器中进行插件安装，因浏览器的安全等级保护导致用户使用起来很不方便。
HTML5是Web标准最巨大的飞跃。HTML5并非仅仅用来表示Web内容，它也将Web带入一个成熟的应用平台，在这个平台上，视频，音频，动画等都被标准化。随着HTML5的发展，各个浏览器都已经支持HTML5。HTML5提供了音频视频的标准接口，实现了无需任何插件支持，只需浏览器支持相应的HTML5标签，从而免除Flash等插件的安装直接播放音视频。Video标签虽然免除了插件安装，但目前支持的格式是有限制的，为以下三种格式：Ogg、MPEG4、WebM。考虑到最多种浏览器支持，大多选用MPEG4，其编码格式为H.264视频编码和AAC音频编码，Internet Explorer 9+,Firefox,Opera,Chrome以及Safari均支持Video标签。在以上浏览器中，都可以采用Video标签来播放MP4文件，仅仅需要指定要播放的视频的URL地址即可。
本发明申请人在实施本发明的过程中，发现现有技术中至少存在如下技术问题：
现有技术中video标签播放视频主要有两种方式，一种是播放本地文件的方式，一种是播放服务端文件流的方式，但是目前在这两种方式中，Video只能支持某种固定参数的MP4文件，对逐帧实时采集上传的音视频帧流数据并不支持，音频、视频按各自轨道数据进行播放，不能进行音视频同步性控制播放。
由此可知，现有技术中的方法存在无法实现音视频同步的技术问题。
发明内容
有鉴于此，本发明实施例提供了一种基于HTML5的不同帧率音视频的同步方法及装置，用以解决或者至少解决现有技术中的方法存在的无法实现音视频同步的技术问题。
为了解决上述技术问题，本发明第一方面提供了一种基于HTML5的不同帧率音视频的同步方法，所述方法包括：
从服务端接收视频流和音频流；
基于采样率对音频流中包含的音频帧数据按照固定时长进行播放；
实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
在一种实施方式中，从服务端接收视频流和音频流，包括：
采用websocket从服务端接收h264视频流和aac音频流。
在一种实施方式中，基于采样率对音频流中包含的音频帧数据按照固定时长进行播放，包括：
基于预设封装规则对接收的视频流和音频流分视轨音轨进行封装，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放。
在一种实施方式中，封装参数包括时间单元数和封装的音频帧的时间长度，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放，包括：
根据音频的采样率计算当前音频帧的播放时间；
确定音频帧播放的时间单元数；
根据当前音频帧的播放时间和音频帧播放的时间单元数，确定封装的音频帧的时间长度，并根据封装的音频帧的时间长度对音频流中包含的音频帧数据进行播放。
在一种实施方式中，实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，包括：
记录视频帧数据之间的时间间隔，实时监测视频帧帧率；
根据实时监测的视频帧帧率和音频帧播放的时间单元数，确定视频帧的封装时间长度，并根据视频帧的封装时间长度调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
在一种实施方式中，记录视频帧数据之间的时间间隔，实时监测视频帧帧率，包括：
根据音频帧播放的时间单元数和视频帧帧率计算出封装的视频帧的时间长度，并以音频帧播放的时间单元数和封装的视频帧的时间长度对视频帧进行封装；
记录当前视频帧的时间戳和上一视频帧的时间戳，根据两个视频帧的时间戳差值得到当前视频帧的帧率。
基于同样的发明构思，本发明第二方面提供了一种基于HTML5的不同帧率音视频的同步装置，所述装置为浏览器Video标签播放器，包括：
接收模块，用于从服务端接收视频流和音频流；
音频播放模块，用于基于采样率对音频流中包含的音频帧数据按照固定时长进行播放；
视频播放模块，用于实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
在一种实施方式中，音频播放模块具体用于：
基于预设封装规则对接收的视频流和音频流分视轨音轨进行封装，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放。
在一种实施方式中，封装参数包括时间单元数和封装的音频帧的时间长度，音频播放模块还用于：
根据音频的采样率计算当前音频帧的播放时间；
确定音频帧播放的时间单元数；
根据当前音频帧的播放时间和音频帧播放的时间单元数，确定封装的音频帧的时间长度，并根据封装的音频帧的时间长度对音频流中包含的音频帧数据进行播放。
在一种实施方式中，实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，包括：
记录视频帧数据之间的时间间隔，实时监测视频帧帧率；
根据实时监测的视频帧帧率和音频帧播放的时间单元数，确定视频帧的封装时间长度，并根据视频帧的封装时间长度调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
本申请实施例中的上述一个或多个技术方案，至少具有如下一种或多种技术效果：
本发明提供的方法，首先从服务端接收视频流和音频流，然后基于采样率对音频流中包含的音频帧数据按照固定时长进行播放；再实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
相对于现有技术中音频、视频按各自轨道数据进行播放，不能进行音视频同步性控制播放的方式而言，本发明提供的方法，在接收视频流和音频流后，分别对音频流和视频流进行处理，对于视频流中包含的音频帧数据，使音频帧播放按固定时长播放，在处理变帧率音视频流时，以音频帧数据的播放时长为基准，实时监测视频帧帧率，即实时确定每帧视频数据应该播放的时间长度，从而智能调节每帧视频数据的播放时长，这样按同样的时间刻度来处理音视频帧，就可以实现音视频流的同步播放。
进一步地，音视频帧分帧类型单独进行fmp4封装碎片化，音视频帧单帧封装，可以减少延时。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明提供的一种基于HTML5的不同帧率音视频的同步方法的流程图；
图2为本发明提供的一种基于HTML5的不同帧率音视频的同步装置的结构框图。
具体实施方式
本发明实施例提供了一种基于HTML5的不同帧率音视频的同步方法及装置，用以改善现有技术中的方法存在的无法实现音视频同步的技术问题。
本申请发明人通过大量的研究与实践发现：
虽然video标签可以解决音视频文件的跨浏览器播放，但其不支持实时流。随后W3C标准制定了MSE(MediaSourceExtension)扩展，很好地解决了Video标签不支持流的问题。MSE允许JavaScript动态构建<video>和<audio>的媒体流。通过使用MSE，你可以动态地修改媒体流而不需要任何插件。这让前端JavaScript可以进行音视频流的转封装、处理，甚至转码。
众所周知，MP4是由一系列的Boxes组成的。普通的MP4文件是嵌套结构的，客户端必须要从头加载一个MP4文件，才能够完整播放，不能从中间一段开始播放。而fMP4由一系列的片段组成，如果服务器支持byte-range请求，那么，这些片段可以独立的进行请求到客户端进行播放，而不需要加载整个文件。当前，H.264+AAC的MP4容器在所有的浏览器都支持。普通的MP4文件是不能和MSE一起使用的,需要将MP4进行fragment化(碎片化)。Fragment化后的MP4流就可以通过MSE+Video标签来播放。从而实现跨浏览器免插件播放实时音视频流。
现有技术中，还没有基于HTML5 Video标签中处理变帧率音视频流同步的方法，目前HTML5 Video标签播放视频主要是以下两种方式：
第一种，播放本地文件方式
<！DOCTYPE HTML>
<html>
<body>
<video src＝"movie.mp4"controls＝"controls">your browser support thevideo tag
</video>
</body>
</html>
src中指定要播放的视频的URL，movie.mp4为一个固定了参数的MP4文件，按MP4规范，文件头相关box中设置了该段视频文件应该播放的时长、播放间隔等参数，并不支持实时变帧率音视频流播放；
第二种：播放服务端文件流方式
该方式要求从文件服务器读取音视频文件，以流的方式传给前台，前台用Video标签进行视频播放。
后台实现代码示例：
前端实现代码：
<video width＝"352"height＝"288"controls id＝"video"preload＝"auto">
<source src＝"getVideos"type＝"video/mp4">
</video>
src写getVideos可以直接跳转到后台找到这个方法，从而将movie.mp4文件流传送至前端用Video标签进行播放。同第一种方式一样，Video也只能支持某种固定参数的MP4文件，对逐帧实时采集上传的音视频帧流数据并不支持，即Video标签当前仅仅支持封装好参数的MP4文件，其中的视频轨、音频轨媒体数据按封装参数进行播放，播放过程中不能进行控制，音频、视频按各自轨道数据进行播放，不能进行音视频同步性控制播放。
综上所述，对于同帧率的音视频流，只需fragment化传给MSE，Video标签就可以进行同步播放。但对于不同帧率的音视频流，一般是视频帧率小于音频帧率的情形，若简单的fragment化就进行播放，会发生音视频不同步的情况，甚至在有些浏览器上出现无法播放视频的现象。
针对同类现有技术或产品要解决的问题，本发明提供了基于HTML5 Video标签实现不同帧率实时音视频流的同步播放，通过改进video标签缺省固定帧率播放音视频的处理方式，将变帧率视频同步到音频，从而实现实时音视频流的同步播放。主要构思如下：
在处理变帧率音视频流时，实时监测视频帧帧率，即实时确定每帧视频数据应该播放的时间长度，从而可以智能调节每帧视频数据播放时长；同时，固定帧率音频帧播放按固定时长播放，这样按同样的时间刻度来处理音视频帧，就可以实现音视频流的同步播放。
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例一
本实施例提供了一种基于HTML5的不同帧率音视频的同步方法，请参见图1，所述方法包括：
步骤S1：从服务端接收视频流和音频流。
具体来说，本发明的执行主体为浏览器端，可以通过现有的协议从服务端接收相应的视频流和音频流。
在一种实施方式中，从服务端接收视频流和音频流，包括：
采用websocket从服务端接收h264视频流和aac音频流。
具体来说，WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议，WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
步骤S2：基于采样率对音频流中包含的音频帧数据按照固定时长进行播放。
具体来说，采样率即采样频率，。
在一种实施方式中，基于采样率对音频流中包含的音频帧数据按照固定时长进行播放，包括：
基于预设封装规则对接收的视频流和音频流分视轨音轨进行封装，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放。
具体来说，本发明分别对音频流和视频流进行处理。
在浏览器端可以使用JS解析aac音频数据，根据制定协议获得aac音频的采样率。例如一个aac原始帧包含一段时间内1024个采样及相关数据，音频帧的播放时间＝一个aac帧对应的采样样本个数/采样频率(单位为秒)，假设采样率为8000HZ，那么当前aac一帧的播放时间是1024*1000/8000＝128ms(单位毫秒)。
在浏览器端使用JS解析h264数据，通过两帧视频数据上的时间戳，计算出一帧视频数据所持续的时长。通过这个时长可以推算出视频帧帧率，比如时长为80ms，帧率＝1000/80＝12.5fps，相对常用的25fps就是一个半帧率，而且这样采用半帧率甚至不足半帧率的情形在移动4G监控领域常常使用。
作为优选，在封装fMP4 fragment时，为了保证实时性，不进行流数据缓存，每接收完一帧音或视频数据后，马上进行fMP4封装。然后将封装数据传递给MediaSource中的sourceBuffer对象，然后通过浏览器Videotag自动获取sourceBuffer中的数据进行解码播放，其中，MediaSource是Media Source ExtensionsAPI表示媒体资源HTMLMediaElement对象的接口，MediaSource对象可以附着在HTMLMediaElement在客户端进行播放。
具体地，fMP4的封装可以分为InitializationSegment和mediaSegment两种，这两种基本封装格式相差不多。关于InitializationSegment必须注意以下几点：
A、文件类型声明ftyp的box包含的major_brand或者compatible_brand用户代理必须支持；
B、mohdbox里的任意box或者字段不能违背在ftypbox里定义的major_brand或者compatible_brands中的任何一个授权；
C、mohd中包含的samples的track(如stts、stsc、或者stco中的entry_count必须设置为0)；
D、mvexbox必须在moov中被包含，该box说明该视频包含moof需要解析。
MediaSegment封装要求基本类似，同时增加以下几点：
a、styp必须遵循ftyp；
b、traf里面必须包含tfdt；
c、mdat里的samples必须和trun里面的对应。
此外，需要说明的是，不同的浏览器对fmp4的解析兼容性有所不同，未按上述要求封装的fmp4有的浏览器也可播放，但数据的播放会存在卡顿等问题。
在一种实施方式中，封装参数包括时间单元数和封装的音频帧的时间长度，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放，包括：
根据音频的采样率计算当前音频帧的播放时间；
确定音频帧播放的时间单元数；
根据当前音频帧的播放时间和音频帧播放的时间单元数，确定封装的音频帧的时间长度，并根据封装的音频帧的时间长度对音频流中包含的音频帧数据进行播放。
具体来说，时间单元数和封装的音频帧的时间长度分别为time scale参数和duration参数，一个为时间刻度参数，一个为播放时长参数，两者共同决定Video标签播放该封装数据应花费时长。
在具体实施过程中，本发明采用音频、视频分视轨、音轨分别封装的方式。对于音频fmp4封装，要求达到和视频同步必须注意下面几个参数。mvhdbox里有个time scale，它表示1秒长度的时间单元数，例如可以设置为8000，那么duration参数必须是封装的音频帧的时间长度，根据前面计算出来的一帧aac播放时间是128ms，那么此时的duration＝128*8000/1000＝1024。tkhd box中参数duration赋同样值，这样就可以核准封装的一帧音频应该播放的时长，作为视频播放时长的时间基准，从而为视频帧的同步提供时间轴。
步骤S3：实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
在一种实施方式中，实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，包括：
记录视频帧数据之间的时间间隔，实时监测视频帧帧率；
根据实时监测的视频帧帧率和音频帧播放的时间单元数，确定视频帧的封装时间长度，并根据视频帧的封装时间长度调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
在一种实施方式中，记录视频帧数据之间的时间间隔，实时监测视频帧帧率，包括：
根据音频帧播放的时间单元数和视频帧帧率计算出封装的视频帧的时间长度，并以音频帧播放的时间单元数和封装的视频帧的时间长度对视频帧进行封装；
记录当前视频帧的时间戳和上一视频帧的时间戳，根据两个视频帧的时间戳差值得到当前视频帧的帧率。
具体来说，不同于音频帧事前就知道帧率的情况，视频帧针对不同的终端帧率可能是各不相同的。可以先假定是满帧率(25帧/秒),那么一帧数据的播放时长是40ms，time_scale采用和音频相同的刻度8000，duration＝40*8000/1000＝320,先按这两个参数值封装视频fmp4。
然后当前视频帧的帧率，通过记下视频帧的ts(时间戳，毫秒为单位)，等后一帧数据接收完毕，和前一帧记录的ts求差值，会得到一个帧间隔值，如此求得3～4个间隔值后再平均，就能得到当前视频帧的帧率。最后以该帧率来填写time_scale和duration参数项封装fmp4，其中mvhdbox和tkhdbox中的相应参数都要赋值且相同。这样，视频帧就可以以音频帧时间轴为参考，实现视音频同步播放。
总体来说，在当前网页音视频流直播方案多选择flash插件的情形下，随着HTML5Video标签的出现，各浏览器都逐渐支持Video tag，而且优选支持视频H264，音频aac。音视频实现了免插件跨浏览器播放，但要实现流式低延迟直播，必须将音视频流碎片化(fragment mp4)，相对常见的MP4文件流碎片化方案，本发明具有以下创新点或者有益技术效果：
1、音视频帧分帧类型单独进行fmp4封装碎片化。
2、音视频帧单帧封装，减少延时。
3、视频帧、音频帧按各自帧率得出的帧间隔进行播放，即每秒播放的视频帧、音频帧并不相同，这样音频、视频采样参照同一个时间轴就可以实现同步。
本发明提供的基于HTML5的不同帧率音视频的同步方法，处理对象是封装的fmp4流，不是直接处理视频流和音频流。并且本发明采用的是视频参考音频的方式，音频按采样率原样播放，播放时长一定；不同于现有技术中直接处理视频流和音频流，以及采用视频、音频处理时长差值得到的补偿值去调整音频、视频输出信号保持同步方式、或者采用音频播放延时延迟播放视频来进行同步的方式。
基于同一发明构思，本申请还提供了一种与实施例一中对应的装置，详见实施例二。
实施例二
本实施例提供了一种基于HTML5的不同帧率音视频的同步装置，请参见图2，该装置包括：
接收模块201，用于从服务端接收视频流和音频流；
音频播放模块202，用于基于采样率对音频流中包含的音频帧数据按照固定时长进行播放；
视频播放模块203，用于实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
在一种实施方式中，音频播放模块具体用于：
基于预设封装规则对接收的视频流和音频流分视轨音轨进行封装，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放。
在一种实施方式中，封装参数包括时间单元数和封装的音频帧的时间长度，音频播放模块还用于：
根据音频的采样率计算当前音频帧的播放时间；
确定音频帧播放的时间单元数；
根据当前音频帧的播放时间和音频帧播放的时间单元数，确定封装的音频帧的时间长度，并根据封装的音频帧的时间长度对音频流中包含的音频帧数据进行播放。
在一种实施方式中，实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，包括：
记录视频帧数据之间的时间间隔，实时监测视频帧帧率；
根据实时监测的视频帧帧率和音频帧播放的时间单元数，确定视频帧的封装时间长度，并根据视频帧的封装时间长度调整每帧视频数据的播放时长，实现不同帧率音视频的同步。
由于本发明实施例二所介绍的基于HTML5的不同帧率音视频的同步装置，为实施本发明实施例一中基于HTML5的不同帧率音视频的同步方法所采用的装置，故而基于本发明实施例一所介绍的方法，本领域所属人员能够了解该装置的具体结构及变形，故而在此不再赘述。凡是本发明实施例一的方法所采用的装置都属于本发明所欲保护的范围。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然，本领域的技术人员可以对本发明实施例进行各种改动和变型而不脱离本发明实施例的精神和范围。这样，倘若本发明实施例的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (4)
1.一种基于HTML5的不同帧率音视频的同步方法，其特征在于，所述方法包括：
从服务端接收视频流和音频流；
基于采样率对音频流中包含的音频帧数据按照固定时长进行播放；
实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，实现不同帧率音视频的同步，具体包括：
记录视频帧数据之间的时间间隔，实时监测视频帧帧率；
根据实时监测的视频帧帧率和音频帧播放的时间单元数，确定视频帧的封装时间长度，并根据视频帧的封装时间长度调整每帧视频数据的播放时长，实现不同帧率音视频的同步；
其中，基于采样率对音频流中包含的音频帧数据按照固定时长进行播放，包括：
基于预设封装规则对接收的视频流和音频流分视轨音轨进行封装，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放；
封装参数包括时间单元数和封装的音频帧的时间长度，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放，包括：
根据音频的采样率计算当前音频帧的播放时间；
确定音频帧播放的时间单元数；
根据当前音频帧的播放时间和音频帧播放的时间单元数，确定封装的音频帧的时间长度，并根据封装的音频帧的时间长度对音频流中包含的音频帧数据进行播放。
2.如权利要求1所述的方法，其特征在于，从服务端接收视频流和音频流，包括：
采用websocket从服务端接收h264视频流和aac音频流。
3.如权利要求1所述的方法，其特征在于，记录视频帧数据之间的时间间隔，实时监测视频帧帧率，包括：
根据音频帧播放的时间单元数和视频帧帧率计算出封装的视频帧的时间长度，并以音频帧播放的时间单元数和封装的视频帧的时间长度对视频帧进行封装；
记录当前视频帧的时间戳和上一视频帧的时间戳，根据两个视频帧的时间戳差值得到当前视频帧的帧率。
4.一种基于HTML5的不同帧率音视频的同步装置，其特征在于，所述装置为浏览器Video标签播放器，包括：
接收模块，用于从服务端接收视频流和音频流；
音频播放模块，用于基于采样率对音频流中包含的音频帧数据按照固定时长进行播放；
视频播放模块，用于实时监测视频帧帧率，以音频帧数据的播放时长为基准，调整每帧视频数据的播放时长，实现不同帧率音视频的同步，具体包括：
记录视频帧数据之间的时间间隔，实时监测视频帧帧率；
根据实时监测的视频帧帧率和音频帧播放的时间单元数，确定视频帧的封装时间长度，并根据视频帧的封装时间长度调整每帧视频数据的播放时长，实现不同帧率音视频的同步；
其中，音频播放模块具体用于：
基于预设封装规则对接收的视频流和音频流分视轨音轨进行封装，设置音频帧的封装参数，对音频流中包含的音频帧数据按照固定时长进行播放；
音频播放模块还用于：
根据音频的采样率计算当前音频帧的播放时间；
确定音频帧播放的时间单元数；
根据当前音频帧的播放时间和音频帧播放的时间单元数，确定封装的音频帧的时间长度，并根据封装的音频帧的时间长度对音频流中包含的音频帧数据进行播放。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911141635.2A CN110944225B (zh) | 2019-11-20 | 2019-11-20 | 一种基于html5的不同帧率音视频的同步方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911141635.2A CN110944225B (zh) | 2019-11-20 | 2019-11-20 | 一种基于html5的不同帧率音视频的同步方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110944225A CN110944225A (zh) | 2020-03-31 |
| CN110944225B true CN110944225B (zh) | 2022-10-04 |
Family
ID=69907872
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911141635.2A Active CN110944225B (zh) | 2019-11-20 | 2019-11-20 | 一种基于html5的不同帧率音视频的同步方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110944225B (zh) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111147908B (zh) * | 2020-04-02 | 2021-04-06 | 成都掌中全景信息技术有限公司 | 一种基于html5视频动态帧率回放的音视频精准同步方法 |
| CN112969068B (zh) * | 2021-05-19 | 2021-08-03 | 四川省商投信息技术有限责任公司 | 一种监控视频数据存储播放方法及装置 |
| CN113316012B (zh) * | 2021-05-26 | 2022-03-11 | 深圳市沃特沃德信息有限公司 | 基于墨水屏设备的音视频帧同步方法、装置和计算机设备 |
| CN113852857B (zh) * | 2021-10-20 | 2023-04-11 | 成都华栖云科技有限公司 | 一种基于html5视频帧步进时的声音播放方法及系统 |
| CN114466225A (zh) * | 2022-02-10 | 2022-05-10 | 北京沃东天骏信息技术有限公司 | 视频数据播放方法及装置、电子设备和可读存储介质 |
| CN115866309B (zh) * | 2022-11-29 | 2023-09-22 | 广州后为科技有限公司 | 一种支持多路视频同步的音视频缓存方法和装置 |
Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101931775A (zh) * | 2010-09-01 | 2010-12-29 | 中兴通讯股份有限公司 | 一种录像方法及装置 |
| CN102421035A (zh) * | 2011-12-31 | 2012-04-18 | 青岛海信宽带多媒体技术有限公司 | 数字电视音视频同步的实现方法及装置 |
| CN103167320A (zh) * | 2011-12-15 | 2013-06-19 | 中国电信股份有限公司 | 音视频同步方法、系统及手机直播客户端 |
| CN103369365A (zh) * | 2013-06-28 | 2013-10-23 | 东南大学 | 音视频同步记录装置 |
| CN104575547A (zh) * | 2013-10-17 | 2015-04-29 | 深圳市云帆世纪科技有限公司 | 多媒体文件制作方法、播放方法及系统 |
| CN107079178A (zh) * | 2014-09-26 | 2017-08-18 | 索尼公司 | 信息处理装置和信息处理方法 |
| CN107483972A (zh) * | 2017-07-24 | 2017-12-15 | 平安科技（深圳）有限公司 | 一种音视频的直播处理方法、存储介质和一种移动终端 |
| CN108377415A (zh) * | 2018-02-11 | 2018-08-07 | 浙江大华技术股份有限公司 | 一种视频帧率的确定方法及装置 |
| CN108769770A (zh) * | 2018-06-21 | 2018-11-06 | 广州酷狗计算机科技有限公司 | 调整音频单元的方法和装置 |
| CN109120974A (zh) * | 2018-07-25 | 2019-01-01 | 深圳市异度信息产业有限公司 | 一种音视频同步播放的方法及装置 |
| CN109275008A (zh) * | 2018-09-17 | 2019-01-25 | 青岛海信电器股份有限公司 | 一种音视频同步的方法和装置 |
| CN109600661A (zh) * | 2018-08-01 | 2019-04-09 | 北京微播视界科技有限公司 | 用于录制视频的方法和装置 |
| CN109936715A (zh) * | 2017-12-19 | 2019-06-25 | 华为技术有限公司 | 一种mp4文件的处理方法及其相关设备 |
| CN110312137A (zh) * | 2019-04-01 | 2019-10-08 | 浙江工业大学 | 一种音频播放驱动录像的视频文件生成方法 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040205811A1 (en) * | 2002-09-23 | 2004-10-14 | Grandy Leslie L. | System and method for providing integrated media |
| US8954178B2 (en) * | 2007-09-30 | 2015-02-10 | Optical Fusion, Inc. | Synchronization and mixing of audio and video streams in network-based video conferencing call systems |
| CN103596033B (zh) * | 2013-11-11 | 2017-01-11 | 北京佳讯飞鸿电气股份有限公司 | 在多媒体系统终端回放中解决音视频不同步问题的方法 |
-
2019
- 2019-11-20 CN CN201911141635.2A patent/CN110944225B/zh active Active
Patent Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101931775A (zh) * | 2010-09-01 | 2010-12-29 | 中兴通讯股份有限公司 | 一种录像方法及装置 |
| CN103167320A (zh) * | 2011-12-15 | 2013-06-19 | 中国电信股份有限公司 | 音视频同步方法、系统及手机直播客户端 |
| CN102421035A (zh) * | 2011-12-31 | 2012-04-18 | 青岛海信宽带多媒体技术有限公司 | 数字电视音视频同步的实现方法及装置 |
| CN103369365A (zh) * | 2013-06-28 | 2013-10-23 | 东南大学 | 音视频同步记录装置 |
| CN104575547A (zh) * | 2013-10-17 | 2015-04-29 | 深圳市云帆世纪科技有限公司 | 多媒体文件制作方法、播放方法及系统 |
| CN107079178A (zh) * | 2014-09-26 | 2017-08-18 | 索尼公司 | 信息处理装置和信息处理方法 |
| CN107483972A (zh) * | 2017-07-24 | 2017-12-15 | 平安科技（深圳）有限公司 | 一种音视频的直播处理方法、存储介质和一种移动终端 |
| CN109936715A (zh) * | 2017-12-19 | 2019-06-25 | 华为技术有限公司 | 一种mp4文件的处理方法及其相关设备 |
| CN108377415A (zh) * | 2018-02-11 | 2018-08-07 | 浙江大华技术股份有限公司 | 一种视频帧率的确定方法及装置 |
| CN108769770A (zh) * | 2018-06-21 | 2018-11-06 | 广州酷狗计算机科技有限公司 | 调整音频单元的方法和装置 |
| CN109120974A (zh) * | 2018-07-25 | 2019-01-01 | 深圳市异度信息产业有限公司 | 一种音视频同步播放的方法及装置 |
| CN109600661A (zh) * | 2018-08-01 | 2019-04-09 | 北京微播视界科技有限公司 | 用于录制视频的方法和装置 |
| CN109275008A (zh) * | 2018-09-17 | 2019-01-25 | 青岛海信电器股份有限公司 | 一种音视频同步的方法和装置 |
| CN110312137A (zh) * | 2019-04-01 | 2019-10-08 | 浙江工业大学 | 一种音频播放驱动录像的视频文件生成方法 |
Non-Patent Citations (1)
| Title |
|---|
| 音视频流实时分离及同步播放系统设计与实现;徐永键;《电脑编程技巧与维护》;20140818;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110944225A (zh) | 2020-03-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110944225B (zh) | 一种基于html5的不同帧率音视频的同步方法及装置 | |
| JP7000475B2 (ja) | ハイパーテキスト転送プロトコルを使用してＭａｔｒｏｓｋａコンテナファイル中に記憶されるメディアの適応型ビットレートストリーミング | |
| KR102321859B1 (ko) | 자바 스크립트를 이용한 실시간 미디어 스트리밍 방법 및 그 장치 | |
| US8929441B2 (en) | Method and system for live streaming video with dynamic rate adaptation | |
| KR101748198B1 (ko) | 다수의 오버 더 탑 스트리밍 클라이언트들의 동기화 | |
| US9288251B2 (en) | Adaptive bitrate management on progressive download with indexed media files | |
| US9258333B2 (en) | Method for recovering content streamed into chunk | |
| US8788933B2 (en) | Time-shifted presentation of media streams | |
| US20150256600A1 (en) | Systems and methods for media format substitution | |
| CN102752669B (zh) | 多通道实时流媒体文件的传送处理方法与系统、接收装置 | |
| JP2010539739A (ja) | データ・フローを同期化する方法 | |
| CN111669645B (zh) | 视频的播放方法、装置、电子设备及存储介质 | |
| US20150229986A1 (en) | Rendering time control | |
| CN113938470A (zh) | 一种浏览器播放rtsp数据源的方法、装置以及流媒体服务器 | |
| WO2012107570A1 (en) | A method for optimizing a video stream | |
| US20110276662A1 (en) | Method of constructing multimedia streaming file format, and method and apparatus for servicing multimedia streaming using the multimedia streaming file format | |
| US10484725B2 (en) | Information processing apparatus and information processing method for reproducing media based on edit file | |
| CN116614686A (zh) | 一种实时音视频播放方法 | |
| CN117981328A (zh) | 音视频的多路同步播放方法、装置、电子设备及存储介质 | |
| CA3230746A1 (en) | Dynamic creation of low latency video streams in a live event | |
| CN115604523A (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 |