魔扣论坛

魔扣源码论坛业务
查看: 571|回复: 4

基于HTML5的网络直播方案及相关技术介绍

[复制链接]
  • TA的每日心情
    慵懒
    2020-6-24 14:40
  • 签到天数: 90 天

    [LV.6]每天都来

    81

    主题

    0

    回帖

    466

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    976
    贡献
    348
    威望
    1
    发表于 2020-2-25 16:23:42 | 显示全部楼层 |阅读模式
    魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x
    直播发展如火如荼,为了满足火热的移动Web端直播需求,一系列基于HTML5的网络直播方案迅速的发展了起来。其实只要实现了直播的各个技术难点,通过HTML5进行视频直播并非难事。
    常见的可用于HTML5的直播技术共有3种协议:HLS、WebSocket与WebRTC。本文将对基于这3种协议的HTML5网络直播方案实现做下基础的介绍。
    . HLS
    优点:CDN支持比较好。
    缺点:延时较高,无法进行互动直播。
    HLS是一个由苹果公司提出的基于HTTP的流媒体网络传输协议,是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件,每次只下载一些。当媒体流正在播放时,客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源,允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时,客户端会下载一个包含元数据的extended M3U (m3u8)playlist文件,用于寻找可用的媒体流。
    HLS协议实现直播的延时比较高,是因为每一小段的视频文件都需要延迟时间比如文件列表里面包含5个TS文件,每个TS文件包含5秒视频,那么整体的延迟就是25秒。
    当然也可以缩短列表的长度和单个TS文件的大小来降低延迟,甚至可以缩减列表长度为1,TS视频时长为1s。但是这样设置无疑会增加请求次数,服务器压力自然也会增大,而且当网速慢时这样的设置会造成更多的缓冲。苹果官方推荐的TS时长是10s,这样就会大约有30s的延迟。
    . WebSocket+MSE
    优点:实时性比较好,可以用于互动直播,前端可操作性更大。
    缺点:技术较新,一些旧浏览器不支持。
    1. WebSocket
    通常的Web应用都是围绕着HTTP的请求/响应模式而构建的。所有的HTTP通信都是通过客户端来控制的,都是由客户端向服务器发出一个请求,服务器接收和处理完毕后再返回结果给客户端,客户端再将数据展现出来。这种模式不能满足实时应用的需求,于是出现了SSE,Comet等“服务器推”的长连接技术。
    WebSocket是直接基于TCP连接之上的通信协议,可以在单个TCP连接上进行全双工的通信。WebSocket是独立的创建在TCP上的协议,HTTP协议中的那些概念都不复存在,和HTTP的唯一关联是使用HTTP协议的101状态码进行协议切换,使用的TCP端口是80,可以用于绕过大多数防火墙的限制。
    2. MSE
    MSE是一个主流浏览器支持的新的Web API。MSE是一个W3C标准,允许Java动态的构建和 的媒体流。它定义了对象,允许Java传输媒体流片段到一个HTMLMediaElement。
    直播系统源码、短视频系统源码、一对一直播系统源码开发和出售,vx:17116105317
    通过使用MSE,你可以动态地修改媒体流而不需要任何的插件。这让前端Java可以做更多的事情,我们可以在Java进行转封装,处理,甚至转码。
    . WebRTC
    优点:实时性好,延时低,基于UDP协议。
    缺点:缺少成熟的开源中转服务器方案。
    WebRTC,网页即时通信,是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。
    WebRTC 涉及到很多复杂技术,不过好在大多数复杂工作可以抽象成为下面三个 API:
    MediaStream:获取音频和视频流;
    RTCPeerConnection:用来建立和维护端到端连接,提供高效的音视频流传输;
    RTCDataChannel:用于支持端到端的任意应用数据交换。
    这里的MediaStream对应的是JS里的navigator.getUserMedia() 方法,它负责从底层平台获取音视频流。音视频流经过WebRTC音视频引擎的自动优化、编码和解码,可以直接读取或者传输到各种目的地。比如,我们可以用getUserMedia获取视频流,再把每一帧都转成ASCII字符播放。MediaStream这个API设计得很简单,使用起来也很方便。
    以上就是三种基于HTML5的网络直播方案中的常用协议,实现难度依次递增,当然,用户体验也依次递增。

    该用户从未签到

    4

    主题

    260

    回帖

    524

    积分

    高级魔扣

    Rank: 4

    魔扣币
    260
    贡献
    260
    威望
    0
    发表于 2020-2-25 16:24:40 | 显示全部楼层

    该用户从未签到

    2

    主题

    243

    回帖

    489

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    244
    贡献
    244
    威望
    0
    发表于 2020-4-4 09:08:58 | 显示全部楼层
    报告!别开枪,我就是路过来看看的。。。

    该用户从未签到

    1

    主题

    242

    回帖

    485

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    242
    贡献
    242
    威望
    0
    发表于 2020-7-17 15:56:47 | 显示全部楼层
    因为有缘,让我们在空间里相识。友情是绵绵的细雨,滋润心田;友情是浩瀚的海洋,博大精深;友情是天上的白云,绚丽多彩;友情是陈年的佳酿,醇香溢人;友情是梦中的舞者,引人如醉;友情是优美的音乐,曲曲感人。魔扣源码论坛祝好友心情永远愉快,永远事事顺利,永远平安吉祥、如意!

    该用户从未签到

    1

    主题

    262

    回帖

    525

    积分

    高级魔扣

    Rank: 4

    魔扣币
    262
    贡献
    262
    威望
    0
    发表于 2020-7-19 12:20:16 | 显示全部楼层
    广告位,,坐下看看
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    • 联系我们
    • 新浪微博 :
    • 在线客服 :魔扣科技 
    • 源码QQ群 :魔扣源码论坛官方总群
    • 联系邮箱 :charlin#morko.net
    • 微信扫一扫
    快速回复 返回顶部 返回列表