我們將分解說明我們的團隊如何與 Google 合作,透過運用 Google 工具的功能,打造更具沉浸感和未來感的照片亭體驗。我們使用 Flutter 和 Firebase 建立 Holobooth 應用程式。JavaScript 中的 Web ML 讓我們能夠透過虛擬、互動式、3D 頭像將體驗提升到新的水平。讓我們深入了解我們是如何建立它的!
使用 TensorFlow.js 偵測臉部
Holobooth 最令人興奮的功能之一是能夠將您臉部的即時影片,映射到 Dash(或 Sparky)的 3D 模型上,同時您穿梭在他們的虛擬世界中。如果您臉部表達驚訝,Dash 的臉部也會表達驚訝,依此類推。為了實現這一點,我們使用了 Flutter Web 的 camera Plugin 和 TensorFlow.js 來偵測相機畫面中使用者的臉部。更具體地說,我們使用了 MediaPipe FaceMesh 模型,它可以實時估計 468 個 3D 臉部特徵點,以偵測 Web 和行動瀏覽器中相機畫面中使用者臉部的特徵。
我們求助於 Rive 來讓 Holobooth 動畫栩栩如生。Rive 是一個使用 Flutter 建立的 Web 應用程式,它提供了用於建立高性能、輕量級、互動式動畫的工具,這些動畫易於整合到 Flutter 應用程式中。我們與 Rive 的才華洋溢的設計師和 HOPR 設計工作室 合作,創造出可以在我們的 Flutter 應用程式中無縫運作的動畫 Rive 圖形。動畫背景和頭像都是 Rive 動畫。
移動您的臉,看看 Rive 模型如何模仿您的行為
頭像使用 Rive 狀態機,讓我們可以控制頭像的行為和外觀。在 Rive 狀態機中,設計師指定所有輸入。輸入是由您的應用程式控制的值。您可以將它們視為設計和工程團隊之間的契約。您的產品程式碼可以隨時變更輸入的值,狀態機會對這些變更做出反應。
Holobooth 包含許多元素,這些元素擴展了 Flutter 的可能性 - 例如使用機器學習模型和 Rive 圖形,同時確保為使用者提供高性能、流暢的體驗。
與 TensorFlow.js 合作對 Very Good Ventures 來說是第一次。目前沒有官方的 Flutter 函式庫,因此我們在這個專案上的早期工作很大一部分是專注於對可用模型進行實驗,以確定哪個模型適合我們的需求。當我們確定了特徵點偵測模型後,我們就必須理解模型輸出的資料,並將它們映射到 Rive 動畫。以下是一個早期探索臉部偵測的範例:
臉部偵測的早期探索
官方 Flutter 的 camera Plugin 為我們提供了開箱即用的許多功能,但目前它不支持在 Web 上串流圖片。對於 Holobooth,我們 分支 了 camera Plugin 以添加此功能。我們希望這種功能可以在 未來由官方 Plugin 支援。
至於拖放和鍵盤快捷鍵,我們已經關注它們一段時間了。實際上,[Shortcuts Widget](https://api.flutter.dev/flutter/widgets/Shortcuts-class.html) 最近已發佈。您可以在最近的「[Widget of the Week](https://www.youtube.com/watch?v=6ZcQmdoz9N8) 集數」中看到它在行動。最後,拖放支援是我們在 2023 年的首要任務之一!
哪些套件可以使 Flutter 桌面開發變得更簡單?
桌面套件的支援還沒有趕上行動和網頁。桌面開發人員最需要的套件是:
多視窗(35%)
原生控制項(32%)
本地儲存(24%)
網頁檢視(23%)
Which APIs or features do you wish were better supported by Flutter?
此回饋與 Flutter 目前的優先事項清單密切相關,其中包含針對多視窗、原生選單和網頁檢視的 API。在這些 API 發佈後,我們可以開始優先考慮對本地數據儲存和數據庫存取的解決方案。一些目前優先順序較低,但仍值得考慮的其他套件需求是音訊/影片播放器和音訊/影片設備。在 Flutter Vikings 的焦點小組討論中,出現了對支援剪貼簿管理和複雜輸入設備(例如 3D 滑鼠、遊戲手柄控制器)套件的需求,但沒有包含在季度調查中。