AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架。《AWTK使用經(jīng)驗(yàn)》系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案，例如：如何加載外部資源？如何設(shè)計(jì)自定義進(jìn)度條？這些都會(huì)在系列文章進(jìn)行解答。

假設(shè)目前想在ZTP800示教器的AWTK程序中實(shí)現(xiàn)播放視頻或者播放攝像頭畫面的效果，可以借助AWTK的mutable_image控件或usb_camera控件來(lái)顯示畫面。下圖則是ZTP800示教器使用usb_camera控件Demo顯示攝像頭畫面的效果圖：
圖1ZTP800示教器顯示攝像頭畫面效果圖

usb_camera控件和mutable_image控件的對(duì)比

關(guān)于文章開(kāi)頭提到的兩個(gè)控件對(duì)比如下：

1. mutable_image控件

mutable_image控件可以顯示視頻畫面，也可以顯示攝像頭等外接設(shè)備畫面。適用性比較廣泛，但使用起來(lái)相對(duì)繁瑣一些。它本身是不負(fù)責(zé)解析視頻或攝像頭設(shè)備畫面數(shù)據(jù)的，用戶可以通過(guò)第三方庫(kù)解析并獲取畫面原始RGB數(shù)據(jù)，將數(shù)據(jù)拷貝到mutable_image控件特定回調(diào)函數(shù)里面即可顯示畫面。

2. usb_camera控件

usb_camera控件本質(zhì)上是對(duì)mutable_image控件的封裝，專門用于顯示攝像頭畫面。在控件內(nèi)部實(shí)現(xiàn)了獲取并解析攝像頭畫面數(shù)據(jù)的代碼，用戶只需調(diào)用特定的API即可顯示攝像頭畫面，而不用手動(dòng)拷貝原始RGB數(shù)據(jù)。與mutable_image相比沒(méi)那么廣，但是使用起來(lái)相對(duì)方便。

使用usb_camera控件顯示攝像頭畫面

使用usb_camera控件顯示攝像頭畫面的流程比較簡(jiǎn)單：在AWStudio插件列表可以安裝該插件，之后在自己的AWTK應(yīng)用放置一個(gè)usb_camera控件和一個(gè)按鈕控件，設(shè)置usb_camera控件的攝像頭設(shè)備、大小等屬性，并且給該按鈕注冊(cè)點(diǎn)擊事件用于打開(kāi)攝像頭。圖2使用usb_camera控件頁(yè)面布局示例

按鈕點(diǎn)擊事件回調(diào)函數(shù)可以參考以下代碼示例：

static ret_t on_button_click(void* ctx, event_t* e) { ret_t ret = RET_OK; widget_t* win = WIDGET(ctx); widget_t* camera = widget_lookup(win, "usb_camera", TRUE);
if(usb_camera_is_open(camera) && usb_camera_is_play(camera)) { usb_camera_stop(camera); usb_camera_close(camera); } else { ret = usb_camera_open(camera); if (ret != RET_OK) { dialog_toast("open camera fail", 3000); return ret; } return usb_camera_play(camera); } return RET_OK;}

使用mutable_image控件顯示視頻或攝像頭畫面

mutable_image控件主要提供了 mutable_image_set_prepare_image 函數(shù)注冊(cè)一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)在每次繪制之前被調(diào)用，用于準(zhǔn)備下一幀要顯示的圖片。
由于mutable_image控件本身不帶有獲取視頻或攝像頭畫面的功能，因此獲取畫面數(shù)據(jù)的操作可以借助第三方庫(kù)（如：OpenCV）來(lái)實(shí)現(xiàn)。mutable_image為了以最高性能繪制，會(huì)采取和當(dāng)前LCD相同的位圖數(shù)據(jù)格式（調(diào)用lcd_get_desired_bitmap_format 獲取）。因此為了兼容不同LCD格式，可以在回調(diào)函數(shù)中寫好不同格式的拷貝像素邏輯。

下面則是利用OpenCV接口獲取攝像頭數(shù)據(jù)并顯示到mutable_image控件的部分代碼示例：

static cv::Mat cv_image;static cv::VideoCapture cv_capture;
/* mutable_image_set_prepare_image回調(diào)函數(shù) */ret_t mutable_image_prepare_image(void* ctx, bitmap_t* image) { uint8_t* image_buff = NULL; uint32_t bpp = bitmap_get_bpp(image); widget_t* widget = WIDGET(ctx); bitmap_format_t format = (bitmap_format_t)image->format; cv_capture >> cv_image; image_buff = bitmap_lock_buffer_for_write(image); for (int h = 0; h < image->h; ++h) { uint8_t* p_buff = image_buff + image->w * h * bpp; for (int w = 0; w < image->w; ++w) { /* 調(diào)用OpenCV接口獲取攝像頭當(dāng)前幀的原始RGB數(shù)據(jù) */ cv::Vec3b val = cv_image.at(h, w); if (format == BITMAP_FMT_RGB888 || format == BITMAP_FMT_RGBA8888) { /* RGB888或 RGBA8888示例， 由于該示例上面cv::at數(shù)據(jù)的格式為BGR，需要進(jìn)行轉(zhuǎn)換， 具體是否需要轉(zhuǎn)換根據(jù)實(shí)際格式而決定 */ uint8_t blue = val[0]; uint8_t green = val[1]; uint8_t red = val[2]; p_buff[0] = red; p_buff[1] = green; p_buff[2] = blue; if (format == BITMAP_FMT_RGBA8888) { p_buff[3] = 255; } p_buff += bpp;
} else if (format == BITMAP_FMT_BGR888 || format == BITMAP_FMT_BGRA8888) { ... } else if (format == BITMAP_FMT_BGR565) { } else if (format == BITMAP_FMT_RGB565) { ... } } }
return bitmap_unlock_buffer(image);}
ret_t camera_open(widget_t* win) { widget_t* mutable_image = widget_child(win, "mutable_image");
cv_capture.open(0); mutable_image_set_prepare_image(mutable_image,mutable_image_prepare_image, mutable_image); return RET_OK;}

上面代碼通過(guò)設(shè)置mutable_image控件的回調(diào)函數(shù)，在回調(diào)函數(shù)里面使用OpenCV的API獲取到攝像頭原始RGB數(shù)據(jù)，最后將數(shù)據(jù)寫到mutable_image控件畫面緩沖區(qū)上。