HTML5视频直播技术介绍

HTML5视频直播技术介绍视频直播如火如荼,为了满足比较火热的移动Web端直播需求,一系列的HTML5直播技术迅速的发展了起来。只要实现了视频直播的各个技术难点,通过HTML5进行视频直播并非难事。常见的可用于HTML5的直播技术共有3种协议:HLS、WebSocket与WebRTC。本文将对基于这3种协议的HTML5直播技术实现做下基础的介绍。一.HLS优点:CDN支持比较好缺点

大家好,又见面了,我是你们的朋友全栈君。

视频直播如火如荼,为了满足比较火热的移动 Web 端直播需求,一系列的 HTML5 直播技术迅速的发展了起来。只要实现了视频直播的各个技术难点,通过HTML5进行视频直播并非难事。
常见的可用于 HTML5 的直播技术共有3种协议:HLS、WebSocket与WebRTC。本文将对基于这3种协议的HTML5直播技术实现做下基础的介绍。

一. HLS
优点:CDN支持比较好
缺点:延时较高,无法进行互动直播

HLS(全称HTTP Live Streaming)是一个由苹果公司提出的基于HTTP的流媒体网络传输协议,是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件,每次只下载一些。当媒体流正在播放时,客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源,允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时,客户端会下载一个包含元数据的extended M3U (m3u8)playlist文件,用于寻找可用的媒体流。
用HLS协议实现直播的延时比较高,是因为每一小段的视频文件都需要延迟时间比如文件列表里面包含5个TS文件,每个TS文件包含5秒视频,那么整体的延迟就是25秒。
当然也可以缩短列表的长度和单个TS文件的大小来降低延迟,甚至可以缩减列表长度为1,TS视频时长为1s。但是这样设置无疑会增加请求次数,服务器压力自然也会增大,而且当网速慢时这样的设置会造成更多的缓冲。苹果官方推荐的TS时长是10s,这样就会大约有30s的延迟。


HTML5视频直播技术介绍


二. WebSocket+MSE

优点:实时性比较好,可以用于互动直播,前端可操作性更大

缺点:技术较新,一些旧浏览器不支持


1. WebSocket

通常的Web应用都是围绕着HTTP的请求/响应模式而构建的。所有的HTTP通信都是通过客户端来控制的,都是由客户端向服务器发出一个请求,服务器接收和处理完毕后再返回结果给客户端,客户端再将数据展现出来。这种模式不能满足实时应用的需求,于是出现了SSE,Comet等“服务器推”的长连接技术.

WebSocket是直接基于TCP连接之上的通信协议,可以在单个TCP连接上进行全双工的通信。WebSocket在2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范,WebSocketAPI被W3C定为标准。

WebSocket是独立的创建在TCP上的协议,HTTP协议中的那些概念都不复存在,和HTTP的唯一关联是使用HTTP协议的101状态码进行协议切换,使用的TCP端口是 80,可以用于绕过大多数防火墙的限制。


HTML5视频直播技术介绍


2. MSE

MSE(全称:Media Source Extensions)是一个主流浏览器支持的新的Web API。MSE是一个W3C标准,允许Java动态的构建和 的媒体流。它定义了对象,允许Java传输媒体流片段到一个HTMLMediaElement。

通过使用MSE,你可以动态地修改媒体流而不需要任何的插件。这让前端Java可以做更多的事情,我们可以在Java进行转封装,处理,甚至转码。


HTML5视频直播技术介绍


三. WebRTC

优点:实时性好,延时低,基于UDP协议

缺点:缺少成熟的开源中转服务器方案


WebRTC(全称:WebReal-Time Communication),网页即时通信,是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。

WebRTC 涉及到很多复杂技术,不过好在大多数复杂工作可以抽象成为下面三个 API:

MediaStream:获取音频和视频流;

RTCPeerConnection:用来建立和维护端到端连接,提供高效的音视频流传输;

RTCDataChannel:用于支持端到端的任意应用数据交换。

这里的MediaStream对应的是JS里的navigator.getUserMedia() 方法,它负责从底层平台获取音视频流。音视频流经过WebRTC音视频引擎的自动优化、编码和解码,可以直接读取或者传输到各种目的地。比如,我们可以用getUserMedia获取视频流,再把每一帧都转成ASCII字符播放。MediaStream这个API设计得很简单,使用起来也很方便。


三种协议方式的实现难度依次递增,用户体验也依次递增。


HLS基于HTTP的协议,本质是一个文本协议,将点播转换成直播。

WebSocket本质上算流协议,除了Chrome要求按GoP送数据之外,不会有切片时列表和切片请求的延迟。相比之下,使用WebSocket+MSE进行流媒体数据的传输,实时性更高。

WebRTC由于目前缺少成熟的开源中转服务器方案,在技术落地方面一直在进行相关探索。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/162886.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • android代码设置点击涟漪,android – 为自定义CompoundButton添加涟漪效果

    android代码设置点击涟漪,android – 为自定义CompoundButton添加涟漪效果我有以下自定义CompoundButton:publicclassCustomCompoundButtonextendsCompoundButton{publicCustomCompoundButton(Contextcontext){this(context,null);}publicCustomCompoundButton(Contextcontext,Attribut…

    2022年5月5日
    96
  • Java IO流学习总结一:输入输出流[通俗易懂]

    Java IO流学习总结一:输入输出流[通俗易懂]JavaIO流学习总结一:输入输出流转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/53761199本文出自【赵彦军的博客】Java流类图结构:流的概念和作用流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象。即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输特性将流抽象为各种类,方便更直

    2022年4月27日
    42
  • RNN详解及BPTT详解

    RNN详解及BPTT详解 版权声明:转载请注明出处 https://blog.csdn.net/zhaojc1995/article/details/80572098 本文部分参考和摘录了以下文章,在此由衷感谢以下作者的分享!https://zhuanlan.zhihu.com/p/28…

    2022年6月23日
    42
  • mysql截取字符串并且替换更新「建议收藏」

    mysql截取字符串并且替换更新「建议收藏」最近需要刷一个数据库表中的数据。表中的username字段中的名称是由下划线分割的两个字符串,现在需要去掉下划线后边的字符串,留下需要的姓名:updateusersetuser_name=SUBSTRING_INDEX(user_name,’_’,1)直接解决问题。用到mysql函数:SUBSTRING_INDEX(str,delim,count)…

    2022年5月24日
    110
  • 迪奥布兰度正在挑战fgo 小说_god eater resurrection

    迪奥布兰度正在挑战fgo 小说_god eater resurrectiongodis之aof持久化文章目录godis之aof持久化基本说明文件写入加载文件文件重写数据转化为redis命令外部调用基本说明在godis中,只有aof持久化,而没有rdb持久化。aof持久化分为三个基本的模块:将命令持久化到aof文件将aof文件的命令加载到内存aof文件重写文件写入handlerAof函数的作用是将命令持久化到aof文件中。它监听着aof通道并写入到aof文件,在初始化handler的时候,就开启一个子goroutine来执行这个函数。//监听aof通

    2022年10月8日
    2
  • dock是什么意思中文_电脑dock是什么

    dock是什么意思中文_电脑dock是什么Dock从初级到高级全套教程dock是iMac中很常见的一个功能,而且非常实用,那么dock到底是什么意思呢?1.经常使用苹果电脑的小伙伴,和大家讨论时总会听到有人在说dock栏,不过还是有很多小伙伴不知道dock到底是什么意思,接下来小编就给大家普及一下。2.dock一般指的就是苹果操作系统中的停靠栏,也就是苹果电脑桌面中最下方,类似于Windows系统下方的任务栏,不过要比Window…

    2025年11月1日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号