一、前言
在物联网的诸多场景中，除了传感器是AIoT设备中的重要组成外，摄像头作为视觉输入的关键设备，在一些AI应用场景或者监控场景也是必不可少的，本文将带大家一起来给HaaS100开发板装上千里眼，并输出到屏幕显示，充分挖掘HaaS100的硬件能力，帮助你实现更多视觉业务场景应用。监控老板，监控xxx等等，充分发挥你的想象力吧！
二、方案简介
2.1 方案组成
整个方案由HaaS100、WiFi摄像头、LCD组成。LCD与HaaS100通过SPI连接，HaaS100通过Http请求获取到JPEG数据最终显示到LCD上。
2.2 WiFi摄像头选型
市面上的WiFi摄像头比较多，在本例中WiFi摄像头采用ESP官方的ESP32-EYE进行适配，ESP32-CAM是ESP32第三方厂商开发的一款低成本方案，应用也比较广泛，开发者也可以选择它作为方案之一，万能的淘宝上有很多卖家，商家也会提供相应的资料，购买链接如下：
ESP32-EYE: https://detail.tmall.com/item.htm?spm=a230r.1.14.1.150d6a6ftZ6h4K&id=611790371635&ns=1&abbucket=3
ESP32-CAM: https://detail.tmall.com/item.htm?spm=a230r.1.14.1.3f543b21XaGDay&id=581256720864&ns=1&abbucket=3
2.3 数据处理流程
HaaS100通过http请求到JPEG数据后，通过jpeg解码为RGB888数据，因为SPI LCD是RGB565格式，在送显前就需要将RGB888的数据通过格式转换模块转为RGB565格式。
三、方案实践
3.1 LCD适配
LCD的驱动适配请参考《HaaS100复古机来了》。
购买链接https://item.taobao.com/item.htm?spm=a1z09.2.0.0.768d2e8d9D3S7s&id=38842179442&_u=m1tg6s6048c2
3.2 ESP32-EYE开发配置
3.2.1 环境搭建
代码下载
$git clone --recursive https://github.com/espressif/esp-who.gitPython环境创建
这一个步骤不是必须的，不过如果你有多个python环境的需求，也安装过conda可以使用该步骤为esp32的开发创建一个独立的python开发环境，避免不同开发环境的相互影响。
$conda create -n esp32 python=3.8ESP-IDF安装
不同的操作系统安装的步骤也有所差异，请参考官网文档进行安装：
环境变量设置
这里以Macbook为例进行环境变量设置：
-
$cd ~/esp/esp-idf
-
$./install.sh
-
$chmod . $HOME/esp-who/esp-idf/export.sh
-
$source . $HOME/esp-who/esp-idf/export.sh
注意：
每次重启终端后都需要执行该步骤，否则找不到idf.py命令，或者可以加入到根目录.bashrc中不用每次再输入该命令。
代码编译
ESP32-EYE的代码中提供了多个Demo，使用camera_web_server来建立一个web服务器，该Demo中摄像头采集的数据以mjpeg格式提供，并且提供了以http请求的方式获取mjpeg/jpeg图像数据。编译需要进入到Demo的目录中：
-
$cd examples/single_chip/camera_web_server/
-
$idf.py build
代码烧录
$idf.py -p [port] flash例如：
idf.py -p /dev/cu.SLAB_USBtoUART flash
Log监视器
查看串口log，进入到camera_web_server所在目录执行。
$idf.py -p [port] monitor例如：
idf.py -p /dev/cu.SLAB_USBtoUART monitor
所以camera wifi的IP就是192.168.3.135。
3.2.2 ESP32 EYE网络设置
SoftAP模式
默认启动后ESP32 EYE已经开启了SSID为ESP32-Camera的AP，可以使用电脑连接该AP。
也可以通过修改sdkconfig来改变ssid/password、station连接数量、AP信道、服务器IP等，然后重新进行编译：
Station模式
ESP32也支持station与SoftAP模式共存，比如想让ESP32 EYE接入到SSID为haas_test的局域网中，修改sdkconfig中的ssid/password即可。
3.2.3 电脑访问获取图像
为了确认ESP32-EYE摄像头是否正常，先通过电脑方式查看web界面
http://192.168.4.1/：
直接抓取流http://192.168.4.1:81/stream：
抓取当前画面http://192.168.4.1/capture：
3.3 HaaS100开发
3.3.1 代码下载
参考《HaaS100快速开始》下载AliOS Things代码。
3.3.2 代码流程分析
代码下载后，wificamera_demo的代码路径：
$application/example/wificamera_demo
获取图像
LCD是320*240的屏，为了降低数据传输带宽的占用，将ESP32-EYE的摄像头数据采集分辨率相应的修改为QVGA(320*240)，同时当HaaS100接收到图像数据后不需要进行图像的裁剪处理，减少了CPU资源开销：
在app_entry.c中初始化时注册了一个WiFi事件处理函数：
-
int application_start(int argc, char **argv)
-
{
-
......
-
set_iotx_info();
-
netmgr_init();
-
......
-
aos_register_event_filter(EV_WIFI, wifi_service_event, NULL);
-
......
-
-
return 0;
-
}
当网络连接成功后，会进入到以下函数完成初始化及WiFi摄像头连接并获取图像数据的线程，另外也会进行物联网平台的连接。
-
static void wifi_service_event(input_event_t *event, void *priv_data)
-
{
-
if (event->type != EV_WIFI) {
-
return;
-
}
-
-
if (event->code != CODE_WIFI_ON_SNTP_OK)
-
return;
-
-
if (!linkkit_started) {
-
LOG("start to do ucloud_ai_demo\n");
-
if (ucloud_ai_init()
< 0)
-
return;
-
-
aos_task_new("wificamera_process",wificamera_main, NULL, 1024*10);
-
aos_task_new("linkkit", (void (*)(void *))linkkit_main, NULL, 1024 * 10);
-
linkkit_started = 1;
-
}
-
}
网络连接成功后进入到http_stream_process中调用http_get获取JPEG数据：
这里url参数就是WiFi摄像头的Web Server地址，这里通过capture方式获取图片进行显示，例如只需要传入http_stream_process("http://192.168.4.1:80/capture")即可获取JPEG图像。
-
int ucloud_ai_main(void *p)
-
{
-
int ret = 0;
-
int recv_len = 0;
-
char * customer_header = "Accept: */*\r\n";
-
FILE *jpegFile = NULL;
-
char *url = WIFICAMERA_URL;
-
char *upload_url = NULL;
-
-
LOG("start ucloud_ai_main\n");
-
/*for wificamera client*/
-
ret = httpclient_prepare(&wificamera_client_data, HEAD_SIZE, BODY_SZIE);
-
if (ret != HTTP_SUCCESS)
-
return -1;
-
-
wificamera_client.is_http = true;
-
httpclient_set_custom_header(&wificamera_client, customer_header);
-
ret = httpclient_conn(&wificamera_client, (const char *)url);
-
if(HTTP_SUCCESS != ret) {
-
LOGE(TAG, "http connect failed");
-
return -1;
-
}
-
-
/*for ai client*/
-
ret = httpclient_prepare(&ai_client_data, HEAD_SIZE, BODY_SZIE);
-
if (ret != HTTP_SUCCESS)
-
return -1;
-
ai_client.is_http = true;
-
httpclient_set_custom_header(&ai_client, customer_header);
-
......
-
-
while (1) {
-
ret = http_get_image(&wificamera_client, &wificamera_client_data, url);
-
if (ret
<= 0) {
-
LOGE(TAG, "http_get_image fail\n");
-
continue;
-
}
-
.......
-
}
获取一张图片的函数具体实现：
-
static int32_t http_get_image(httpclient_t *client, httpclient_data_t *client_data, char *url)
-
{
-
int ret;
-
int recv_len = 0;
-
-
httpclient_reset(client_data);
-
ret = httpclient_send(client, (const char *)url, HTTP_GET, client_data);
-
if(HTTP_SUCCESS != ret) {
-
LOGE(TAG, "http send request failed");
-
return -1;
-
}
-
do {
-
ret = httpclient_recv(client, client_data);
-
if (ret
< 0)
-
break;
-
recv_len =
client_data->response_content_len;
-
} while (ret == HTTP_EAGAIN);
-
return recv_len;
-
}
存储图像数据
在获取到一张图像后，把该图片保存到/data目录，实现函数如下：
-
static int32_t save_captured_image(char *buf, int len, char *path)
-
{
-
FILE *jpegFile;
-
-
if ((jpegFile = fopen(path, "wb")) == NULL) {
-
LOGE(TAG, "opening output file fail\n");
-
return -1;
-
}
-
if (fwrite(buf, len, 1, jpegFile)
< 1) {
-
LOGE(TAG, "write buf fail\n");
-
return -1;
-
}
-
fclose(jpegFile);
-
return 0;
-
}
在调试过程中，存储照片到sdcard可以帮助我们确认抓到的图片是否正常，存储到sdcard的路径是/sdcard/capture.jpg。
解码JPEG图像
在本Demo中实现了两种方式解码图片。使用A方式可以直接从文件系统中加载文件，使用B方式直接解码内存中的JPEG Buffer。
A. 直接使用SDL解码图片并显示，参数传入图片路径：
-
int graphics_draw_image(const char *file, int x, int y)
-
{
-
SDL_Rect drect = { x, y, 0, 0 };
-
if(strcmp(file, "") == 0) return;
-
for(int i = 0; i
< image_count; i++) {
-
if(strcmp(file, image[i].file) != 0) continue;
-
graphics_draw_texture(image[i].texture, x, y);
-
return 0;
-
}
-
graphics_generate_image(file);
-
graphics_draw_texture(image[image_count-1].texture, x, y);
-
return 0;
-
}
B. 使用libjpeg-turbo解码器，通过封装后将JPEG图片解码为RGB888格式数据输出：
-
int tjpeg2rgb(unsigned char* jpeg_buffer, int jpeg_size, unsigned char* rgb_buffer, int* size)
-
{
-
int ret = 0;
-
tjhandle handle = NULL;
-
int width, height, subsample, colorspace;
-
int flags = 0;
-
int pixelfmt = TJPF_RGB;
-
int pitch = 0;
-
-
handle = tjInitDecompress();
-
if (!handle) {
-
LOGE(TAG, "tjInitDecompress fail, ret = %d", ret);
-
return -1;
-
}
-
ret = tjDecompressHeader3(handle, jpeg_buffer, jpeg_size, &width, &height, &subsample, &colorspace);
-
if (ret
< 0) {
-
LOGE(TAG, "tjDecompressHeader3 fail, ret = %d", ret);
-
goto finish;
-
}
-
LOG("width: %d, height: %d", width, height);
-
flags |= 0;
-
if ((rgb_buffer = (unsigned char *)tjAlloc(width * height *
-
tjPixelSize[pixelfmt])) == NULL) {
-
LOGE(TAG, "allocating uncompressed image buffer");
-
goto finish;
-
}
-
*size = width * height * tjPixelSize[pixelfmt];
-
pitch = tjPixelSize[pixelfmt] * width;
-
ret = tjDecompress2(handle, jpeg_buffer, jpeg_size, rgb_buffer, width, pitch,
-
height, pixelfmt, flags);
-
if (ret < 0) {
-
LOGE(TAG, "tjDecompress2 fail, ret = %d", ret);
-
tjFree(rgb_buffer);
-
}
-
-
finish:
-
tjDestroy(handle);
-
return ret;
-
}
图像格式转换
因为屏幕是RGB565格式，需要将图像进一步转换为RGB565格式。
-
int rgb888torgb565(unsigned char* rgb888_buf, int rgb888_size, unsigned short *rgb565_buf, int rgb565_size)
-
{
-
int i = 0;
-
unsigned char Red = 0;
-
unsigned char Green = 0;
-
unsigned char Blue = 0;
-
int count = 0;
-
-
if(rgb888_buf == NULL || rgb888_size
<= 0 || rgb565_buf == NULL || \
-
rgb565_size <= 0 || (rgb565_size < (rgb888_size/3)*2)) {
-
printf("Invail input parameter in %s\n", __FUNCTION__);
-
return -1 ;
-
}
-
-
for(i = 0; i<rgb888_size; i += 3) {
-
Red = rgb888_buf[i] >> 3;
-
Green = rgb888_buf[i+1] >> 2;
-
Blue = rgb888_buf[i+2] >> 3;
-
rgb565_buf[count++] = ((Red
<<11)|(Green<<5)|(Blue));
-
}
-
return count;
-
}
显示图像画面
同样在显示图像画面也有两种方式实现。
A. 使用SDL显示：
-
void graphics_flip() {
-
SDL_RenderPresent(renderer);
-
SDL_RenderClear(renderer);
-
SDL_DestroyTexture(image_texture);
-
}
B. 使用LCD hal接口实现：
-
/*show picture on lcd screen*/
-
hal_lcd->lcd_frame_draw(framebuffer);
代码在前面的http_stream_process中实现，使用该方式直接调用lcd hal接口，如果不想通过SDL实现更丰富的UI相关功能，采用该方式的效率更高。
3.3.3 代码编译
-
$aos make distclean
-
$aos make wificamera_demo@haas100 -c config
-
$aos make
3.3.4 代码烧录
如果是使用的Window烧录工具参考《HaaS100快速开始》，烧录的文件位于：
$out/wificamera_demo@haas100/binary/wificamera_demo@haas100.bin将文件替换到write_flash_gui/ota_bin/ota_rtos.bin。
如果使用的是docker环境参考《一步搞定AliOS Things开发环境安装》4.3烧录固件。
3.3.5 网络连接
按照2.3配置ESP32-EYE后，我们可以通过SoftAP方式直接连接ESP32-EYE，或者将ESP32-EYE和HaaS100连接统一个路由器。
A. HaaS100连接ESP32 SoftAP：
$netmgr -t wifi -c ESP32-Camera使用该方法，使用http_stream_process("http://192.168.4.1:80/capture")获取图像数据。
B. HaaS100连接路由器：
$netmgr -t wifi -c haas_test 12345678ssid/password根据自己路由器配置进行修改。连接路由器后，就需要通过ESP32-EYE的串口Log来确认相应的IP是多少，如3.2.1.7看到连接路由器后的IP是192.168.3.135，然后填入到http_stream_process入口参数中。网络连接成功后就可以在LCD屏上看到画面了。
四、总结
WiFi摄像头因为网络具有一定的延迟，帧率在5～10帧，对于延迟要求不高的场合是可以满足需求的。后续会加入USB或SPI本地摄像头降低延迟丰富业务场景。喜欢本文的朋友可以点赞收藏，评论区回复交流哦，谢谢。
五、开发者技术支持
如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号
更多技术与解决方案介绍，请访问阿里云AIoT首页https://iot.aliyun.com/
转载：https://blog.csdn.net/HaaSTech/article/details/113253288