100ask_6ull_pro开发板实现微信小程序实时视频监控

25-03-08 00:01

3036

9484

blog.csdn.net

id="article_content" class="article_content clearfix"> id="content_views" class="htmledit_views">

目录

2.mjpg-streamer的实现

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

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

微信小程序实现

参考文章：

实现方案

我使用的是100ask_6ull_pro发开板+usb免驱摄像头+mjpg-streamer+frp+公网服务器+微信小程序

下面我们来一步步的实现，每一步都是有参考资料的，人家讲的详细，我这就不详细讲了。

1.公网IP

要实现内网穿透，公网IP是必不可少的，最简单的就是租一台云服务器了，我这里租的是阿里云的ECS云服务器，镜像选的是ubuntu22.04，其他都是最低配置，因为主要是需要这个公网IP。

2.mjpg-streamer的实现

这一步很简单，对于100ask_6ull_pro开发板的同学可以参考：

2_MJPG-streamer方案的实现以及原理分析_哔哩哔哩_bilibili

这是韦老师的一个课程，虽然比较粗糙，但是对于入门了解已经足够了。

其他开发板我还没实现过，但是网上有很多文章实现了，可以参考。

3.FRP的实现

下载地址：https://github.com/fatedier/frp/releases

我使用的版本是0.58，你们可以自行选择。

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

先将压缩包发送到云服务器上，我用的是FileZille，也可以使用你们自己的方法。

然后在云服务器上执行：

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">

class="hljs-ln-code"> class="hljs-ln-line">tar -zxvf frp_0.44.0_linux_amd64.tar.gz

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2">

class="hljs-ln-code"> class="hljs-ln-line">cd frp_0.44.0_linux_amd64/ class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

修改frps.toml为如下：

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">[common]
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">bind_port = 8090
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">vhost_http_port = 8090 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

还需要开放端口8090：

参考：【图文教程】阿里云服务器开放端口设置（超详细）-阿里云开发者社区

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

先把那个压缩包放到虚拟机上进行解压后，发送到开发板上。

修改frpc.toml为：

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">[common]
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">server_addr = 你的公网IP
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">server_port = 8090
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">[web]
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">type = http
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">#local_ip = 127.0.0.1
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">local_port = 8090
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">remote_port = 8090
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">custom_domains = 你的公网IP或者域名 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

运行

服务器端

在云服务器上执行

./frps -c frps.toml class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

输出信息能看到successfully就是成功了

客户端

开发板上先执行

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 -p 8090 -w /usr/share/mjpg-streamer/www" & class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

然后再

./frpc -c frpc.toml class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

然后在浏览器上输入【你的公网IP】:8090/ ，可以查看到你的摄像头画面就是成功了。

微信小程序实现

没有微信小程序基础的同学建议先简单学习一下，只需要学习最基础的如何创建工程运行即可。

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"><view class="monitor">
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">    <view class="container">
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">        <image class="photo" src="http://公网IP:8090/?action=stream" mode="aspectFit">image>
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">    view>
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">view> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

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

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

到这就能实现了，小伙伴们可以自己动手试一下。

参考文章：

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

data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/m0_75183905/article/details/144660453","extend1":"pc","ab":"new"}">>

注：本文转载自blog.csdn.net的JiaH求学嵌入式的文章"https://blog.csdn.net/m0_75183905/article/details/144660453"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。

复制链接

发表评论

注册

评论记录：

未查询到任何数据！