海康威视RTSP摄像头转RTMP推流前端方案(浏览器兼容及权限验证)

  videojs的播放flv格式RTMP流需要浏览器运行flash插件,但是chrome现在已经不支持flash了,所以我们使用flvjs前端插件作为替代方案,并在流媒体服务器上加入了权限验证功能限制用户访问。


  此方案是基于上一节中的方案进行的优化,所以没有提及的地方和原方案保持不变。
一. 在nginx中安装nginx-http-flv-module插件
  有编译好的版本直接使用就行,然后修改nginx.conf文件。

#user  nobody;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

worker_processes  10;
events {
    worker_connections  10240;
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;
rtmp{
    out_queue 4096;
    out_cork 8;
    max_streams 128;
    timeout 2s;
    drop_idle_publisher 16s;
    log_interval 5s;
    log_size 1m;
    server{
     listen 1935;
     server_name localhost;
     application live{
         live on;
         gop_cache on;
         on_play http://localhost:8080/ROOT/admin/monitor/monitorAuth; # 播放请求验证接口
      }
     application hls{
      live on;
      hls on;
      hls_path E:/nginx/html/hls; 
    }
     application dash{
       live on;
       dash on;
       dash_path E:/nginx/html/dash;
     }
    
    }
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8002;
    server_name  localhost;
    location / {
        root   html;
        index  index.html index.htm;
    }
    location /live{
        flv_live on;
        chunked_transfer_encoding  on;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
    }
    location /hls{
        types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
         }
         root E:/nginx/html/hls;
         add_header 'Cache-Control' 'no-cache';
    }
     location /dash {
            root E:/nginx/html/dash;
            add_header 'Cache-Control' 'no-cache';
        }
    
     location /stat {
            #configuration of push & pull status
              rtmp_stat all;
              rtmp_stat_stylesheet stat.xsl;
         }
    location /stat.xsl {
      root E:/nginx/nginx-http-flv-module;
    }

     location /control {
            rtmp_control all; #configuration of control module of rtmp
        }   
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   E:/nginx/html;
        }
    }
}

路径配置

  路径配置按个人需求来就行,nginx的权限验证可以看官方文档
二. 使用flvjs插件播放流



单屏显示


    
    


你可能感兴趣的:(海康威视RTSP摄像头转RTMP推流前端方案(浏览器兼容及权限验证))