AWTK是基于C語言開發的跨平臺GUI框架。《AWTK使用經驗》系列文章將介紹開發AWTK過程中一些常見問題與解決方案，例如：如何加載外部資源？如何設計自定義進度條？這些都會在系列文章進行解答。
假設目前想在?ZTP800示教器?的AWTK程序中實現播放視頻或者播放攝像頭畫面的效果，可以借助AWTK的mutable_image控件或usb_camera控件來顯示畫面。下圖則是ZTP800示教器使用usb_camera控件Demo顯示攝像頭畫面的效果圖：
?usb_camera控件和mutable_image控件的對比
1. mutable_image控件
mutable_image控件可以顯示視頻畫面，也可以顯示攝像頭等外接設備畫面。適用性比較廣泛，但使用起來相對繁瑣一些。它本身是不負責解析視頻或攝像頭設備畫面數據的，用戶可以通過第三方庫解析并獲取畫面原始RGB數據，將數據拷貝到mutable_image控件特定回調函數里面即可顯示畫面。
2. usb_camera控件
usb_camera控件本質上是對mutable_image控件的封裝，專門用于顯示攝像頭畫面。在控件內部實現了獲取并解析攝像頭畫面數據的代碼，用戶只需調用特定的API即可顯示攝像頭畫面，而不用手動拷貝原始RGB數據。與mutable_image相比沒那么廣，但是使用起來相對方便。
使用usb_camera控件顯示攝像頭畫面
使用usb_camera控件顯示攝像頭畫面的流程比較簡單：在AWStudio插件列表可以安裝該插件，之后在自己的AWTK應用放置一個usb_camera控件和一個按鈕控件，設置usb_camera控件的攝像頭設備、大小等屬性，并且給該按鈕注冊點擊事件用于打開攝像頭。?按鈕點擊事件回調函數可以參考以下代碼示例：
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 函數注冊一個回調函數，該回調函數在每次繪制之前被調用，用于準備下一幀要顯示的圖片。
由于mutable_image控件本身不帶有獲取視頻或攝像頭畫面的功能，因此獲取畫面數據的操作可以借助第三方庫（如：OpenCV）來實現。mutable_image為了以最高性能繪制，會采取和當前LCD相同的位圖數據格式（調用?lcd_get_desired_bitmap_format 獲取）。因此為了兼容不同LCD格式，可以在回調函數中寫好不同格式的拷貝像素邏輯。下面則是利用OpenCV接口獲取攝像頭數據并顯示到mutable_image控件的部分代碼示例：
static cv::Mat cv_image;static cv::VideoCapture cv_capture;
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) { cv::Vec3b val = cv_image.at(h, w); if (format == BITMAP_FMT_RGB888 || format == BITMAP_FMT_RGBA8888) { 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;}
上面代碼通過設置mutable_image控件的回調函數，在回調函數里面使用OpenCV的API獲取到攝像頭原始RGB數據，最后將數據寫到mutable_image控件畫面緩沖區上。
??技術交流群長按識別如下二維碼可加入“EsDA嵌入式系統設計自動化交流群”，與志同道合的朋友交流，并有專業技術人員為您答疑解惑，如有問題可以咨詢小致微信：zlgmcu-888。
