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:上文进行推流的地址名称文章来源:https://www.toymoban.com/news/detail-824357.html
5.1. 前端代码
由于我们使用的flv码流类型,所以前端要使用一款支持flv视频类型的插件进行展示,网上插件很多,不再做介绍。文章来源地址https://www.toymoban.com/news/detail-824357.html
到了这里,关于记录对接海康威视摄像头web端实时预览:Linux+ffmpeg+nginx转换RTSP视频流(完整版实现)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!