AWTK是基于C語言開發的跨平臺GUI框架?！禔WTK使用經驗》系列文章將介紹開發AWTK過程中一些常見問題與解決方案，例如：如何加載外部資源？如何設計自定義進度條？這些都會在系列文章進行解答。

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

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控件的攝像頭設備、大小等屬性，并且給該按鈕注冊點擊事件用于打開攝像頭。圖2使用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 獲?。?strong>。因此為了兼容不同LCD格式，可以在回調函數中寫好不同格式的拷貝像素邏輯。

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

static cv::Mat cv_image;static cv::VideoCapture cv_capture;
/* mutable_image_set_prepare_image回調函數 */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) { /* 調用OpenCV接口獲取攝像頭當前幀的原始RGB數據 */ cv::Vec3b val = cv_image.at(h, w); if (format == BITMAP_FMT_RGB888 || format == BITMAP_FMT_RGBA8888) { /* RGB888或 RGBA8888示例， 由于該示例上面cv::at數據的格式為BGR，需要進行轉換， 具體是否需要轉換根據實際格式而決定 */ 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控件畫面緩沖區上。