web对接海康威视rtsp视频流

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

一，利用海康威视提供web3.0控件开发包

拿到海康威视摄像头，就到他们官网下载了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

利用vlc播放器把rtsp转http

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

并安装

运行界面

选择流处理

输入rtsp视频流连接地址，点击串流

选择HTTP，点击添加

设置端口和访问路径，点击下一个

选择第五个，点击下一个

勾选串流所有基本流，点击流

显示如图代表成功

局域网内访问

<div class="video-js">

        <video src="http://localhost:8080/video" class="video-player vjs-custom-skin" controls="controls">

            不支持

        </video>

    </div>

三，ffmpeg+Nginx(windows配置)

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

点击下载

下载后解压

把bin目录配置到环境变量

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

直接运行就可以

打开cmd运行

ffmpeg -re -i rtsp://admin:a1234567@192.168.1.227:554/Streaming/Channels/101?transportmode=unicast -c copy -f flv rtmp://localhost:1935/live/room

这种状态就代表成功了

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

<div class="video-js">

        <video-player class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions" />

</div>

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'

                    }

                ]

}

显示效果

四，ffmpeg+Nginx( Linux配置)

##########下面所有步骤均在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

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;

}

}

}

五，Streamedian

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

下载server

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

http://127.0.0.1:8088/

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

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

点击Try it

获取到激活码

后面会用到key

输入1回车，在线激活

输入注册邮箱和密码

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

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

浏览器显示

<template>

    <div class="video-js">

        <video id="videoId" class="video-player vjs-custom-skin" controls autoplay></video>

    </div>

</template>

<script>

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:a1234567@192.168.1.227:554/Streaming/Channels/101?transportmode=unicast'

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

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

            }

        }

    }

}

</script>

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