esp32-cam拍照,微信小程序照片显示

2021-06-02 10:25:06 浏览数 (2)

1、ESP32-cam开发环境配置

本例程 是利用arduino IDE开发,关于arduino IDE 的esp32环境配置可参考:环境配置: 点击跳转

安装好esp32 环境,开发板选择esp32 wrover module开发板,其他默认即可。

2 、程序下载

示例程序下载:点击下载

需要修改的信息有WIF名称,WIFI密码,用户私钥UID,设备主题topic。

代码语言:txt复制
/*********************需要修改的地方**********************/

const char* ssid = "newhtc";           //WIFI名称
const char* password = "qq123456";     //WIFI密码
int capture_interval = 20*1000;        // 默认20秒上传一次,可更改(本项目是自动上传,如需条件触发上传,在需要上传的时候,调用take_send_photo()即可)
const char*  post_url = "http://images.bemfa.com/upload/v1/upimages.php"; // 默认上传地址
const char*  uid = "4d9ec352e0376f2110a0c601a2857225";    //用户私钥,巴法云控制台获取
const char*  topic = "mypicture";     //主题名字,可在控制台 图云 处新建

/********************************************************/

用户私钥可以巴法云控制台 点击跳转 获取,注册登陆即可在巴法云控制台获取。https://cloud.bemfa.com/tcp/images.html

关于主题topic:主题可在控制台图云处创建, 点击跳转 新建,字母 数字自定义组合即可。

连线

在这里插入图片描述在这里插入图片描述

注意:下载的时候 ESP32-cam的io0要接GND,下载结束后,必须断开io0和GND的连接。

在arduino IDE 点击烧录上传,然后需要按一下esp32-cam的reset按键,程序才会下载。下载完成后,断开io0的连线,再按一下reset按键,就退出下载模式了,即可正常使用。注意:由于部分电脑USB电压不稳,会导致esp32反复重启,可使用充电宝等供电。

如果WIFI信息正常,esp32就会自动连接wifi,并进行拍照上传,默认20秒上传一次,可自行修改频率,或者更改为触发条件拍照,需要拍照上传的时候,调用一下take_send_photo()函数即可,比如

代码语言:txt复制
if(引脚==高电平)
{
   take_send_photo();
}

3、 控制台查看图片

登陆巴法云控制台,点击进入图云,即可查看到已经上传的图片,双击可查看大图。

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

第四、微信小程序开发

在 微信公众平台注册小程序账号,拿到小程序 appid,右侧点击 -开发--> 开发管理-->开发设置---->开发者ID,里面可以看到,长的大概是这样:wx34a2063de5cec04b,下面导入项目的时候会用到。

右侧点击 -开发--> 开发管理-->开发设置---->服务器域名。下方服务器域名处,点击修改,在request合法域名处,添加域名https://images.bemfa.com 保存提交即可。如下图。

01.png01.png

下载安装微信开发者工具,可百度下载。

下载demo示例程序。下载地址: 点击下载

打开微信开发者工具,小程序项目,导入项目。在目录处选择刚刚下载解压的demo示例程序,AppID处填入你的小程序AppID,然后点击下方导入即可。如下图。

03.png03.png

本示例程序非常简单,各位大神可以继续开发添加各种功能,界面修改,优化色彩等等,如果只是简单使用,只需修改/pages/index/index.js 文件中uid 和topic 信息为自己的即可,这里的uid和topic需要和esp32-cam填入的uid和topic相同,如下。

代码语言:txt复制
  data: {
    uid:"4d9ec352e0376f2110a0c601a2857225",//用户密钥,巴法云控制台获取
    myTopic:"mypicture",//图片上传的主题,图片云控制台创建
    num:5,      //获取的图片数量,可随意
    imgList:[], //存储图片地址和时间,用于前端展示
    picArr:[], //存储图片的地址,用于图片点击预览
  },

修改完毕后,ctrl s 保存修改。可以点击左边屏幕上的按钮进行调试,如下图。

04.png04.png

console控制台可以查看小程序的调试信息。

如果界面和其他功能都开发完毕。可以点击微信开发者工具的上面的上传按钮,如下图。

在这里插入图片描述在这里插入图片描述

上传成功后,再登陆刚刚注册的微信公众平台,在版本管理处,可以看到自己刚刚上传的小程序,提交审核即可,等一天左右,一般都会通过,通过后登陆微信公众平台,提交发布即可。如果是自己使用的,做好加上登陆验证功能,比如验证匹配一下某个字符串是否正确等等,不然小程序上线后别人也可以随意控制了。

在这里插入图片描述在这里插入图片描述
05.png05.png

0 人点赞