小视频系统源码H5 直播起航

一、视频流协议HLS与RTMP

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 文件格式如下：

#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 中的索引数，延时确实会减少，但会带来更频繁的缓冲，对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。

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 来实现。

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

HLS，协议：短链接Http ，原理：集合一段时间数据生成ts切片文件更新m3u8文件，延迟10s - 30s，优点：跨平台，使用场景：移动端为主
RTMP，协议长链接Tcp，原理：每个时刻的数据收到后立即发送，延迟2s，优点：延时低、实时性好，使用场景： PC+直播+实时性要求高＋互动性强

二、直播形式
目前直播展示形式，通常以YY直播、映客直播这种页面居多，可以看到其结构可以分成三层：① 背景视频层 ② 关注、评论模块 ③ 点赞动画

而现行H5类似直播页面，实现技术难点不大，其可以通过实现方式分为：① 底部视频背景使用video视频标签实现播放 ② 关注、评论模块利用 WebScoket 来实时发送和接收新的消息通过DOM 和 CSS3 实现 ③ 点赞利用 CSS3 动画

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

三、直播整体流程
直播整体流程大致可分为：

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

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

3.视频播放端：可以是电脑上的播放器（QuickTime Player、VLC），手机端的native播放器，还有就是 H5 的video标签等，目前还是以手机端的native播放器为主。

四、H5 录制视频
1. 使用 webRTC 录制视频基本流程
① 调用 window.navigator.webkitGetUserMedia() 获取用户的PC摄像头视频数据。
② 将获取到视频流数据转换成 window.webkitRTCPeerConnection (一种视频流数据格式)。
③ 利用 WebScoket 将视频流数据传输到服务端。

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

2. iOS原生应用调用摄像头录制视频流程
① 音视频的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。
② 对视频进行H264编码，对音频进行AAC编码，在iOS中分别有已经封装好的编码库（x264编码、faac编码、ffmpeg编码）来实现对音视频的编码。
③ 对编码后的音、视频数据进行组装封包。
④ 建立RTMP连接并上推到服务端。

五、搭建Nginx+Rtmp直播流服务
1. 安装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 的配置内容：

rtmp {server {#监听的端口listen 1935;# RTMP 直播流配置application rtmplive {live on;#为 rtmp 引擎设置最大连接数。默认为 offmax_connections 1024;}# HLS 直播流配置application hls{live on;hls on;hls_path /usr/local/var/www/hls;hls_fragment 1s;}}
}

② 在http中添加 hls 的配置

location /hls {  # Serve HLS fragments  types {  application/vnd.apple.mpegurl m3u8;  video/mp2t ts;  }  root /usr/local/var/www;  #add_header Cache-Controll no-cache;expires -1;}

3. 重启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

//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 44

3.FFmpeg推流命令

① 视频文件进行直播

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

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

ffmpeg -f avfoundation -framerate 30 -i "1:0" \-f avfoundation -framerate 30 -video_size 640x480 -i

小视频系统源码H5 直播起航相关推荐

大型商城系统源码 PC+小程序+APP源码+H5 全套源代码
大型多商户B2B2C商城源码 Java商城源码 PC+小程序+APP源码+H5+商家端+总后台开发环境:Java+springboot+Vue+Uni-app 一.平台端功能支持: • 系统设置 ...
Android短视频系统源码功能测试（个人总结完整版）
Android短视频系统源码功能测试包含短视频系统源码的安装卸载测试,界面测试,业务功能测试,短视频系统源码特性测试,交叉事件测试,兼容性测试,升级更新测试,消息通知测试,功能键测试,手势测试等 1- ...
小视频APP源码开发者对小视频平台的三个忠告
在这个短视频APP火爆的时代,小视频APP源码供不应求,无数人都想进来掺和一脚,因此无数短视频APP层出不穷,质量也是参差不齐,在此,我作为一个小视频APP开发人员,向各位想要开发短视频APP的朋友们 ...
仿抖音短视频系统源码，android 时间戳转换
仿抖音短视频系统源码,android 时间戳转换相关的代码 package util;import java.text.SimpleDateFormat; import java.util.Calen ...
小视频app源码，邻接矩阵实现图的相关代码
小视频app源码,邻接矩阵实现图的相关代码 /*Author:Albert Tesla WizardTime:2020/10/26 20:22 */#include<bits/stdc++.h& ...
小视频app源码，Android 滑动拼图验证码控件
小视频app源码,Android 滑动拼图验证码控件代码实现: 滑块视图类:SlideImageView.java.实现小视频APP源码随机选取拼图位置,对拼图位置进行验证等功能. public c ...
仿抖音短视频系统源码，获取系统图片
仿抖音短视频系统源码,实现获取系统图片的相关代码如下: 首先开权限 <uses-permission android:name="android.permission.WRITE_EX ...
短视频系统源码，布局旋转横屏竖屏
短视频系统源码,布局旋转横屏竖屏实现的相关代码横屏竖屏 *注意在setContentView()之前 if(this.getResources().getConfiguration().orie ...
短视频系统源码，检测在手机上的触摸按下、拖拽、抬手
短视频系统源码,检测在手机上的触摸按下.拖拽.抬手 var touch_pos = Vector2.ZERO # 触摸位置 var lift_up_pos = Vector2.ZERO # 抬手位置 ...

小视频系统源码H5 直播起航

小视频系统源码H5 直播起航相关推荐

最新文章

热门文章