前言
基于韦东山课程的视频监控方案
https://www.100ask.net/detail/p_5f0fc9e9e4b0ee0b8872c2c3/6
1、mjpg-streamer
2、流媒体
一、mjpg-streamer
1、编译mjpg-streamer
有两种方法:
①下载源码,手工编译
②使用Buildroot,配置选择MJPG-streamer,直接编译生成映象文件
我们使用Buildroot:
设置交叉编译工具链
在Buildroot根目录
make menuconfig
如下图选择MJPG-streamer
执行make
这会在Buildroot的dl/mjpg-streamer目录下自动下载源码,并编译
结果保存在output/images目录下,有emmc.img, sdcard.img,可以直接烧写到板能的EMMC或SD卡上
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210327171602679.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpdXBvbmc=,size_16,color_FFFFFF,t_70)
我在配置过程中出现如果不能生成.img的镜像文件。之后尝试在builtroot下重新配置根文件系统 按照手册:
make clean ——make 100ask_imx6ull_pro_ddr512m_systemV_qt5_defconfig——make all 这个过程编译了十几个小时才好。编译完成后就有生成.img文件(默认的根文件系统已经配送mjpg和ffmpeg,没有配置nginx)再把.img烧入就可以了
2、运行mjpg
mjpg_streamer -i "/usr/lib/mjpg-streamer/input_uvc.so -d /dev/video1 -f 30 -q 90 -n" -o "/usr/lib/mjpg-streamer/output_http.so -w /usr/share/mjpg-streamer/www"
默认的是使用8080端口,如果访问开发板地址后没有出现mjpg-stream可能是端口被占用,加上-p 8081 就可以了
mjpg_streamer -i "/usr/lib/mjpg-streamer/input_uvc.so -d /dev/video1 -f 30 -q 90 -n" -o "/usr/lib/mjpg-streamer/output_http.so -p8081 -w /usr/share/mjpg-streamer/www"
确保PC或手机,跟开发板处于同一个局域网
假设开发板IP为:192.168.1.106
在浏览器中打开:http://192.168.1.106:8081
就可以看视频了
3、mjpg框架
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210327172116291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpdXBvbmc=,size_16,color_FFFFFF,t_70)
二、流媒体
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210327172233439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpdXBvbmc=,size_16,color_FFFFFF,t_70)
1、ffmpeg
ffmpeg可以对音视频进行编解码,复用,解复用
ffmpeg 基本用法:
参考基本用法
ffmpeg移植:
①、手工编译
②、参考韦老师的builtroot编译后烧写
执行命令:
ffmpeg -f v4l2 -framerate 10 -i /dev/video1 -q 10 my.mp4
这样就可以对摄像头的视频进行采集和上上传,但我们要实现的是通过外网访问视频,就需要借助服务器,也就是nginx
2、nginx服务器
配置nginx
下载第3方模块:
在Buildroot目录下,创建目录:mkdir dl/nginx
使用git下列载:cd dl/nginx && git clone https://github.com/winshining/nginx-http-flv-module.git
在Buildroot根目录
make menuconfig
把原来的lighttpd去掉,否则板子也会自动启动它,就会有两个HTTP服务了:lighttpd, nginx
如图选择Nginx,建议把所有功能都选上
并且设置额外的参数,在“additional modules”中添加: $(TOPDIR)/dl/nginx/nginx-http-flv-module
最后执行(先删除之前编译的nginx,我发现有时设置的第3方模块不起作用,删除后再make就可以了):rm -rf output/build/nginx-1.15.7 && make
这会在Buildroot的dl/nginx目录下自动下载源码,并编译
结果保存在output/images目录下,有.img,可以直接烧写到板能的EMMC
在开发板上烧写好映像文件后,开发板启动时会自动运行Ngnix
为了让它支持RTMP、HTTPFLV,需要修改配置文件/etc/nginx/nginx.conf :
添加rtmp
rtmp{
server {
listen 1935;
chunk_size 4096;
application live{
allow publish 127.0.0.1;
allow play all;
live on;
record off;
meta copy;
}
}
}
在http下添加
location /test {
flv_live on;
chunked_transfer_encoding on;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
}
最后,重启Nginx服务:
/etc/init.d/S50nginx restart
在开发板上运行了Nginx后,它就已经是一个WEB站点了。
可以在电脑浏览器里输入开发板的IP访问开发板:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210327174114358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpdXBvbmc=,size_16,color_FFFFFF,t_70)
推流:
~在开发板上执行:
ffmpeg -f v4l2 -framerate 10 -i /dev/video1 -q 10 -f flv rtmp://127.0.0.1/live/lyc
拉流
在PC上安装VLC播放器:https://www.videolan.org/
使用RTMP协议拉流:VLC播放器中点击“媒体”->“打开网络串流”,输入:rtmp://192.168.1.106/live/lyc ,就可以播放了
使用HTTPFLV协议拉流:VLC播放器中点击“媒体”->“打开网络串流”,输入: http://192.168.1.106/test?app=live&stream=lyc ,就可以播放了
3、实现flv.js访问和ip地址访问
①、实现flv.js访问
无插件web直播解决方案,ffmpeg+nginx-http-flv-module+flv.js
https://blog.csdn.net/string_kai/article/details/100598268
flv.js Demo演示
Demo地址:http://player.pingos.io/flv
②、ip地址访问
参考:https://blog.csdn.net/string_kai/article/details/100598268
制作http
url: ’ http://192.168.1.106/test?app=live&stream=lyc’ 修改url ip地址换成开发板的
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 10px;
}
.logcatBox {
border-color: #CCCCCC;
font-size: 11px;
font-family: Menlo, Consolas, monospace;
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>
<script>
if (flvjs.isSupported()) {
startVideo()
}
function startVideo(){
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: true,
hasVideo: true,
enableStashBuffer: true,
url: ' http://192.168.1.106/test?app=live&stream=lyc'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
videoElement.addEventListener('click', function(){
alert( '是否支持点播视频:' + flvjs.getFeatureList().mseFlvPlayback + ' 是否支持httpflv直播流:' + flvjs.getFeatureList().mseLiveFlvPlayback )
})
function destoryVideo(){
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;
}
function reloadVideo(){
destoryVideo()
startVideo()
}
</script>
</body>
</html>
可将http内容把它替换到开发板/use/html/index.html
就可实现在浏览器下通过开发板ip地址直接访问到视频信息
4、内网穿透
下载花生壳,配置映射地址和端口
在开发板上推流后,ffmpeg -f v4l2 -framerate 10 -i /dev/video1 -q 10 -f flv rtmp://127.0.0.1/live/lyc
在VLC播放器上播放:http://38g5a00805.wicp.vip/test?app=live&stream=lyc
出现的问题:直接通过浏览器访问不行,通过vlc可以
可以把nginx服务器做在云平台上就不需要内网穿透了
总结
mjpg-stream:
操作简单,已经不再维护,源码很有参考价值
流媒体:
通过ffmpeg进行视频数据采集处理后进行rtmp推流到nginx服务器
浏览器使用HTTPFLV协议从Nginx拉流(安装flv.js)