Windard +
Github Zhihu RSS

Mac 上搭建 hls 视频流直播

安装 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/*;
}

主要在这几个部分

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 文件,不知为何。

参考链接

直播原理与web直播实战


headlogo   Windard

但行好事,莫问前程

Blog

Opinion

Project

页阅读量:  ・  站访问量:  ・  站访客数: