用一堆零件,做出一台會拍照的迷你相機

01專案概覽

目標:相機畫面即時顯示在小螢幕上,並用搖桿操作拍照、濾鏡、相簿、錄影。最終完成的功能:

• Live View即時取景(RGB565 → TFT)
• Photo + EXIF拍照存 JPEG,寫入拍攝時間
• Filter濾鏡特效 + 亮度即時調整
• Gallery相簿:翻看 SD 卡照片
• Video錄影:MJPEG 存成 .avi
• WiFi Send熱點 + 網頁下載照片 + OTA
• Screen Sleep閒置關背光,搖桿喚醒
• OV2640 / OV5640相機可換,自動偵測

02手上的零件

最右邊那顆帶鏡頭的就是 XIAO ESP32-S3 Sense;中間是 2.4″ ILI9341 顯示器;還有搖桿、麵包板、杜邦線。相機透過 Sense 底板內部走線,不佔外露排針。

03硬體:接腳不是想像的那樣

實體顯示器的絲印是 GND VCC SCL SDA RES DC CS BLK(8 pin、無 MISO)。SCL/SDA 不是 I2C,而是 SPI 的時脈/資料,只是廠商命名不同。SD 卡與顯示器共用同一組 SPI。

絲印	別名	XIAO
GND	GND	GND
VCC	VCC	3V3
SCL	SCK 時脈	D8
SDA	MOSI 資料	D10
RES	RESET	D0
DC	DC	D3
CS	CS	D1
BLK	背光	3V3

04除錯歷程:六道關卡

從編譯不過,到畫面損毀、顏色錯亂——每一關的症狀、根因與解法。失敗畫面用程式重現當時的樣子(示意)。

1

Compile Error

找不到 esp32-hal-periman.h

fatal error: esp32-hal-periman.h: No such file or directory

根因

ESP32 Arduino 核心太舊(2.x);新版 Arduino_GFX 需要核心 3.x 才有的檔案。

解法

開發板管理員把 esp32 by Espressif 更新到 3.x。

2

Compile Error

'BLACK' was not declared

error: 'BLACK' was not declared in this scope

根因

新版 Arduino_GFX 移除了 BLACK/WHITE/RED 這些顏色名稱(避免與其他函式庫衝突)。

解法

自訂顏色常數,不依賴函式庫命名:

#define COL_BLACK 0x0000
#define COL_WHITE 0xFFFF
#define COL_RED   0xF800

3

Runtime · Photo

拍好的照片變迷幻塗抹

症狀

即時預覽正常,但存下的照片色彩糊成一片藍紫、有隱約輪廓。

推論

相機 RGB565 是大端序,預覽用 draw16bitBeRGBBitmap 沒事;但存檔用的 frame2jpg 需要小端序,顏色平面被打亂。

當時嘗試

存檔前先交換每個像素的位元組再編碼。(結果見下一關)

失敗畫面 · 實拍
結構還在,但色彩像融化的油畫。

4

Runtime · Photo

改了位元序,變成藍色雜訊

症狀

交換位元組後,照片反而變成整片藍色雜訊,結構全失。

結論

在這顆相機上,frame2jpg(RGB565→JPEG)這條路怎麼調都不可靠。

解法

改用相機的原生 JPEG 輸出拍照——按下時暫時切到 JPEG 模式直接存,存完切回取景。這條路和錄影相同,顏色天生正確。

失敗畫面 · 實拍
藍色雜訊,幾乎看不出內容。

5

Runtime · 關鍵根因

結構仍損毀 → 揪出真正兇手

症狀

用原生 JPEG 後,照片有時仍部分損毀。

查證

上網比對官方社群範例,發現 XIAO ESP32-S3 Sense 的相機 XCLK 時脈設 20MHz 太快,擷取時會 DMA 溢位(EV-VSYNC-OVF),產生損毀影格。預覽因一直刷新看不太出來,存成單張就定格了。

解法

把 XCLK 從 20MHz 降到 10MHz——結構立刻完全正確!

- config.xclk_freq_hz = 20000000;
+ config.xclk_freq_hz = 10000000;  // XIAO Sense 必須

轉捩點
結構回來了(右半可辨識),只剩顏色問題。

6

Runtime · Color

最後一哩:紅藍互換

症狀

畫面結構完全正確,但藍色的烙鐵台顯示成紫紅色——典型紅藍通道互換。

根因

相簿/影片預覽用 TJpg 解碼,搭配 Arduino_GFX 的 draw16bitRGBBitmap 時,setSwapBytes(true) 造成位元組換位。

解法

改成 false 即可,純顯示端修正,照片本身不用重拍。

- TJpgDec.setSwapBytes(true);
+ TJpgDec.setSwapBytes(false);

失敗畫面 · 實拍
結構對了,藍↔紅整片偏紫紅。

✓

Solved

畫面正常,大功告成

結果

即時取景、拍照、濾鏡、相簿、錄影全部運作;顏色正確、影像清晰。

成功畫面 · 示意
清晰、色彩正確的即時取景。

05功能演進(相機能動之後)

畫面穩定後,把它從「會顯示的相機」一步步養成一台真正好用的裝置。

06學到的重點

• 版本相依函式庫與核心版本要對上(periman.h、顏色常數都是版本坑)
• 位元序相機 RGB565 是大端序;顯示、編碼、解碼各有各的位元序設定
• XCLK 10MHzXIAO Sense 擷取(尤其 JPEG)務必降到 10MHz
• 原生 JPEG拍照/錄影走相機原生 JPEG,避開 RGB565 轉檔的坑
• 共用 SPI顯示器與 SD 卡共用匯流排,讀檔要讀滿、注意時序
• 先分而治之把「檔案壞」與「顯示壞」分開驗證(拔卡到電腦看),少走冤枉路
• 知道何時收手BLE 自動對時查證後不可行就放棄,避免白工也是工程判斷
• 省電看硬體要真正關背光,得能用 GPIO 控制 BLK 腳,不只是畫面變黑
• 自動偵測好處多換 OV5640 免改腳位,只需調 XCLK 與畫面方向