视频推流
为了产生HLS视频，咱们能够借助srs来实现rtmp推流并生成HLS流，具体具体应用能够参考我之前的文章，这里不再赘述。
咱们要实现web端播放传统的音视频，最重要的实现就是rtmp实时视频推送至srs集群，为了演示我这里只启动一个srs简略利用，重点放在web端播放相干技术的解说，对于srs实时视频推送一块，我在《SRS直播集群计划》一文曾经做了很具体的介绍，这里不再赘述。
首先，咱们能够应用ffmpeg或者obs采集本地视频并推送到srs协转服务中，这里我应用obs进行采集与推送（ffmpeg每次都须要敲命令），关上obs=>起源一栏增加“视频捕捉设施”=>右下角“设置”，具体如图下所示。
为了生成HLS流，咱们须要配置srs开启HLS直播，该配置如下：
listen 1935;
max_connections 1000;
srs_log_tank file;
srs_log_file ./objs/srs.log;
http_api {
enabled on;
listen 1985;
}
http_server {
enabled on;
listen 8080;
dir ./objs/nginx/html;
}
stats {
network 0;
disk sda sdb xvda xvdb;
}
vhost __defaultVhost__ {
gop_cache off;
queue_length 10;
min_latency on;
mr {
enabled off;
}
mw_latency 100;
tcp_nodelay on;
hls {
enabled on;
hls_fragment 1;
hls_window 6;
hls_path ./objs/nginx/html;
hls_m3u8_file [app]/[stream].m3u8;
hls_ts_file [app]/[stream]-[seq].ts;
hls_cleanup on;#是否清理过期ts文件片
hls_dispose 5;#清理过期文件工夫
}
}这里的几个重要参数我感觉还是要略微阐明一下的：
- hls_fragment：秒，指定 ts 切片的最小长度。实际上 ts 文件的长度由以下公式决定：
ts文件时长 = max(hls_fragment, gop_size)
hls_fragment：配置文件中的长度。譬如：5秒。
gop_size：编码器配置的 gop 的长度，譬如 ffmpeg 指定fps为20帧/秒，gop为200帧，则gop_size=gop/fps=10秒。
那么，最终ts的时长为max(5, 10) = 10秒。这也是为什么有些流配置了hls_fragment，
然而ts时长依然比这个大的起因。- hls_td_ratio：倍数。管制 m3u8 的 EXT-X-TARGETDURATION，参考 Rewrite HLS写入ts局部
- hls_aof_ratio：倍数。纯音频时，当 ts 时长超过配置的 hls_fragment 乘以这个系数时就切割文件。例如，但hls_fragment 是 10 秒，hls_aof_ratio 是 2.0 时，对于纯音频，10s*2.0=20秒时就切割 ts 文件。
- hls_window：秒，指定 HLS 窗口大小，即 m3u8 中 ts 文件的时长之和，超过总时长后，抛弃第一个 m3u8 中的第一个切片，直到 ts 的总时长在这个配置项范畴之内。即 SRS 保障上面的公式
hls_window >= sum(m3u8中每个ts的时长)- hls_cleanup：是否删除过期的 ts 切片，不在 hls_window 中就是过期。能够敞开革除 ts 切片，实现时移和存储，应用本人的切片管理系统。
- hls_dispose：HLS 清理的过期工夫（秒），零碎重启或者超过这个工夫时，清理 HLS 的所有文件，包含 m3u8 和 ts。默认为 0，即不清理。
- hls_wait_keyframe：是否按 gop 切片，即期待到关键帧后开始切片。测试发现 OS X 和 android 上能够不必按 gop 切片。
启动srs
./objs/srs -c srs/conf
tailf ./objs/srs.logobs开始推送流
应用vlc测试rtmp
rtmp://192.168.12.187:1935/live/1
应用vlc测试HLS
能够看到rtmp和hls都能够点播，那么接下来的工夫咱们就基于这两条流开发web前端的页面来点播视频。
H播放HLS
对于HLS点播的第一种形式，咱们web前端H5页面咱们能够应用hls.min.js库来实现web端的点播。
该库依照我以上的配置提早大略在7s左右，为升高延时能够适当调整如下参数：
- hls_fragment和hls_window为较小的值
hls_fragment为ts片段大小，每一个ts文件大小，尽量设置小点以便一个ts文件不需期待太长时间就生成且疾速下载；ts文件大小与hls_fragment和gop无关，ts文件时长取两者最大值，所以gop的i帧距离在采集端也尽量小点。
- gop大小调小
正如下面剖析到，ts文件大小与gop无关，采集端能够升高改值，如果GOP过大服务器端的缓存也会变大
- h264 编码应用 H.264 baseline profile，缩小编码时耗费的工夫。
- 音频尽量应用AAC-LC Codec，这样会缩小编码时耗费的工夫。
hls.min.js库的应用如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>H5播放m3u8文件</title>
</head>
<body>
<script src="js/hls.min.js"></script>
<video id="video" style="width:500px;height: 300px; border: 1px solid red;">
测试
</video>
<script>
if (Hls.isSupported()) {
// 获取 video 标签
var video = document.getElementById('video');
// 实例化 Hls 对象
var hls = new Hls();
// 传入门路
hls.loadSource('http://192.168.12.187:8080/live/1.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play(); // 调用播放 API
});
} else {
alert("不反对HLS");
}
</script>
</body>
</html>通过测试该库的播放十分晦涩，提早通过调整仍然放弃在7s左右。
源码获取、单干、技术交换请获取如下联系方式：
QQ交换群：961179337
微信账号：lixiang6153
公众号：IT技术快餐
电子邮箱：lixx2048@163.com
发表回复