Mac 上搭建 hls 视频流直播
2019-08-10
安装 Nginx
不能直接安装 Nginx ，需要安装 nginx-full ，带上 rtmp 的扩展
brew tap denji/homebrew-nginx
brew install nginx-full --with-rtmp-module
配置 Nginx
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
rtmp {
server {
#监听的端口
listen 1935;
# RTMP 直播流配置
application rtmplive {
live on;
#为 rtmp 引擎设置最大连接数。默认为 off
max_connections 1024;
}
# HLS 直播流配置
application hls{
live on;
hls on;
hls_path /usr/local/var/www/hls; #这里的路径切片需要保存的路径
hls_fragment 1s;
}
}
}
http {
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log logs/http_access.log main;
error_log logs/http_error.log error;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
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;
add_header 'Access-Control-Allow-Origin' '$http_origin';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
include servers/*;
}
主要在这几个部分
- 配置 rtmp 的反向代理，端口为 1935, 数据流的存储位置在
/usr/local/var/www/hls - 配置 http 的 hls 路由
- 增加日志配置，定位异常，我的日志地址在
/usr/local/Cellar/nginx-full/1.17.2/logs - 增加 CORS 响应头，如果页面和数据在同一个域名和端口下则不需要
ffmepg
使用 ffmepg 推数
rtmp 协议数据
ffmpeg -re -i /Users/youname/Desktop/w01661pl9vw.p702.1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/rtmplive/home
如果推数成功之后可以使用 mpv 查看或者使用前端网页
mpv rtmp://127.0.0.1:1935/rtmplive/home
网页源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://cdn.bootcss.com/video.js/7.6.0/video-js.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/7.6.0/video.min.js"></script>
</head>
<body>
<video
id="my-player"
class="video-js"
controls
preload="auto"
data-setup='{}'>
<source src='rtmp://127.0.0.1:1935/rtmplive/home' type='rtmp/flv'/>
</p>
</video>
<script type="text/javascript">
var player = videojs('my-player');
var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
// In this context, `this` is the player that was created by Video.js.
this.play();
// How about an event listener?
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
</script>
</body>
</html>
因为 flash 的原因看不了。。。
hls 协议推数
ffmpeg -re -i /Users/youname/Desktop/w01661pl9vw.p702.1.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://127.0.0.1:1935/hls/test
同样可以使用 mpv 或者网页打开
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<!-- <source src="http://www.tony.com/hls/test.m3u8" type="application/x-mpegURL"> -->
<source src="http://127.0.0.1:8080/hls/test.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>
使用推数的方式都只能看直播，推数结束即没有数据，而且服务器上也只存储少量数据。
可以将视频先压制，保存目录为 hls 所在目录
ffmpeg -i input.mp4 -g 60 -hls_time 2 -hls_list_size 0 playlist.m3u8
但是我的电脑上好像默认值保存最后的 50 份ts 文件，不知为何。
参考链接
本文固定链接：https://windard.com/opinion/2019/08/10/HLS-IN-MAC
原创文章,转载请注明出处：Mac 上搭建 hls 视频流直播 By Windard
