[转]H5直播之从推流服务搭建到视频直播

转自http://www.php.cn/html5-tutorial-403035.html

最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下来将围绕这两种视频流协议来展开H5直播主题分享,下面通过本文给大家分享HTML5视频直播思路详解,一起看看吧

 

前言

前不久抽空对目前比较火的视频直播,做了下研究与探索,了解其整体实现流程,以及探讨移动端HTML5直播可行性方案。

发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主(HLS存在延迟性问题,也可以借助 video.js 采用RTMP),PC端则以 RTMP 为主实时性较好,接下来将围绕这两种视频流协议来展开H5直播主题分享。

一、视频流协议HLS与RTMP

1. HTTP Live Streaming

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的视频流协议,由 Apple 公司实现,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS,高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如:MPlayerX、VLC 也都支持 HLS 协议。

HLS 协议基于 HTTP,而一个提供 HLS 的服务器需要做两件事:

编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中;分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件;浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。一个典型的 m3u8 文件格式如下:

 

1

2

3

4

5

6

7

8

9

#EXTM3U

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000

gear1/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111

gear2/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444

gear3/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777

gear4/prog_index.m3u8

 

可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应,所以适应性很好,不会受到防火墙影响。但它也有一个致命的弱点:延迟现象非常明显。如果每个 ts 按照 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度,减少 m3u8 中的索引数,延时确实会减少,但会带来更频繁的缓冲,对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。

对于支持 HLS 的浏览器来说,直接这样写就能播放了:

 

1

<video src=”./bipbopall.m3u8″ height=”300″ width=”400″  preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>

 

注意:HLS 在 PC 端仅支持safari浏览器,类似chrome浏览器使用HTML5 video

标签无法播放 m3u8 格式,可直接采用网上一些比较成熟的方案,如:sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

2. Real Time Messaging Protocol

Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server,并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好,延迟很小,但无法支持移动端 WEB 播放是它的硬伤。

虽然无法在iOS的H5页面播放,但是对于iOS原生应用是可以自己写解码去解析的, RTMP 延迟低、实时性较好。浏览器端,HTML5 video

标签无法播放 RTMP 协议的视频,可以通过 video.js 来实现。

 

1

2

3

4

5

6

7

8

9

10

11

<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>

<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>

<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>

</video>

<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>

<script>

videojs.options.flash.swf = ‘video.swf’;

videojs(‘example_video_1′).ready(function() {

this.play();

});

</script>

 

3. 视频流协议HLS与RTMP对比

二、直播形式

目前直播展示形式,通常以YY直播、映客直播这种页面居多,可以看到其结构可以分成三层:

① 背景视频层

② 关注、评论模块

③ 点赞动画

而现行H5类似直播页面,实现技术难点不大,其可以通过实现方式分为:

① 底部视频背景使用video视频标签实现播放

② 关注、评论模块利用 WebScoket 来实时发送和接收新的消息通过DOM 和 CSS3 实现

③ 点赞利用 CSS3 动画

了解完直播形式之后,接下来整体了解直播流程。

三、直播整体流程

直播整体流程大致可分为:

视频采集端:可以是电脑上的音视频输入设备、或手机端的摄像头、或麦克风,目前以移动端手机视频为主。

直播流视频服务端:一台Nginx服务器,采集视频录制端传输的视频流(H264/ACC编码),由服务器端进行解析编码,推送RTMP/HLS格式视频流至视频播放端。

视频播放端:可以是电脑上的播放器(QuickTime Player、VLC),手机端的native播放器,还有就是 H5 的video标签等,目前还是以手机端的native播放器为主。

(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)

四、H5 录制视频

对于H5视频录制,可以使用强大的 webRTC (Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在 PC 的 Chrome 上支持较好,移动端支持不太理想。

使用 webRTC 录制视频基本流程

① 调用 window.navigator.webkitGetUserMedia()

获取用户的PC摄像头视频数据。

② 将获取到视频流数据转换成 window.webkitRTCPeerConnection

(一种视频流数据格式)。

③ 利用 WebScoket

将视频流数据传输到服务端。

注意:

虽然Google一直在推WebRTC,目前已有不少成型的产品出现,但是大部分移动端的浏览器还不支持 webRTC(最新iOS 10.0也不支持),所以真正的视频录制还是要靠客户端(iOS,Android)来实现,效果会好一些。

WebRTC支持度

WebRTC支持度

iOS原生应用调用摄像头录制视频流程

① 音视频的采集,利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。

② 对视频进行H264编码,对音频进行AAC编码,在iOS中分别有已经封装好的编码库(x264编码、faac编码、ffmpeg编码)来实现对音视频的编码。

③ 对编码后的音、视频数据进行组装封包。

④ 建立RTMP连接并上推到服务端。

五、搭建Ng

五、搭建Nginx+Rtmp直播流服务

安装nginx、nginx-rtmp-module

① 先clone nginx项目到本地:

brew tap homebrew/nginx

② 执行安装nginx-rtmp-module

brew install nginx-full –with-rtmp-module

2. nginx.conf配置文件,配置RTMP、HLS

查找到nginx.conf配置文件(路径/usr/local/etc/nginx/nginx.conf),配置RTMP、HLS。

① 在http节点之前添加 rtmp 的配置内容:

② 在http中添加 hls 的配置

3. 重启nginx服务

重启nginx服务,浏览器中输入 http://localhost:8080,是否出现欢迎界面确定nginx重启成功。

nginx -s reload

六、直播流转换格式、编码推流

当服务器端接收到采集视频录制端传输过来的视频流时,需要对其进行解析编码,推送RTMP/HLS格式视频流至视频播放端。通常使用的常见编码库方案,如x264编码、faac编码、ffmpeg编码等。鉴于 FFmpeg 工具集合了多种音频、视频格式编码,我们可以优先选用FFmpeg进行转换格式、编码推流。

1.安装 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

视频文件地址:/Users/gao/Desktop/video/test.mp4

推流拉流地址:rtmp://localhost:1935/rtmplive/home,rtmp://localhost:1935/rtmplive/home

 

1

2

3

4

//RTMP 协议流

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home

//HLS 协议流

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

 

注意:

当我们进行推流之后,可以安装VLC、ffplay(支持rtmp协议的视频播放器)本地拉流进行演示

3.FFmpeg推流命令

① 视频文件进行直播

 

1

2

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

 

② 推流摄像头+桌面+麦克风录制进行直播

 

1

ffmpeg -f avfoundation -framerate 30 -i “1:0″ \-f avfoundation -framerate 30 -video_size 640x480 -i “0” \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

 

更多命令,请参考:

FFmpeg处理RTMP流媒体的命令大全

FFmpeg常用推流命令

七、H5 直播视频播放

移动端iOS和 Android 都天然支持HLS协议,做好视频采集端、视频流推流服务之后,便可以直接在H5页面配置 video 标签播放直播视频。

 

1

2

3

4

<video controls preload=“auto” autoplay=“autoplay” loop=“loop” webkit-playsinline>

<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />

<p class=“warning”>Your browser does not support HTML5 video.</p>

</video>

 

八、总结

本文从视频采集上传,服务器处理视频推流,以及H5页面播放直播视频一整套流程,具体阐述了直播实现原理,实现过程中会遇到很多性能优化问题。

① H5 HLS 限制必须是H264+AAC编码。

② H5 HLS 播放卡顿问题,server 端可以做好分片策略,将 ts 文件放在 CDN 上,前端可尽量做到 DNS 缓存等。

③ H5 直播为了达到更好的实时互动,也可以采用RTMP协议,通过video.js 实现播放。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

使用HTML5实现网页音乐播放器

HTML5 video播放器全屏(fullScreen)实现的方法


---------------------
作者:China_Lzw
来源:CSDN
原文:https://blog.csdn.net/qq285679784/article/details/86010076
版权声明:本文为作者原创文章,转载请附上博文链接!
内容解析By:CSDN,CNBLOG博客文章一键转载插件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/285462.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据库原理及应用】经典题库附答案(14章全)——第五章:关系数据理论

【数据库原理及应用】经典题库附答案(14章全)——第一章:数据库基础知识 【数据库原理及应用】经典题库附答案(14章全)——第二章:关系数据库知识 【数据库原理及应用】经典题库附答案(14章全)——第三章:结构化查询语言SQL 【数据库原理及应用】经典题库附答案(14章…

webform数据导出

把数据放到一个泛型集合里&#xff0c;再把泛型集合里面的数据放到一个table中&#xff0c;设置好文件路径&#xff0c;然后进行文件读取&#xff0c;最后供用户下载。 数据导出放在一个按钮中就可以了 using System; using System.Collections.Generic; using System.Linq; us…

C语言试题117之有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前 20 项之和

✅作者简介:大家好我是码莎拉蒂,CSDN博客专家🥇🥇🥇 📃个人主页:个人主页 🔥系列专栏:C语言试题200例 💬推荐一款模拟面试、刷题神器👉 点击跳转进入网站 1、题目 题目:有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13…求出这个数列的前 20 项之和。 分析…

Ionic Mac 环境配置

2019独角兽企业重金招聘Python工程师标准>>> Ionic Mac 环境配置 安装cordova之前要安装nodejs 会包含npm安装&#xff08;npm是个包管理器&#xff09;&#xff0c;到官网下载https://nodejs.org/en/download/ 是个pkg包下载之后双击下载包运行然后 step …

【数据库原理及应用】经典题库附答案(14章全)——第六章:关系数据库设计过程

【数据库原理及应用】经典题库附答案(14章全)——第一章:数据库基础知识 【数据库原理及应用】经典题库附答案(14章全)——第二章:关系数据库知识 【数据库原理及应用】经典题库附答案(14章全)——第三章:结构化查询语言SQL 【数据库原理及应用】经典题库附答案(14章…

(03).NET MAUI实战 基础控件

1.概要本章将继续介绍.NET MAUI中的常用基础控件&#xff0c;让刚刚接触MAUI的小伙伴有写基础的认识&#xff0c;心里有底开发起来将得心应手。下面将列出一些常用的基础控件&#xff1a;控件名中文名称说明Button按钮与WPF中的基础用法无太大变化CheckBox单选框与WPF中的基础用…

ffmpeg源码分析及mp4文件解析

一.mp4文件的组织 1. mp4文件的box(ffmpeg中叫atom) mp4是由一系列的box组成的&#xff0c;每个box的header是8个字节(4字节的长度,4字节的type) 第一个box比较特殊&#xff0c;其type类型为ftyp,还包含一个sub-type 0000000: 0000 0020 6674 7970 6973 6f6d 0000 0200 ... f…

【数据库原理及应用】经典题库附答案(14章全)——第七章:数据库恢复技术

【数据库原理及应用】经典题库附答案(14章全)——第一章:数据库基础知识 【数据库原理及应用】经典题库附答案(14章全)——第二章:关系数据库知识 【数据库原理及应用】经典题库附答案(14章全)——第三章:结构化查询语言SQL 【数据库原理及应用】经典题库附答案(14章…

C++库(Google Breakpad)

Google Breakpad是什么&#xff1f; 一个开源的多平台崩溃报告系统。 Google breakpad是一个非常实用的跨平台的崩溃转储和分析模块&#xff0c;它支持Windows&#xff0c;Linux和Mac和Solaris。由于他本身跨平台&#xff0c;所以很大程度上减少了我们在平台移植时的工作&#…

java eleven进度条

2019独角兽企业重金招聘Python工程师标准>>> 一个矩形组件 MethodDescribleJProgrssBar()不带进度字符&#xff0c;最小值0最大值100的水平进度条JProgressBar(int orient)VERTICAL/HORIZONTALJProgressBar(int in,int max)指定最大最小的水平进度条JProgressBar(in…

Docker:多阶段构建 ASP.NET Core 应用镜像

本文选自『.NET大牛之路』知识星球&#xff0c;发布于2022年05月25日。今天我们一起来写 Dockerfile 构建一个 ASP.NET Core 应用镜像&#xff0c;同时还会将镜像发布到 Docker Hub 仓库。1创建示例 Web 应用程序为了演示&#xff0c;我们先创建一个 ASP.NET Core 应用程序&…

[转]【JAVA各版本特性】JAVA 1.0

闲来想了解下各版本之间的特性&#xff0c;搜索没有最新的特性说明&#xff0c;故想写一份。废话不多说。 JDK Version 1.0 1996-01-23 Oak(橡树) 初代版本&#xff0c;伟大的一个里程碑&#xff0c;但是是纯解释运行&#xff0c;使用外挂JIT&#xff0c;性能比较差&#xff0…

【数据库原理及应用】经典题库附答案(14章全)——第八章:数据库并发控制

【数据库原理及应用】经典题库附答案(14章全)——第一章:数据库基础知识 【数据库原理及应用】经典题库附答案(14章全)——第二章:关系数据库知识 【数据库原理及应用】经典题库附答案(14章全)——第三章:结构化查询语言SQL 【数据库原理及应用】经典题库附答案(14章…

Tomcat(Windows)

百度云&#xff1a;链接&#xff1a;http://pan.baidu.com/s/1pKYrf79 密码&#xff1a;56t0官网下载网址&#xff1a;http://archive.apache.org/dist/tomcat/tomcat-9/v9.0.0.M13/bin/ 转载于:https://www.cnblogs.com/haxianhe/p/9271103.html

北京Uber优步司机奖励政策(3月11日)

滴快车单单2.5倍&#xff0c;注册地址&#xff1a;http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单&#xff1a;http://www.cnblogs.com/mfryf/p/4612609.html 优步奖励低/不挣钱/怎么办?看这里&#xff1a;http://www.cnblogs.com/mfry…

【招聘(广州)】成功易(广州).Net Core中高级开发工程师

成功易&#xff08;广州&#xff09;信息技术有限公司简介成功易是一家集团性公司&#xff0c;创立于2002年&#xff0c;总部位于北京&#xff0c;旗下拥有7家子公司。广州成功易成立于2019年&#xff0c;人员逐渐增长150人&#xff0c;组织架构完善&#xff0c; 我们是腾讯广告…

【数据库原理及应用】经典题库附答案(14章全)——第九章:数据库安全性

【数据库原理及应用】经典题库附答案(14章全)——第一章:数据库基础知识 【数据库原理及应用】经典题库附答案(14章全)——第二章:关系数据库知识 【数据库原理及应用】经典题库附答案(14章全)——第三章:结构化查询语言SQL 【数据库原理及应用】经典题库附答案(14章…

webstrom使用方法

一、设置file-settings- -color&fonts设置&#xff0c;字体 主体 -file and code templates模板ctrlr 查找&#xff0c;替换1 双击shift 快速查找2 file -new project 新建文件夹3 file-new 新建html css js等4 右键-local history 查看历史5 双击选择某个元素&#xff0c;…

ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' 解决Mysql错误

1、停止 服务 PS C:\WINDOWS\system32> net stop mysql mysql 服务正在停止. mysql 服务已成功停止。2、执行 mysqld --shared-memory --skip-grant-tables PS C:\WINDOWS\system32> mysqld --shared-memory --skip-grant-tables ------以下操作 另外打开一个 终端--…

xcode 设置快捷键 整行上下移动

2019独角兽企业重金招聘Python工程师标准>>> 设置整行代码上下移动&#xff1a;找到Xcode中的自带的配置文件&#xff1a;/Applications/Xcode.app/Contents/Frameworks/IDEKit.framework/Versions/A/Resources/IDETextKeyBindingSet.plist用文本编辑IDETextKeyBind…