nginx+ffmpeg+zlmediakit+flv.js 前端调用win或linux环境下摄像头调用问题

1,240 阅读6分钟

经理让我研究如何把算法们处理过的摄像头实时怼上前端网页,在前端网页可以直接调用增删改查并且要有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.org/download/

这是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里面配置相应的参数

github.com/zlmediakit/…

对着官网改就行 ZLM的官方文档写的很全 基本上可以解决大部分操作问题

★,°:.☆( ̄▽ ̄)/$:.°★ 。 拜拜