海康威视摄像头视频在web端播放FFmpeg + nginx-http-flv-module + flv.js（无需安装插件）

前序工作

下载VLC播放器(用于测试视频流是否可以播放)www.videolan.org/
下载ffmpeg

一、获取海康摄像头的视频流（基于RTSP协议的视频流）

(一)、获取rtsp流地址

海康流格式rtsp://username:password@[ip]:[port]/[videotype]/ch[number]/[streamtype]

例：rtsp://admin:dhht@123@10.0.8.173:554/h264/ch33/main/av_stream

流格式详情见海康摄像头rtsp流格式说明

(二)、测试rtsp流地址是否正确

打开VLC -> 媒体 -> 打开网络串流，把rtsp地址填进去，点击播放，测试能否正常播放

二、流媒体服务器搭建

(一)搭建流媒体服务器

为了最终将rtmp转为支持HTTP方式的flv，需要重新编译nginx，集成nginx-http-flv-module模块，此过程较为复杂，可直接取已经集成好的

传送门：pan.baidu.com/s/1wJrKAP6H… 提取码：n633

(二)配置nginx

解压后打开conf/nginx.conf，配置文件如下。配置完成后，在文件夹中找到nginx.exe，双击启动。

#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; # 监听端口         
        chunk_size 4000;        
        application live {            
            live on;      
            gop_cache on;        
        }    
    }
}


http {    
    include       mime.types;    
    default_type  application/octet-stream;    
    #access_log  logs/access.log  main;     
    server {        
        listen       8080; # 监听端口         
        server_name   localhost;    
        location /stat.xsl {            
            root html;        
        }    
        location /stat {            
            rtmp_stat all;           
            rtmp_stat_stylesheet stat.xsl;        
        }    
        location / {            
            root html;        
        }    
        location /live {      
            flv_live on;            
            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';        
        }    
    }
}

三、使用ffmpeg将rtsp源转为http-flv源

(一)下载并配置ffmpeg

将下载下来的ffmpeg文件解压到你想安装的目录下，我的安装目录是，E:\ffmpeg-n4.4.1-2-gcc33e73618-win64-gpl-4.4。然后右键我的电脑->属性->高级系统设置->环境变量->系统变量，在系统变量中找到path，选择编辑，将ffmpeg的bin目录的路径加进去，如图

配置完成后，可用命令行验证是否安装成功，输入ffmpeg，若如下所示，说明配置成功。

(二)用ffmpeg进行转码+推流

1、ffmpeg转码命令如下，在cmd中输入转码命令，即可将rtsp流转换为http-flv源，注意要先打开nginx再推流。

ffmpeg -re  -rtsp_transport tcp -i "rtsp://admin:dhht@123@10.0.8.173:554/h264/ch33
/main/av_stream?transportmode=unicast" -f flv -vcodec h264 -vprofile baseline -acodec aac 
-ar 44100 -strict -2 -ac 1 -f flv -s 640*360 -q 10 "rtmp://localhost:1935/live/room"

这条指令中有两个url，第一个是rtsp视频流的地址，第二个是接收rtmp流的流媒体服务器地址

2、http-flv流地址格式为：

http://ip[:httpport]/dir?[rtmpport=xxx&]app=appname&stream=streamname

例：http://localhost:8080/live?port=1935&app=live&stream=room

github上的解释：

推流完成后可以用vlc检验一下http-flv视频源是否正常播放即可。

四、前端使用flv.js播放

(一)拉流播放(flv.js)

reflv 是对 flv.js 的 react 组件封装。

1、安装reflv：yarn add reflv

2、引入reflv：import Reflv from 'reflv';

3、使用reflv

<Reflv      
    key="http://localhost:8080/live?port=1935&app=live&stream=room"      
    url="http://localhost:8080/live?port=1935&app=live&stream=room"      
    type="flv"      
    islive=""      
    cors=""
></Reflv>