基于nginx-rtmp-module实现的直播项目小结

由于项目需要接入视频监控，所以先行了解了一些这方面的知识。虽然通过谷歌老师找到了许多教程，但在自己实践的过程中还是难免有一些坎坷。这里做一下简单的记录。由于视频监控平台可能无法直接提供rtmp或hls协议的视频流，所以后期可能还会涉及到使用ffmpeg拉流、转换视频流再推流的工作。

nginx视频模块介绍

项目地址：nginx-rtmp-module，认真看下readme.md就能大致了解使用方式；详细的安装步骤可以参考国外这位老哥的文章：How to Install Nginx with RTMP Module on CentOS 7

测试工具介绍

OBS：直播软件，目前只用到了推视频流到服务用来验证效果；
VLC：播放视频用的，这次用到了rtmp、hls协议的播放，官网地址：www.videolan.org；

播放协议介绍

copy from open.hikvision.com/docs/37e388…

协议名称	详细介绍
RTSP	实时串流协议（Real Time Streaming Protocol，RTSP）是一种网络应用协议，专为娱乐和通信系统的使用，以控制流媒体服务器。该协议用于建立和控制终端之间的媒体会话。媒体服务器的客户端发布VCR命令，例如播放，录制和暂停，以便于实时控制从服务器到客户端（视频点播）或从客户端到服务器（语音录音）的媒体流。
RTMP	实时消息协议（英语：Real-Time Messaging Protocol，缩写RTMP）也称实时消息传输协议，是最初由Macromedia为通过互联网在Flash播放器与一个服务器之间传输流媒体音频、视频和数据而开发的一个专有协议。
HLS	HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。
RTP	实时传输协议（Real-time Transport Protocol或简写RTP）是一个网络传输协议，它是由IETF的多媒体传输工作小组1996年在RFC 1889中公布的。

nginx 配置

rtmp {
    server {
        listen 1935;
        chunk_size 4096;
        # rmtp 协议播放
        application myapp {
            live on;
        }
        # hls协议播放
        application show {
            live on;
            hls on;
            hls_path /data/hls/; # 视频文件存放位置
            hls_fragment 5s;
            hls_playlist_length 60;
            deny play all;
        }
    }
}
http {
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        access_log  /var/log/nginx/host.access.log  main;
        
        # 查看stat
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
        # stat.xsl 文件要从nginx-rtmp-module源码目录中cp到html目录下面
        location /stat.xsl {
            root html;
        }
        
        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /data;# 与上面hls配置的root要对应，不然视频文件就404了
            add_header Cache-Control no-cache;

        }
    }
复制代码

浏览器播放hls视频

前端是基于videojs实现的视频播放；7.0之前的版本似乎是不支持hls协议播放的，所以在7.0之前是另外一个工具：videojs-contrib-hls

demo.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>video</title>
    <link rel="stylesheet" href="https://vjs.zencdn.net/7.0.0/video-js.css">
    <script src="https://vjs.zencdn.net/7.0.0/video.min.js"></script>
</head>
<body>
<video id="test_video" controls preload="none" width="640" height="480"
      class="video-js  vjs-big-play-centered vjs-fluid "
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
    <source src="http://119.3.193.218/hls/test.m3u8" type='application/vnd.apple.mpegurl' />
</video>
<script type="text/javascript">
    var myPlayer = videojs('test_video'); // video 标签中的ID
    myPlayer.ready(function(){
        myPlayer.play(); 
    });
</script>
</body>
</html>
复制代码

期间遇到的一些问题

刚开始看网络的教程，将hls的http端口配置成8080，结果服务器上安全组没有开放8080端口，查了好久；
用html自带的video标签是没法播放视频的，也是测试了好久才改用video.js来播放;
demo.html在测试的时候是作为本地文件打开存在跨域的问题导致一直没有播放成功，上传到服务器后得以解决。