微信小程序实现实时视频监控【基于树莓派4b+】_小程序怎么对接监控

所需工具：一个具有公网ip的云服务器、树莓派、cis摄像头、nginx服务器、mjpg-stream插件

1.搭建nginx服务器
树莓派和云服务器都要安装

sudo apt-get install nginx
1

2.树莓派配置开启csi服务
参考博客：链接
打开树莓派终端

sudo raspi-config  #调出树莓派配置控制台
1

按照步骤开启你的csi摄像头

测试树莓派摄像头是否可以正常使用

raspistill -v -o test.jpg   #拍摄一张图片 至于raspistill的传输可以使用help查看
1

这里可能会出现端口冲突问题，默认选择的端口是8080.打不开的话可以查看端口号情况

 pip install whatportis  #安装端口号查看工具
  whatportis ssh  #查看某个服务使用的端口号
 # 也可以
 netstat -an |grep 8080#查看8080端口使用情况
 #然后kill掉占用的端口号再开启我们的服务避免端口冲突
1
2
3
4
5

3.配置mjpg-stream服务
参考：参考博客

理解：
mjpg-streamer是用于从webcam摄像头采集图像，把他们以流的形式通过基于ip的网络传输到浏览器端，如火狐、Cambozola和VLC播放器等。它可以利用某些webcam的硬件压缩功能来降低服务器CPU的开销。为嵌入式设备和一些常规服务器提供一个轻量且更少CPU消耗的方案。（翻译维基百科）在其源代码中主要围绕linuxv的4l2接口（注意低版本内核不存在v4l2接口因此无法使用）、socket网络编程、多线程编程。其中还包含重要的插件input-plugins和output-plugins。
Mjpg‐streamer是一个开源软件，用于从摄像头采集图像，它将JPEG帧从一个或多个输入插件复制到多个输出插件。它可用于通过基于IP的网络将JPEG文件从网络摄像头流式传输到各种类型的查看器，如Chrome，Firefox，Cambozola，VLC，mplayer和其他能够接收MJPG流的软件

树莓派上
树莓派学习资源：树莓派实验室
安装编译
官网：http://sourceforge.net/projects/mjpg-streamer/

$ sudo apt-get install libjpeg-dev subversion imagemagick
$ cd ~/mjpg-streamer-master/mjpg-streamer-experimental
$ make
$ sudo make install
1
2
3
4

测试：

 mjpg_streamer  -i "input_uvc.so -n -f 10 -r 640x480  -d /dev/video0" -o "output_http.so -p 8080  -w /usr/local/share/mjpg-streamer/www"
1

修改配置文件start.sh 文件

运行：

./start.sh
1

当然排除端口号冲突问题，因为web使用的端口号是8080.这里我们可以打开mjpg-stream的配置文件 start.sh配置新的端口号，避免端口冲突问题
4.使用mjpg-stream服务将树莓派摄像头实时画面在网页端查看

http://localhost:8080/stream.html
http://<devIP>:8080/stream.html
http://<树莓派IP地址>:8080/javascript.html
1
2
3

选择一个在浏览器中打开就可以看到实时画面。
这里我们会发现打开的网页视频超级卡，这是没有配置mjpg-stream的结果，可以配置一下每秒读取的帧数。
这里打不开的实时监控的情况下，一般是我们没开motion，这里可以再配置一下motion，可以支持摄像头热插拔。

5.使用nginx服务将树莓派内网ip反向代理到公网服务器【这步可以不要】

6.使用frp技术将树莓派内网摄像头服务器转换成web服务
frp官网学习：链接
树莓派端配置
/etc/nginx/conf.d配置文件中创建frpc.conf文件

server{
listen 8080;#服务器使用的端口
server_name localhost #这里一般填写域名，当然也可以是公网ip
location /{
	proxy_pass http://localhost:8181;#将内网服务转接成端口8181的web服务
}
}
1
2
3
4
5
6
7

frpc.ini文件代码

[common]
server_addr = x.x.x.x #公网ip
server_port = 7000#和frps服务端相连的端口，需要和服务端那边绑定的端口一致
[web]
type =http
local_port =8181 #内网机器开放的服务端口
custom_domains =x.x.x.x #这里最好是域名，公网ip也可以
1
2
3
4
5
6
7

服务器端配置
创建一个frps.conf

server{
listen 8080;#服务器使用的端口
server_name x.x.x.x #公网ip
location / {
client_max_body_size 1000m;
#假设frps端口8080
proxy_pass http://127.0.0.1:8181;#内网开发的端口
proxy_redirect off;#重定向关闭
proxy_set_heard X-Real-IP $remote_addr;
proxy_set_heard X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_heard Host $http_host;
proxy_set_heard X-NginX-Proxy true;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

frps.ini

[common]
bind_port =7000;#frps和frpc相连端口
vhost_http_port = 8181 #vhost_http_port 用于接收http请求
1
2
3

7.启动客户端和服务端的frp即可实现公网ip访问内网搭建的服务

./frps -c ./frps/ini #启动服务端
./frpc -c ./frpc.ini #启动客户端
#如果需要长期使用要结合其他工具，比如systemd和supervisor
1
2
3

8.云服务器开放所需要的端口@TOC
这里就不写那么详细了，直接网上一搜就有，
当然也可以参考这篇：传送门

9.微信小程序端获取实时视频

<view class="bj">
    <view class="container">
        <text class="bt">实时视频监控</text>
        <image class="photo" src="http://云服务器地址:使用的端口/?action=stream" mode="aspectFit"></image>
    </view>
</view>
1
2
3
4
5
6

资源：Androidapp实现视频推流：https://github.com/tancolin/App4Mjpg-streamer.git