web对接海康威视rtsp视频流

最近项目需要对接海康威视的摄像头，兜兜转转摸索了一周，试了各种方法记录如下：

拿到海康威视摄像头，就到他们官网下载了sdk开发包，心里还想这个应该不会太难，毕竟海康也算大公司，各种对接方式应该都是成熟的，打开sdk包里面还是挺齐全的MFC、java、c#都有，依次调试里一下，都能对接成功，不过不是我想要web方式对接，都是C/S架构的，我想要的是B/S方式对接。

联系海康技术要了web3.0的开发包，基于ActiveX或者NPAPI插件，提供封装好的js接口。先安装\demo\codebase中WebComponentsKit.exe插件，之后打开\demo\cn中demo.html测试。

该控件开发包对浏览器版本有要求，具体看下注意事项中说明。

32位浏览器：

https://one.hikvision.com/#/link/JIlpt2mBpcwvkhj2MNXw 提取密码：c2wq

64位浏览器：

https://one.hikvision.com/#/link/YMBApRWUh0MYbul3YQeJ 提取密码：GT2c

注意事项：

1.支持的浏览器有：IE6~IE11、Chrome8~ Chrome42、Firefox3.5~ Firefox52（32位，64位是到Firefox40）、Safari5.0.2+，需要浏览器支持NPAPI。

2.我们这个插件是根据浏览器位数来的，比如说您64位电脑，使用的32位浏览器，则需要安装32位浏览器。如果出现已安装插件，但是仍旧提示未安装插件，可以将32位插件和64位插件都安装一下之后再用IE打开我们demo.html测试下，这个是不影响的。

3.我们WEB3.0控件开发包，登陆使用的是HTTP端口（默认80）.

可惜这种方式不支持高版本chrome浏览器，项目又是基于chrome浏览器开发的，基本放弃了ie，只能另外想办法解决！！！

利用vlc播放器把rtsp转http

在官网下载https://www.videolan.org

并安装

局域网内访问

            不支持

下载ffmpeg：https://ffmpeg.zeranoe.com/builds/

下载后解压

下载nginx.exe：https://github.com/illuspas/nginx-rtmp-win32

打开cmd运行

ffmpeg -re -i rtsp://admin:[email protected]:554/Streaming/Channels/101?transportmode=unicast -c copy -f flv rtmp://localhost:1935/live/room

浏览器显示，需要浏览器允许flash

playerOptions: {

                live: true,

                autoplay: true,

                fluid: true,

                notSupportedMessage: '暂时无法播放',

                controlBar: {

                    timeDivider: true,

                    durationDisplay: true,

                    remainingTimeDisplay: false,

                    fullscreenToggle: true // 全屏按钮

                },

                techOrder: ['flash'],

                flash: {

                    hls: { withCredentials: false }

                    // swf: SWF_URL // 引入静态文件swf

                },

                sources: [

                    {

                        // 流配置，数组形式，会根据兼容顺序自动切换

                        type: 'rtmp/mp4',

                        src: 'rtmp://localhost:1935/live/room'

                    }

                ]

            }

##########下面所有步骤均在centos7上进行########

1、nginx安装依赖

    yum install gcc

yum -y install zlib-devel              #zlib-devel：压缩依赖包

yum -y install openssl-devel          #openssl-devel：提供ssl/tls功能

yum -y install pcre-devel              #pcre-devle：支持地址重写rewrite

2、关闭selinux

查看 selinux 状态：/usr/sbin/sestatus -v

临时关闭（不用重启机器）：

setenforce 0            ##设置SELinux 成为permissive模式

##setenforce 1 设置SELinux 成为enforcing模式

修改/etc/selinux/config 文件

将SELINUX=enforcing改为SELINUX=disabled    重启机器即可

3、为nginx运行创建帐号、组

groupadd -r nginx

useradd -s /sbin/nolgoin -g nginx -r nginx

4、文件下载

下载rtmp流媒体插件

wget  https://github.com/arut/nginx-rtmp-module/archive/master.zip

下载nginx源码

wget http://nginx.org/download/nginx-1.14.2.tar.gz

5、编译nginx 将rtmp模块编译安装进nginx

cd /opt/nginx/nginx-1.14.2

[root@1-251 nginx-1.14.2]# ./configure \

> --add-module=/opt/rtmp/nginx-rtmp-module-master \  #rtmp模块

> --prefix=/usr/local/nginx \

> --conf-path=/etc/nginx/nginx.conf \

> --error-log-path=/var/log/nginx/erro.log \

> --pid-path=/var/run/nginx/nginx.pid \

> --lock-path=/var/lock/nginx.lock \

> --user=nginx \

> --group=nginx \

> --with-http_ssl_module \

> --with-http_stub_status_module \

> --with-select_module \

> --with-poll_module \

> --with-threads \

> --with-debug \

> --with-http_ssl_module \

> --with-http_v2_module \

> --with-http_gzip_static_module \

> --with-perl=/usr/local/bin \

> --http-client-body-temp-path=/var/tmp/nginx/client \

> --http-proxy-temp-path=/var/tmp/nginx/proxy \

> --http-fastcgi-temp-path=/var/tmp/nginx/fastcgi \

> --http-uwsgi-temp-path=/var/tmp/nginx/uwsgi \

>

6、编译完成

  nginx path prefix: "/usr/local/nginx"  #nginx 目录

  nginx binary file: "/usr/local/nginx/sbin/nginx" #nginx 命令目录

  nginx modules path: "/usr/local/nginx/modules" #nginx 模块目录

  nginx configuration prefix: "/etc/nginx" #nginx 配置文件目录

  nginx configuration file: "/etc/nginx/nginx.conf" #nginx 配置文件路径

  nginx pid file: "/var/run/nginx/nginx.pid" #nginx PID文件

  nginx error log file: "/var/log/nginx/erro.log" #nginx 错误日志文件

  nginx http access log file: "/usr/local/nginx/logs/access.log" #nginx 访问日志

  nginx http client request body temporary files: "/var/tmp/nginx/client" #nginx 请求文件位置

  nginx http proxy temporary files: "/var/tmp/nginx/proxy" #nginx 代理文件位置

  nginx http fastcgi temporary files: "/var/tmp/nginx/fastcgi" #nginx fastcgi 协议

  nginx http uwsgi temporary files: "/var/tmp/nginx/uwsgi" #nginx uwsgi（python）协议

  nginx http scgi temporary files: "scgi_temp" #nginx scgi协议

7、安装nginx

make && make install

8、mkdir /var/tmp/nginx

9、启动nginx

指定配置文件启动

/usr/local/nginx/sbin/nginx -c /etc/nginx/nginx.conf 

重新加载配置文件

/usr/local/nginx/sbin/nginx  -s reload

重启|关闭

/usr/local/nginx/sbin/nginx  stop|start

10、测试访问

http://192.168.1.251

11、安装ffmpeg

11.1 安装ffmpeg依赖

sudo yum install epel-release -y

sudo yum update -y

sudo shutdown -r now

11.2、安装Nux Dextop YUM repo

sudo rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro

sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm

11.3、安装ffmpeg

sudo yum install ffmpeg ffmpeg-devel -y

11.4、测试ffmpeg是否安装成功

[root@1-251 opt]# ffmpeg

ffmpeg version 2.8.15 Copyright (c) 2000-2018 the FFmpeg developers  #ffmpeg 版本

  built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-36) #gcc 版本

  configuration: --prefix=/usr --bindir=/usr/bin --datadir=/usr/share/ffmpeg --incdir=/usr/include/ffmpeg --libdir=/usr/lib64 --mandir=/usr/share/man --arch=x86_64 --optflags='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic' --extra-ldflags='-Wl,-z,relro ' --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libvo-amrwbenc --enable-version3 --enable-bzlib --disable-crystalhd --enable-gnutls --enable-ladspa --enable-libass --enable-libcdio --enable-libdc1394 --enable-libfdk-aac --enable-nonfree --disable-indev=jack --enable-libfreetype --enable-libgsm --enable-libmp3lame --enable-openal --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libvorbis --enable-libv4l2 --enable-libx264 --enable-libx265 --enable-libxvid --enable-x11grab --enable-avfilter --enable-avresample --enable-postproc --enable-pthreads --disable-static --enable-shared --enable-gpl --disable-debug --disable-stripping --shlibdir=/usr/lib64 --enable-runtime-cpudetect

  libavutil      54. 31.100 / 54. 31.100

  libavcodec    56. 60.100 / 56. 60.100

  libavformat    56. 40.101 / 56. 40.101

  libavdevice    56.  4.100 / 56.  4.100

  libavfilter    5. 40.101 /  5. 40.101

  libavresample  2.  1.  0 /  2.  1.  0

  libswscale      3.  1.101 /  3.  1.101

  libswresample  1.  2.101 /  1.  2.101

  libpostproc    53.  3.100 / 53.  3.100

Hyper fast Audio and Video encoder

usage: ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}...

Use -h to get full help or, even better, run 'man ffmpeg'

#出现上面的信息说明ffmpeg安装成功

#安装目录            --prefix=/usr

#执行目录    --bindir=/usr/bin

#数据目录            --datadir=/usr/share/ffmpeg

#包含目录            --incdir=/usr/include/ffmpeg

#依赖库目录          --libdir=/usr/lib64

#man手册目录   --mandir=/usr/share/man

#......   .............

12、配置nginx rtmp

[root@1-251 ~]# cat /etc/nginx/nginx.conf

#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 config

rtmp {

server {

listen 1935;

chunk_size 4096;

application live {

live on;

}

application hls {

live on;

hls on; 

hls_path /usr/local/nginx/html/hls; 

hls_fragment 8s; 

}

}

}

http {

include      mime.types;

default_type  application/octet-stream;

sendfile        on;

keepalive_timeout  65;

#gzip  on;

server {

listen      80;

server_name  localhost;

location / {

root  html;

index  index.html index.htm;

}

location /stat {

rtmp_stat all;

rtmp_stat_stylesheet stat.xsl;

}

location /stat.xsl {

root /opt/rtmp/nginx-rtmp-module-master;

}

location /hls { 

#server hls fragments 

types { 

application/vnd.apple.mpegurl m3u8; 

video/mp2t ts; 

} 

alias /usr/local/nginx/html/hls; 

expires -1; 

}

# redirect server error pages to the static page /50x.html

#

error_page  500 502 503 504  /50x.html;

location = /50x.html {

root  html;

}

}

}

官网地址https://streamedian.com/

安装server并运行，弹出运行界面

先注册账号，先下载个免费的license

到C:\Program Files\Streamedian\WS RTSP Proxy Server\activation_app并运行

获取到激活码

根据提示步骤输入注册账号里面的key

在线激活失败，也可以选择离线激活，稍麻烦点，但也不难，我都能看的懂的英文，相信也难不住大家（😊）

浏览器显示

export default {

    mounted() {

        this.init()

    },

    methods: {

        init() {

            if (window.Streamedian) {

                let errHandler = function(err) {

                    console.info(err.message)

                }

                let infHandler = function(inf) {

                    console.info(inf)

                }

                var playerOptions = {

                    socket: 'ws://localhost:8088/ws/',

                    redirectNativeMediaErrors: true,

                    bufferDuration: 30,

                    errorHandler: errHandler,

                    infoHandler: infHandler

                }

                var html5Player = document.getElementById('videoId')

                // player.destroy()

                // player = null

                html5Player.src = 'rtsp://admin:[email protected]:554/Streaming/Channels/101?transportmode=unicast'

                // player = Streamedian.player(this.videoId, playerOptions)

                var player = Streamedian.player('videoId', playerOptions)

            }

        }

    }

}

参考文章：https://blog.csdn.net/u012902367/article/details/93714393