RTMP协议视频流页面即时加载及录像方法

1. 准备RTMP服务器

使用牛人开发的Nginx-http-flv工具作为rtmp流的服务器。作者将该工具与原生Nginx做了合并，并编译通过，可以直接下载使用，提供下载链接。
下载地址 链接：https://pan.baidu.com/s/1PL1YBqUhpvvYb_4nL9KEQw
提取码：31r5
配置如下所示：

#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服务
rtmp {
    server {
        listen 1935;           #rtmp服务器地址
        application myapp {         
            live on;
            recorder all {
                record all manual;          #根据请求进行录像
                record_suffix -%Y-%m-%d-%H_%M_%S.flv;       #录像格式
                record_path D:/nginx/HS/nginx-http-flv-merge/html/data/rtmp;     #录像存储地址
            }
        }
    }

}


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/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
    map $http_upgrade $connection_upgrade {
      default upgrade;
      ''   close;
    }


    server {
        listen       8860;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        

        location / {
            root   html;
            index  index.html index.htm;
        }
        
        
        location /control {
            rtmp_control all;     #开启rtmp控制功能
        autoindex on;
        expires -1;
        add_header Cache-Control no-cache;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        
        
        location /live {
            flv_live on;        #开启flv转化功能
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
            add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
            add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            add_header 'Cache-Control' 'no-cache';
        }

}

启动NGINX，直接撞击EXE即可。

2. 准备RTMP流

还是采用OBS进行推流，具体用法可以参考作者之前的文章，传送门:使用OBS-Studio软件推流直播教程，支持RTMP及RTSP两种协议

3. 页面加载

提供一个demo工程，只需要修改下URL地址即可
链接：https://pan.baidu.com/s/1HHEFJNOq61rbO8D7Ozmx9A
提取码：fibw

http://localhost:8860/live?port=1935&app=myapp&stream=H264_ACC_test1

其中myapp是NG中配置的rtmp的应用名称，H264_ACC_test1为OBS推流设置中的串流密钥，如下图所示：

image.png

到此，rtmp流就可以在页面进行加载显示了。

4. RTMP录像功能

开始录制

curl "http://localhost:8860/control/record/start?app=myapp&name=H264_ACC_test1&rec=all"

结束录制

curl "http://localhost:8860/control/record/stop?app=myapp&name=H264_ACC_test1&rec=all"

本文发现一个问题，使用这种方式录制的MP4或flv格式的视频文件，通过NG代理出来，前端页面无法加载，发现是视频缺少属性信息，录制结束以后，采用FFMPEG进行视频格式的转换，是可以进行NG代理后在页面加载显示的。那位大牛如果发现有直接转MP4，并且能页面加载的话，可以告诉我一下，相互学习。