实时视屏播放的简单实现

通过使用nginx搭建一个简单的服务器，使用ffmpeg推送rtmp实时流，利用video标签实现可以在web端和手机端的浏览器中进行直播。

Windows下面搭建基于rtmp的服务器

硬件环境

操作系统：windows7旗舰版

处理器：Intel(R) Core(TM)i5-5200 CPU @2.20GHz 2.20 GHz

系统内存： 8GB

系统类型：64位操作系统

软件环境及配置

下载 nginx 1.7.11.3 Gryphon，然后解压到对应的目录，此处为D:\Program Files；
下载链接-Gryphon.zip

将解压后的目录名:nginx 1.7.11.3 Gryphon改成:nginx-1.7.11.3-Gryphon
下载服务器状态检查程序 stat.xsl

下载地址
将nginx-rtmp-module-master.zip解压后复制到目录:nginx-1.7.11.3-Gryphon中。

保证stat.xls的目录为:nginx-1.7.11.3-Gryphon\nginx-rtmp-module\stat.xsl

修改conf\nginx-win.conf 配置文件。

Nginx可以支持多虚机配置，如果是一个ip或域名多虚机的情况，就是要不同的虚机对应不同的端口服务，而如果是多ip或域名一个虚机的情况，则又不一样。这里的实际情况就是，80分别对应一个http协议的虚机，1935对应一个rtmp协议的虚机。

添加rtmp服务。

rtmp {
 server {
     listen 1935;
     chunk_size 4000;
     application hls{
         live on ; #启用rtmp直播
                   #地址为rtmp://[server]:[rtmp_port]/[app]/[stream]
         hls on ;  #启用hls直播
                   #地址为地址为http://[server]:[http_port]/[app]/[stream].m3u8
         hls_path html/hls; #此处hls需手动在html文件夹下面创建，否则程序会报错
         hls_fragment 5s;
         recorder rec { #启用录制
         	record all manual; #手动控制录制启停
         	record_suffix _rec.flv;
         	record_path nginx-rtmp-module/tmp/rec/; #录制保存地址
         	record_unique on;
         } 			
     }
  }
}

配置http server

server {
    listen       80;
    # server_name  localhost;
    location /stat {
    #	rtmp_stat all;
    #	rtmp_stat_stylesheet stat.xls;
    #}
    #location /stat.xls {
    #	root nginx-rtmp-module/;
    #}
    #location /control {
    #	rtmp_control all;
    #}
    location /hls {  
        # Serve HLS fragments  
        types {  
            application/vnd.apple.mpegurl m3u8;  
            video/mp2t ts;  
        }  
        root html;  
        expires -1;  
    }

启动服务器

在nginx.exe所在的文件夹，按住shift+右键，选中在此处打开命令窗口，进入windows的cmd。输入以下命令启动nginx服务：

1	nginx.exe -c conf\nginx-win-.conf

. 启动结果

avatar

直接在浏览器里输入127.0.0.1就可以进入浏览器的欢迎界面

ubuntu搭建推流服务器Nginx+rtmp

提供rtmp直播源

在搭建好基于rtmp的服务器之后，需要提供rtmp直播源。这里我们使用的香港卫视的rtmp直播源。根据nginx.conf中的hls_path配置，下面这个命令会向本地的D:\Program Files\nginx-1.7.11.3-Gryphon\html\hls下面写入ts片段和m3u8文件。

ffmpeg -re -analyzeduration 8000 -probesize 200000 -i "rtmp://live.hkstv.hk.lxdns.com/live/hks" -strict -2 -bsf:a aac_adtstoasc -c copy -flvflags aac_seq_header_detect -f flv rtmp://localhost/hls/mystream

注意

1、这里提供rtmp源的机器不一定和nginx在同一台物理主机上，可以是网络上的另一台机器，只要保证它能与nginx所在的主机建立tcp链接即可。（也就是nginx主机需要开启rtmp服务的监听端口，这里是1935，当然你也可以修改为其他的端口。）

2、ffmpeg下载地址

在网页中展示视屏

在nginx-1.7.11.3-Gryphon/html目录下面创建一个live.html。

<html>
<head>
    <link rel="stylesheet" href="http://vjs.zencdn.net/5.10/video-js.css">
</head>
    <video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls autoplay=true>
        <source src="hls/mystream.m3u8" type="application/x-mpegURL">
    </video>
    <script src="http://vjs.zencdn.net/5.10/video.js"></script>
   	<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.14.1/videojs-contrib-hls.min.js"></script>
   </script>
    <script>
        var player = videojs('example-video');
        player.play();
    </script>
</html>

如果只是用video标签是无法播放.m3u8的视屏文件的，需要引入videojs-contrib-hls.js。videojs-contrib-hls支持一堆HLS功能，详情参考[https://www.cnblogs.com/tinywan/p/6692098.html]

web端运行效果
手机端运行效果

手机端如果与web可以在同一个网络环境中，那么输入对应本机ip地址也是可以查看的，并且支持横屏、竖屏的切换。

avatar

其他

防火墙打开了1935 tcp端口，rtmp视屏还是不能播放，

可以用下面的命令暂停，
systemctl stop firewalld.service

[参考博文]

1、使用Nginx-rtmp-module搭建hls直播