H5视频之直播流服务搭建（一）

转自https://blog.csdn.net/qq_40816360/article/details/84037877

继上次制作了RTMP直播源之后，因为互联网更常用的是HLS源和HTTP-FLV，所以这次又制作了HLS源

所需条件：
安装过程请看：https://blog.csdn.net/qq_40816360/article/details/83999836

nginx-rtmp-module（带rtmp模块） ，链接：https://link.jianshu.com/?t=http%3A%2F%2Fnginx-win.ecsds.eu%2Fdownload%2Fnginx%201.7.11.3%20Gryphon.zip

ffmpeg，链接：https://pan.baidu.com/s/1XItEYzDjpGrkAUinBwQTUw
提取码：o0fg

VLC播放器，https://www.videolan.org/

遇到的困难
    而这次遇到比较麻烦的问题是，根据上次的nginx.conf配置，添加了application hls并推流之后，虽然可以生成M3U8文件和相关的ts文件，但是却无法用http://localhost:8765/hls/movie.m3u8形式进行VLC的观看，但是用rtmp://localhost:1935/hls/movie进行观看，实在是非常不懂，一直觉得是配置的问题，但是就是无法找出什么地方不行，后来直接更换nginx的nginx.conf配置，如下：
 

#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;
        chunk_size 4000;

        #RTMP
        application myapp {
            live on;
        } 

        #HLS
        # For HLS to work please create a directory in tmpfs (/tmp/app here)
        # for the fragments. The directory contents is served via HTTP (see
        # http{} section in config)
        #
        # Incoming stream must be in H264/AAC. For iPhones use baseline H264
        # profile (see ffmpeg example).
        # This example creates RTMP stream from movie ready for HLS:
        #
        # ffmpeg -loglevel verbose -re -i movie.avi  -vcodec libx264 
        #    -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 
        #    -f flv rtmp://localhost:1935/hls/movie
        #
        # If you need to transcode live stream use 'exec' feature.
        #
        application hls {
            live on;
            hls on;
            hls_path hls;
            hls_fragment 5s;
        }
    }
}

http{
    server {
        listen 8765;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        location /hls {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            alias hls;
            expires -1;
            add_header Access-Control-Allow-Origin *;
        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }
        
    }
}

这个配置可以进行推rtmp流，也可以推hls的流

解释：

在rtmp模块中，增加了hls的application，hls_path表示的是推流生成的m3u8和ts文件的存放路径，例如：我的文件夹是D:/nginx/hls ，这个hls文件夹是我自定义的，D:/nginx是nginx的根目录。
在http中，增加一个访问地址，location hls ，里面的alias hls，就代表了在访问localhost:8765/hls（location）的时候，他会指向hls（alias）的文件夹，可以看location /的地址，它的root是html，表明你输入localhost:8765的时候他就进入Html文件夹，你就可以看到那个nginx启动成功页面
推rtmp流：
ffmpeg -re -i test.mp4 -vcodec libx264 -acodec aac -strict -2 -f flv rtmp://localhost:1935/myapp/pc
参数在rtmp博文中已有介绍

验证rtmp流推送情况：
vlc播放器输入：rtmp://localhost:1935/myapp/pc

推HLS流：
ffmpeg -loglevel verbose -re -i test.mp4 -vcodec libx264 -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://localhost:1935/hls/movie

验证HLS流推送情况：
vlc播放器输入：http://localhost:8765/hls/movie.m3u8 或者Safari浏览器打开此地址
解释：
1、http://localhost:8765/hls 会指向nginx/hls文件夹
2、movie.m3u8 是动态更新的m3u8文件
打开nginx目录下的hls文件夹，你可以看到m3u8和ts文件一直在不断更新

注意：跨域问题
在nginx.conf中要配置跨域，add_header Access-Control-Allow-Origin *;
这样就不会在video.js或其他播放器下无法访问

使用video.js播放hls直播源
注意：如果直接打开页面不行，就尝试下放下服务器环境下打开