1. 前言

        需求：web端实现海康摄像头实时预览效果

        由于市面上大部分网络摄像头都支持RTSP协议视频流，web端一般无法直接使用RTSP实现视频预览，本篇使用ffmpeg对视频流进行转换，最终实现web端实时预览。

        工具介绍：ffmpeg、nginx、vue

2. nginx

        介绍：高性能的http和反向代理web服务器，同时提供了IMAP、POP3、SMTP服务。

2.1. 安装nginx依赖

2.1.1. pcre

        下载地址若失效可自行去网上找

wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
tar -zxvf pcre-8.35.tar.gz
cd pcre-8.35
./configure
make
sudo make install

2.1.2. zlib

若链接失效跳转官方https://zlib.net/

wget http://zlib.net/zlib-1.2.13.tar.gz
tar -zxf zlib-1.2.13.tar.gz
cd zlib-1.2.13
./configure
make
sudo make install

2.1.3. openssl

wget http://www.openssl.org/source/openssl-fips-2.0.10.tar.gz
tar -zxvf openssl-fips-2.0.10.tar.gz
cd openssl-fips-2.0.10
./config && make && make install

2.1.4. 下载nginx：nginx-http-flv-module

git clone https://github.com/winshining/nginx-http-flv-module.git

2.1.5. 安装nginx

wget http://nginx.org/download/nginx-1.10.2.tar.gz
tar zxvf nginx-1.10.2.tar.gz
cd nginx-1.10.2
# 编译时指定nginx-http-flv-module的目录
./configure --add-module=/opt/nginx-http-flv-module
make
sudo make install

        到此，nginx已经安装完成了，接下来修改nginx的配置，配置模板在https://github.com/winshining/nginx-http-flv-module.git最后给出的example configuration取nginx.conf替换掉nginx默认的nginx.conf

配置模板中只需修改server_name改成自己服务器的IP地址

cd /usr/local/nginx/conf
mv nginx.conf nginx.conf_bak
# 上传配置模板..
# 启动nginx
cd /usr/local/nginx/sbin
./nginx

3. ffmpeg

3.1. ffmpeg介绍

        它的官网为：https://ffmpeg.org/，由Fabrice Bellard（法国著名程序员Born in 1972）于2000年发起创建的开源项目。该人是个牛人，在很多领域都有很大的贡献。

        FFmpeg是多媒体领域的万能工具。只要涉及音视频领域的处理，基本上没有它做不了的事情！通俗点讲，从视频录制、视频编辑再到播放，它都能做！

        抖音，爱奇艺、腾讯视频、优酷视频，还有播放器，像QQ影音、暴风影音等，都离不开它！否则非常痛苦！为什么呢？

        因为又要招一大帮人来把多媒体领域内的基础工具（音视频编解码器、文件格式和协议库、滤镜库等等）实现掉。

3.2. 安装yasm

ffmpeg为了提高编译速度，使用了汇编指令，如果系统中没有yasm指令的话编译会报错

wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
tar zxvf yasm-1.3.0.tar.gz
cd yasm-1.3.0
./configure
make
sudo make install

3.3. ffmpeg安装

wget http://www.ffmpeg.org/releases/ffmpeg-4.1.tar.gz
tar -zxvf ffmpeg-4.1.tar.gz
# 创建ffmpeg文件夹，指定安装目录
mkdir /opt/ffmpeg
cd /opt/ffmpeg-4.1
./configure --prefix=/usr/local/ffmpeg
make # 这一步很慢，大概5-10分钟，耐心等待
sudo make install

3.4. 配置环境变量

配置环境变量使命令全局生效

vi /etc/profile
# 在最后PATH添加环境变量：
export PATH=$PATH:/opt/ffmpeg/bin
# 保存退出
source /etc/profile
# 将ffmepg的lib目录链接到系统库中
vi /etc/ld.so.conf
# 在文档后追加内容: /opt/ffmpeg/lib/
# 指定ffmpeg的安装目录lib文件夹，添加完后执行ldconfig，使配置生效
ldconfig
# 查看版本，测试是否生效
ffmpeg --version

        到此ffmpeg和nginx都已经安装完成了，接下只需要执行ffmepg相关的命令开始推流进行转换操作，之后配和nginx对转换后的流进行访问，就可以在页面上实现实时预览了

4. ffmpeg推流

        ffmpeg命令非常多，本次测试也踩了一些坑，最终找到一条可以正常转换，预览的命令；

        ffmpeg支持对不同的流转换到不同的流，本次测试对海康威视H.264码流转换成FLV格式的流。需要其它流转换的小伙伴可以去官网或者百度搜索相关的转换命令。

ffmpeg -ss 0:01 -rtsp_transport tcp -i rtsp://user:password@ip:port/h264/ch1/main/av_stream -c copy -f flv rtmp://127.0.0.1:1935/myapp/test1

命令参数介绍

ffmpeg -ss 0:01 -rsto_transport tcp -i：固定写法

rtsp://user:password@ip:port/h264/ch1/main/av_stream

海康的rstp链接模板

user：海康用户名

password：海康用户密码

ip：海康摄像头ipv4地址

port：海康摄像机端口

h264：海康支持的码流编码

ch1：通道号

main：主码流（sub 子码流）

av_stream：主码流

-c copy： 对流输出进行复制，不再进行编码

-f flv：转成flv格式

rtmp://127.0.0.1:1935/myapp/test：与nginx配置相对应，1935为nginx的rtmp配置的端口，myapp是nginx.conf配置的application，test是自定义的名称，也就是后面通过页面访问用到的uri地址

5. web页面取流

取流URL：http://ip:port/live?port=1935&app=myapp&stream=test

参数介绍

ip:port：nginx代理的ip、port，由于是http协议，一定要使用nginx代理的http协议端口

live：nginx配置中的路由地址

port=1935：nginx的rtmp协议端口

app=myapp：nginx配置的应用名称

stream=test：上文进行推流的地址名称

5.1. 前端代码

        由于我们使用的flv码流类型，所以前端要使用一款支持flv视频类型的插件进行展示，网上插件很多，不再做介绍。