杨奉武
805-Air724UG模块(4G全网通GPRS开发)-微信小程序扫码绑定Air724,并通过MQTT实现远程查看摄像头图像(自建MQTT服务器)
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
杨奉武
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
社区首页
>
专栏
>
805-Air724UG模块(4G全网通GPRS开发)-微信小程序扫码绑定Air724,并通过MQTT实现远程查看摄像头图像(自建MQTT服务器)
805-Air724UG模块(4G全网通GPRS开发)-微信小程序扫码绑定Air724,并通过MQTT实现远程查看摄像头图像(自建MQTT服务器)
杨奉武
关注
发布于 2022-09-30 15:29:02
857
0
发布于 2022-09-30 15:29:02
举报
文章被收录于专栏:
知识分享
知识分享
实际效果
上面显示的是图像,下面温室湿度是模拟的数据,还有一个继电器的开关(实际控制开发板上的小灯)
测试(默认连接我的MQTT服务器测试)
1,安装好手机卡,天线,摄像头
2,下载这节的程序到开发板
程序里面设置的摄像头为30W,所以需要使用自定义的CORE, 可以自己生成,也可以使用我提供的
3,正常情况下开发板日志会显示如下
4,使用微信小程序开发工具打开微信小程序工程
5.注意事项
注:默认连接的我的服务器,mnif.cn,用户可以在详情里面选择不校验域名(不推荐,可能通信有问题)
推荐在微信小程序平台上设置域名白名单
6,点击 预览,使用微信扫码以后安装到手机
7.点击添加设备
8.扫码添加
9.扫描模组上面的二维码
10.扫描成功以后,自动跳转到主页面,并添加了一个设备
显示的为设备的IMEI号
11.点击设备进入设备控制页面
最上面会显示摄像头图像(每隔6S左右更新一张图片)
点击下面的控制按钮可以控制开发板上的灯
Air724程序说明
1,设置连接的MQTT信息,和订阅主题(user/设备的imei)
2,采集并发送图片数据(发送的主题:device/msg/设备的imei)
提示:发送图片的格式 {"imgdata":"FFD8...图片数据....FFD9","index":1,"count":2,"size":4567}
一张图片是分了好几次发送的,一次发送最大2184字节.
整体为json格式,图片数据是字符串形式的16进制, count代表总共有几帧数据, index代表当前传的第几帧, size代表整个图片数据长度
3,MQTT接收数据
4,接收到消息以后,调用的sys.publish 发送通知(返回消息给MQTT)
发送的主题:device/base/设备的imei
下面是接收消息通知,并把消息发送到MQTT;
再下面是模拟发送的温湿度数据
微信小程序说明
1.点击添加设备菜单跳转到添加设备页面
2.点击扫码,调用扫码程序.扫码成功以后携带着数据跳转到index页面
3.index把接收的数据存储起来
4.在onShow显示数据
5,MQTT部分
paho-mqtt.js 官方底层包 mqtt.js本人再次封装的mqtt包,用户后期通信都是使用这个里面的api函数
用户可以根据自己的mqtt服务器更改参数
6,连接mqtt只需要在一开始的时候调用下
MQTT.ConnectMqtt();//链接MQTT
然后内部就是自动连接.
7,点击页面上的设备,携带着设备的MAC地址信息跳转到设备控制页面
8,控制页面在onLoad函数里面接收跳转的数据,并在里面设置MQTT回调函数
9.在定时器里订阅主题
10.在MQTT接收回调函数中接收处理数据
11.点击按钮发布LED控制命令
本文参与
腾讯云自媒体分享计划
,分享自作者个人站点/博客。
原始发表:2022-09-10,如有侵权请联系
cloudcommunity@tencent.com
删除
前往查看
mqtt
小程序
微信
javascript
本文分享自
作者个人站点/博客
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
本文参与
腾讯云自媒体分享计划
,欢迎热爱写作的你一起参与!
mqtt
小程序
微信
javascript
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
LV.
关注
文章
0
获赞
0
目录
实际效果
上面显示的是图像,下面温室湿度是模拟的数据,还有一个继电器的开关(实际控制开发板上的小灯)
测试(默认连接我的MQTT服务器测试)
1,安装好手机卡,天线,摄像头
2,下载这节的程序到开发板
程序里面设置的摄像头为30W,所以需要使用自定义的CORE, 可以自己生成,也可以使用我提供的
3,正常情况下开发板日志会显示如下
4,使用微信小程序开发工具打开微信小程序工程
5.注意事项
注:默认连接的我的服务器,mnif.cn,用户可以在详情里面选择不校验域名(不推荐,可能通信有问题)
推荐在微信小程序平台上设置域名白名单
6,点击 预览,使用微信扫码以后安装到手机
7.点击添加设备
8.扫码添加
9.扫描模组上面的二维码
10.扫描成功以后,自动跳转到主页面,并添加了一个设备
显示的为设备的IMEI号
11.点击设备进入设备控制页面
最上面会显示摄像头图像(每隔6S左右更新一张图片)
点击下面的控制按钮可以控制开发板上的灯
Air724程序说明
1,设置连接的MQTT信息,和订阅主题(user/设备的imei)
2,采集并发送图片数据(发送的主题:device/msg/设备的imei)
提示:发送图片的格式 {"imgdata":"FFD8...图片数据....FFD9","index":1,"count":2,"size":4567}
一张图片是分了好几次发送的,一次发送最大2184字节.
整体为json格式,图片数据是字符串形式的16进制, count代表总共有几帧数据, index代表当前传的第几帧, size代表整个图片数据长度
3,MQTT接收数据
4,接收到消息以后,调用的sys.publish 发送通知(返回消息给MQTT)
发送的主题:device/base/设备的imei
下面是接收消息通知,并把消息发送到MQTT;
再下面是模拟发送的温湿度数据
微信小程序说明
1.点击添加设备菜单跳转到添加设备页面
2.点击扫码,调用扫码程序.扫码成功以后携带着数据跳转到index页面
3.index把接收的数据存储起来
4.在onShow显示数据
5,MQTT部分
paho-mqtt.js 官方底层包 mqtt.js本人再次封装的mqtt包,用户后期通信都是使用这个里面的api函数
用户可以根据自己的mqtt服务器更改参数
6,连接mqtt只需要在一开始的时候调用下
MQTT.ConnectMqtt();//链接MQTT
然后内部就是自动连接.
7,点击页面上的设备,携带着设备的MAC地址信息跳转到设备控制页面
8,控制页面在onLoad函数里面接收跳转的数据,并在里面设置MQTT回调函数
9.在定时器里订阅主题
10.在MQTT接收回调函数中接收处理数据
11.点击按钮发布LED控制命令
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
免费体验
产品介绍
产品文档
精选特惠 用云无忧
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐