前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于h5直播源码的技术扫盲

关于h5直播源码的技术扫盲

作者头像
云豹通讯员
修改2020-03-11 18:08:47
1.9K0
修改2020-03-11 18:08:47
举报
文章被收录于专栏:直播那些事儿

到目前,h5似乎已经成为品牌宣传最重要的表现方式。h5技术开发简单,研发周期短,且成本低廉。尤其强化了web网页的表现性能,通过h5技术搭建的直播系统不仅能够在网页实现高清流畅播放,还能加入很多的交互功能。下面,我们就针对h5直播源码做一些技术扫盲。

一、h5直播源码中的关键技术点:WebRTC

想要搭建h5直播系统,WebRTC必不可少。WebRTC即网页即时通信,是一个支持网页浏览器进行实时语音对话或视频对话的开源API。WebRTC中包括了音频引擎,视频引擎、传输引擎等,浏览器把最底层的音视频渲染和网络传输的底层能力开放给开发者,开发者可以根据自己的需求选择是否进行重载。

音频引擎中,包括了两个编解码器:iSAC和iLBC,前者针对宽带和超宽带的音频编解码,后者针对窄带音频编解码。音频引擎还包括了音频抖动缓冲,回声消除和噪音抑制模块等。

视频引擎中,包括了VP8和VP9的视频编解码器,甚至是即将到来的AV1,视频引擎还包括视频抖动缓冲和图像质量增强等模块。

传输引擎中,WebRTC使用的是SRTP安全实时传输协议,采取的是P2P的通信方式,没有媒体服务器等后端的实现。

这些预定的引擎配置为h5直播源码提供了强悍的技术基础。不过,WebRTC只是应用于视频录制,视频播放还得需要HLS的支持。

二、什么是HLS协议?.m3u8是干啥用的?这俩有什么联系?

HLS是一种常见的视频播放协议。简单通俗点来讲,就是把整个视频流分成一小块一小块的基于HTTP的文件来下载播放。通常,在代码上说明HLS协议时,会引入一个用于h5播放视频的.m3u8文件,这个文件就是基于HLS协议,存放视频流元数据的文件。每一个.m3u8文件,分别对应若干个ts文件,这些ts文件才是真正存放视频的数据,m3u8文件只是存放了一些ts文件的配置信息和相关路径,当视频播放时,.m3u8是动态改变的,video标签会解析这个文件,并找到对应的ts文件来播放,所以一般为了加快速度,.m3u8放在web服务器上,ts文件放在cdn上。

那么,HLS协议的请求流程是:

1、http请求.m3u8的url。

2、服务端返回一个.m3u8的播放列表,这个播放列表是实时更新的,一般一次给出3段数据的url。

3、客户端解析.m3u8的播放列表,再按序请求每一段的url,从而获取ts数据流。

三、直播延迟往往不可避免

前面提到,HLS协议是将直播流分成一段一段的视频去下载播放的。假设列表里面的包含5个TS文件,每个TS文件包含5秒的视频内容,那么整体的延迟就是25秒。因为当用户看到这些视频时,主播已经将视频录制好上传了,所以产生了延迟。当然可以缩短列表的长度和单个TS文件的大小来降低延迟,极致来说可以所见列表长度为1,并且TS的时长为1s。但如果这多就会造成请求次数增加,增大服务器压力,当网速慢时会造成更多的缓冲,所以一般推荐的ts时长为10s,这样大概有30s的延迟。

以上就是关于h5直播源码的一些技术扫盲点。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档