mjpg-streamer+frp+公网服务器实现微信小程序实时监控方案

服务器端 —-> 使用frps搭建服务

下载编译安装frp

下载：

wget https://github.com/fatedier/frp/releases/download/v0.44.0/frp_0.44.0_linux_amd64.tar.gz
tar -zxvf frp_0.44.0_linux_amd64.tar.gz 
cd frp_0.44.0_linux_amd64/

修改frps.ini为如下：

[common]
bind_port = 8090
vhost_http_port = 8090

具体服务器端详细配置参考这里：服务端配置 | frp (gofrp.org)

开放8090端口：

sudo iptables -I INPUT -p tcp --dport 8090 -j ACCEPT(或者在宝塔面板中开放8090端口)

在云服务器设置防火墙中打开端口

开发板使用mjpg-streamer+frpc搭建客户端

确保摄像头可用

fuqiang@ubuntu:~$ ls -al /dev/video*
crw-rw----+ 1 root video 81, 0 Oct 19 04:13 /dev/video0
crw-rw----+ 1 root video 81, 1 Oct 19 04:13 /dev/video1

下载编译安装mjpg-streamer

git clone https://github.com/jacksonliam/mjpg-streamer.git
cd mjpg-streamer/mjpg-streamer-experimental/
make
sudo make install

编译后文件夹内容如下：

fuqiang@ubuntu:~/workspace/mjpg-streamer/mjpg-streamer-experimental$ tree -L 1
.
├── _build
├── cmake
├── CMakeLists.txt
├── Dockerfile
├── docker-start.sh
├── input_file.so
├── input_http.so
├── input_uvc.so
├── LICENSE
├── makedeb.sh
├── Makefile
├── mjpg_streamer
├── mjpg_streamer.c
├── mjpg_streamer.h
├── mjpg_streamer@.service
├── output_file.so
├── output_http.so
├── output_rtsp.so
├── output_udp.so
├── plugins
├── postinstall.sh
├── README.md
├── scripts
├── start.sh
├── TODO
├── utils.c
├── utils.h
└── www

5 directories, 23 files

修改start.sh，使用如下命令:

./mjpg_streamer -i "./input_uvc.so -d /dev/video0 -n -f 15 -r 320x240"  -o "./output_http.so -p 8090 -w ./www"

本地测试，执行

./start.sh

成功启动会显示如下信息：

fuqiang@ubuntu:~/workspace/mjpg-streamer/mjpg-streamer-experimental$ ./start.sh 
MJPG Streamer Version: git rev: 310b29f4a94c46652b20c4b7b6e5cf24e532af39
 i: Using V4L2 device.: /dev/video0
 i: Desired Resolution: 320 x 240
 i: Frames Per Second.: 15
 i: Format............: JPEG
 i: TV-Norm...........: DEFAULT
 o: www-folder-path......: ./www/
 o: HTTP TCP port........: 8090
 o: HTTP Listen Address..: (null)
 o: username:password....: disabled
 o: commands.............: enabled

这时候，浏览器通过下面网址应该可以显示画面：

http://localhost:8090/stream.html

下载编译安装frp

下载：

wget https://github.com/fatedier/frp/releases/download/v0.44.0/frp_0.44.0_linux_amd64.tar.gz
tar -zxvf frp_0.44.0_linux_amd64.tar.gz 
cd frp_0.44.0_linux_amd64/

修改frpc.ini为：

[common]
server_addr = 114.132.63.31
server_port = 8090

[web]
type = http
#local_ip = 127.0.0.1
local_port = 8090
remote_port = 8090
custom_domains = 114.132.63.31

具体客户端参数配置参考这里：客户端配置 | frp (gofrp.org) 和代理配置 | frp (gofrp.org)

运行

服务器端

./frps -c frps.ini

输出信息为：

lighthouse@VM-20-7-ubuntu:~ $ cd frp_0.44.0_linux_amd64/
lighthouse@VM-20-7-ubuntu:~/frp_0.44.0_linux_amd64 $ ./frps -c frps.ini 
2022/10/19 19:52:39 [I] [root.go:209] frps uses config file: frps.ini
2022/10/19 19:52:39 [I] [service.go:194] frps tcp listen on 0.0.0.0:8090
2022/10/19 19:52:39 [I] [service.go:237] http service listen on 0.0.0.0:8090
2022/10/19 19:52:39 [I] [root.go:218] frps started successfully
2022/10/19 19:52:44 [I] [service.go:450] [9adaae081a5373ec] client login info: ip [14.123.255.169:15815] version [0.44.0] hostname [] os [linux] arch [amd64]
2022/10/19 19:52:44 [I] [http.go:93] [9adaae081a5373ec] [web] http proxy listen for host [114.132.63.31] location [] group [], routeByHTTPUser []
2022/10/19 19:52:44 [I] [control.go:465] [9adaae081a5373ec] new proxy [web] type [http] success

开发板端

./start.sh

输出信息为：

fuqiang@ubuntu:~/workspace/mjpg-streamer/mjpg-streamer-experimental$ ./start.sh 
MJPG Streamer Version: git rev: 310b29f4a94c46652b20c4b7b6e5cf24e532af39
 i: Using V4L2 device.: /dev/video0
 i: Desired Resolution: 320 x 240
 i: Frames Per Second.: 15
 i: Format............: JPEG
 i: TV-Norm...........: DEFAULT
 o: www-folder-path......: ./www/
 o: HTTP TCP port........: 8090
 o: HTTP Listen Address..: (null)
 o: username:password....: disabled
 o: commands.............: enabled

再执行：

./frpc -c frpc.ini

输出信息为：

fuqiang@ubuntu:~/workspace/frp_0.44.0_linux_amd64$ ./frpc -c frpc.ini 
2022/10/19 04:52:44 [I] [service.go:349] [9adaae081a5373ec] login to server success, get run id [9adaae081a5373ec], server udp port [0]
2022/10/19 04:52:44 [I] [proxy_manager.go:144] [9adaae081a5373ec] proxy added: [web]
2022/10/19 04:52:44 [I] [control.go:181] [9adaae081a5373ec] [web] start proxy success

测试

在一台PC浏览器上输入：

http://114.132.63.31:8090/?action=stream

会显示出相同画面：

微信小程序实现

小程序注册

在这里进行小程序注册：微信小程序 (qq.com)

下载微信开发者工具

在这里下载：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

开始编写小程序

index.wxml中添加如下：

<view class="bj">
    <view class="container">
        <text class="bt">乐梵在哪</text>
        <image class="photo" src="http://114.132.63.31:8090/?action=stream" mode="aspectFit"></image>
    </view>
</view>

点击上面的“编译”，可以在调试程序中预览效果

点击“真机调试”，可以生成二维码，微信扫码在手机上看效果

效果确认完成后，点击右上角的“上传”，代码会上传到版本库进行管理

再点击“提交审核”，会由腾讯官方进行审核，审核通过即可上线

就可以在微信中搜索到这个小程序并使用了

到此为止，一条完整监控链路搭建完成！

mjpg-streamer初初探（MJPG-streamer / Wiki / Home (sourceforge.net)）

五分钟拆解流媒体入门项目 MJPG-Streamer (qq.com)

frp初初探（frp (gofrp.org)）

frp 采用 C/S 模式，将服务端部署在具有公网 IP 的机器上，客户端部署在内网或防火墙内的机器上，通过访问暴露在服务器上的端口，反向代理到处于内网的服务。在此基础上，frp 支持 TCP, UDP, HTTP, HTTPS 等多种协议，提供了加密、压缩，身份认证，代理限速，负载均衡等众多能力。官方文档：文档 | frp (gofrp.org)