经理让我研究如何把算法们处理过的摄像头实时怼上前端网页,在前端网页可以直接调用增删改查并且要有window和linux环境下两种方案。研究良久,以下两种方案可以任君挑选。
摄像头是rtsp协议 前端是无法直接播放的需要进行转码,原本第一次是想用rtmp后来发现好像要flash支持但是flash已经裂了,然后看到又b站的开源项目flv.js可用就是用了这个方案
方案一
给老熟人nginx给他加上相应的模块
windows版
事先准备
下载nginx源码(必须以下是我在网上找的编译方法 亲身体验后改动了一点点 如果不会的可以找已经编译好的 但是可能要花点币 如果找到编译好的 直接跳到ffmpeg的使用)
下载ffmpeg (必须 不然你咋推流拉流)
1.msys2
2.visual studio 2015版
3.perl 环境变量
4.nasm环境变量(貌似可以不装,看个人情况)
5.sed环境变量(貌似可以不装,看个人情况)
插件
1.插件nginx-http-flv-module (rtmp依赖于flash chrome浏览器已经无法自己开启flash功能 暂时不考虑使用 改用flv)
2.openssl 支持加密访问(必须)
3.zlib 支持压缩
4.pcre 支持正则表达式
编译
1.新建文件夹nginx-flv并解压nginx源码到nginx-flv下
2.在nginx-flv下新建文件夹build,进入build,在build下新建文件夹lib和output
3.将nginx-http-flv-module,openssl,zlib,pcre解压缩到nginx-flv/build/lib目录下
nginx-flv
├─auto
├─build
│ ├─lib
│ │ ├─nginx-http-flv-module-master
│ │ ├─openssl-1.0.1u
│ │ ├─pcre-8.34
│ │ └─zlib-1.2.11
│ └─output
├─conf
├─contrib
├─docs
├─misc
└─src
整体结构如上
管理员身份打开msys2
进入nginx-flv目录
输入
实例:
auto/configure --with-cc=cl --builddir=build/output --prefix=
--conf-path=conf/nginx.conf --pid-path=logs/nginx.pid
--http-log-path=logs/access.log --error-log-path=logs/error.log
--sbin-path=nginx-flv.exe --http-client-body-temp-path=temp/client_body_temp
--http-proxy-temp-path=temp/proxy_temp
--http-fastcgi-temp-path=temp/fastcgi_temp
--http-scgi-temp-path=temp/scgi_temp
--http-uwsgi-temp-path=temp/uwsgi_temp
--with-cc-opt=-DFD_SETSIZE=1024 --with-pcre=build/lib/pcre-8.34
--with-zlib=build/lib/zlib-1.2.11 --with-openssl=build/lib/openssl-1.0.1u \
--with-select_module --with-http_ssl_module
--add-module=build/lib/nginx-http-flv-module-master
需要按照自己的版本和路径进行微调
稍加等待 结束后会在nginx-flv/build/output目录下生成Makefile 打开Makefile 把-w4-wx 改为-w3 降低检测度
以管理员身份打开VS2015本机工具命令提示符x86进入nginx-flv目录进行nmake
进入相应的盘和路径
nmake /f build/output/Makefile 进行编译
编译完成后会在nginx-flv/build/output目录下生成nginx.exe
编译过程很容易报各种错误 不能生成 中文字符等 有的时候是没有用管理员身份整合和编译导致 自行检查操作
部署和推流
新建文件夹nginx-rtmp(只是为了和nginx-flv区分开来 名字随便起)
把之前生成的nginx.exe考到文件夹下
nginx-flv的conf文件夹拷贝到nginx-rtmp目录下
nginx-flv的docs/html文件夹拷贝到nginx-rtmp目录下
在nginx-rtmp目录下新建logs和temp文件夹
将nginx-http-flv-module目录下的stat.xsl拷贝到nginx-rtmp/html目录下
配置conf/nginx.conf文件
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#error_log logs/error.log debug;
#pid logs/nginx.pid;
events { worker_connections 1024; }
添加RTMP服务
rtmp {
server {
listen 1935; # 监听端口
chunk_size 4000;
application live {
live on;
gop_cache on;
}
}
}
HTTP服务
http {
include mime.types;
default_type application/octet-stream;
#access_log logs/access.log main;
server {
listen 8080; # 监听端口
location /stat.xsl {
root html;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location / {
root html;
}
location /live {
flv_live on; #打开 HTTP 播放 FLV 直播流功能
chunked_transfer_encoding on; #支持 'Transfer-Encoding: chunked' 方式回复
add_header 'Access-Control-Allow-Origin' '*'; #添加额外的 HTTP 头
add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的 HTTP 头
}
}
}
很多操作跟这个配置有关 参考官网自己改 github.com/winshining/…
然后打开windows命令行 进入Nginx-rtmp目录 执行start /b nginx.exe -c conf\nginx.conf
现在就可以开始输入ffmpeg命令进行推流了 ffmpeg -re -i rtsp://账号:密码@ip:端口号/sub -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/live/home
如果算法们搞定了摄像头 就把他们当作是摄像头正常写上地址就好,如果单纯的是连摄像头要注意格式
http格式的使用网址 http://127.0.0.1:8080/live?port=1935&app=live&stream=home
http://127.0.0.1:8080/live?app=live&stream=test 127.0.0.1:8080/stat 查看媒体流信息
关闭nginx.exe –s stop
可以使用vlc播放器进行自检
在页面上使用的时候 可以使用b站的开源项目flv.js
cnpm install --save flv.js
linux版之ubuntu
我得方法不够好,编译以后偶尔会断连,还会花屏暂且不误人子弟
方案二
ZLMediaKit(这东西直接戳中经理的芳心 害)
window环境下
其实官方文档写的很齐全 首先
#国内用户推荐从同步镜像网站gitee下载
git clone --depth 1 gitee.com/xia-chu/ZLM…
cd ZLMediaKit
#千万不要忘记执行这句命令
git submodule update --init
准备好我们的源码
顺便在ZLMediaKit旁边建个build备用
然后上ffmpeg
再来就是openssl(flash player在播放rtmp时,采用的是复杂握手模式,如果不安装该库,flash player将播放不了zlmediakit 提供的rtmp url.同时ZLMediaKit的https/rtsps相关功能需要使用openssl才能开启。 这是官方原话)
slproweb.com/products/Wi… 附上下载地址选择Win64 OpenSSL v1.1.1k.exe版本
安装了以后记得设置环境变量 右击电脑图标 属性 高级系统设置 然后环境变量 path那个
设置环境变量,例如工具安装在C:\OpenSSL-Win64,则将C:\OpenSSL-Win64\bin;复制到Path中
配置好环境变量以后 直接执行 start C:\OpenSSL-Win64\bin\openssl.exe 看看是否成功 没成功就重启电脑
这次我使用的是Visual Studio 2019 2015应该也能用记得搭配上cmake
这是cmake的下载地址 我用的是cmake-3.20.5-windows-x86_64.msi这个版本
正常安装 多选项的时候选择 第二个
Add CMake to the system PATH for all users 环境
以及勾上 Create CMake Desktop Icon 创建桌面图标
安装好后重启电脑后,打开cmd黑窗,输入cmake,能够显示cmake的一些信息即为安装成功
前置差不多搞好了 然后主菜 打开cmake 在Where is the source code 选上ZLMediaKit的路径
在Where to build the binaries 选上我们之前备用的build路径
然后然后Configure -> Generate -> Open Project 左下角的三个按键依次点
然后打开vs2019 打开我们的ZLM 上方选择Release 然后进行编译
稍等片刻后编译成功 就在build目录旁边再建一个release
将ZLMediaKit\release\windows\Debug\Release目录中的MediaServer.exe,ZLMediaKit\conf目录中的config.ini,ZLMediaKit\tests中ssl.p12拷贝到release目录
然后双击打开MeidaServer.exe 再cmd一次
输入ffmpeg -re -i rtsp://账号:密码@ip:端口号/sub -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/live/home
window版就成功了
Linux版之Ubuntu
#!/bin/bash
cd ..
git clone --depth=1 github.com/xia-chu/ZLM…
cd ZLMediaKit
git submodule init
git submodule update
sudo apt-get install cmake
sudo apt-get install libssl-dev
#sudo apt-get install libsdl-dev
#sudo apt-get install libavcodec-dev
#sudo apt-get install libavutil-dev
mkdir -p linux_build
rm -rf ./build
ln -s ./linux_build build
cd linux_build
cmake ..
make -j4
对着输入就行 没记错的话 装完就差不多搞定了
直接Debug目录下 输入sudo ./MediaServer -d
然后
ffmpeg -re -i "rtsp://账户:密码@ip:554/sub" -vcodec h264 -acodec aac -f flv rtmp://127.0.0.1/live/test
你就可以在vlc观看了 http://127.0.0.1/live/test 这个地址
番外录制功能
nginx好像要装额外的模块 后面就没用了
ZLM的话自带这个功能在config.ini里面配置相应的参数
对着官网改就行 ZLM的官方文档写的很全 基本上可以解决大部分操作问题
★,°:.☆( ̄▽ ̄)/$:.°★ 。 拜拜