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

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

下载编译安装frp

下载：

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

修改frps.ini为如下：

  1. [common]
  2. bind_port = 8090
  3. vhost_http_port = 8090

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

开放8090端口：

  1. sudo iptables -I INPUT -p tcp --dport 8090 -j ACCEPT(或者在宝塔面板中开放8090端口)
  2.  
  3. 在云服务器设置防火墙中打开端口

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

确保摄像头可用

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

下载编译安装mjpg-streamer

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

编译后文件夹内容如下：

  1. fuqiang@ubuntu:~/workspace/mjpg-streamer/mjpg-streamer-experimental$ tree -L 1
  2. .
  3. ├── _build
  4. ├── cmake
  5. ├── CMakeLists.txt
  6. ├── Dockerfile
  7. ├── docker-start.sh
  8. ├── input_file.so
  9. ├── input_http.so
  10. ├── input_uvc.so
  11. ├── LICENSE
  12. ├── makedeb.sh
  13. ├── Makefile
  14. ├── mjpg_streamer
  15. ├── mjpg_streamer.c
  16. ├── mjpg_streamer.h
  17. ├── [email protected]
  18. ├── output_file.so
  19. ├── output_http.so
  20. ├── output_rtsp.so
  21. ├── output_udp.so
  22. ├── plugins
  23. ├── postinstall.sh
  24. ├── README.md
  25. ├── scripts
  26. ├── start.sh
  27. ├── TODO
  28. ├── utils.c
  29. ├── utils.h
  30. └── www
  31.  
  32. 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

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

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

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

http://localhost:8090/stream.html

下载编译安装frp

下载：

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

修改frpc.ini为：

  1. [common]
  2. server_addr = 114.132.63.31
  3. server_port = 8090
  4.  
  5. [web]
  6. type = http
  7. #local_ip = 127.0.0.1
  8. local_port = 8090
  9. remote_port = 8090
  10. custom_domains = 114.132.63.31

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

运行

服务器端

./frps -c frps.ini

输出信息为：

  1. lighthouse@VM-20-7-ubuntu:~ $ cd frp_0.44.0_linux_amd64/
  2. lighthouse@VM-20-7-ubuntu:~/frp_0.44.0_linux_amd64 $ ./frps -c frps.ini 
  3. 2022/10/19 19:52:39 [I] [root.go:209] frps uses config file: frps.ini
  4. 2022/10/19 19:52:39 [I] [service.go:194] frps tcp listen on 0.0.0.0:8090
  5. 2022/10/19 19:52:39 [I] [service.go:237] http service listen on 0.0.0.0:8090
  6. 2022/10/19 19:52:39 [I] [root.go:218] frps started successfully
  7. 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]
  8. 2022/10/19 19:52:44 [I] [http.go:93] [9adaae081a5373ec] [web] http proxy listen for host [114.132.63.31] location [] group [], routeByHTTPUser []
  9. 2022/10/19 19:52:44 [I] [control.go:465] [9adaae081a5373ec] new proxy [web] type [http] success

开发板端

./start.sh

输出信息为：

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

再执行：

./frpc -c frpc.ini

输出信息为：

  1. fuqiang@ubuntu:~/workspace/frp_0.44.0_linux_amd64$ ./frpc -c frpc.ini 
  2. 2022/10/19 04:52:44 [I] [service.go:349] [9adaae081a5373ec] login to server success, get run id [9adaae081a5373ec], server udp port [0]
  3. 2022/10/19 04:52:44 [I] [proxy_manager.go:144] [9adaae081a5373ec] proxy added: [web]
  4. 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中添加如下：

  1. <view class="bj">
  2.     <view class="container">
  3.         <text class="bt">乐梵在哪</text>
  4.         <image class="photo" src="http://114.132.63.31:8090/?action=stream" mode="aspectFit"></image>
  5.     </view>
  6. </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)

注：本文转载自blog.csdn.net的szembed的文章"https://blog.csdn.net/szembed/article/details/130849783"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！