我們 （Very Good Ventures 團隊） 與 Google 合作，在今年的 Google I/O 大會上推出了照相亭互動體驗 （I/O Photo Booth）。您可以與深受喜愛的 Google 吉祥物合影： Flutter 的 Dash、Android Jetpack、Chrome 的 Dino 和 Firebase 的 Sparky，并用各種貼紙裝飾照片，包括派對帽、披薩、時髦眼鏡等。當然，您也可以通過社交媒體下載并分享，或者用作您的個人頭像！

Flutter Dashhttps://flutter.cn/dash

我們使用 Flutter web 和 Firebase 構建了 I/O 照相亭。因為 Flutter 現在支持打造 Web 應用，我們認為這將是一個很好的方式，可以讓世界各地的與會者在今年的線上 Google I/O 大會上輕松訪問這一應用。

Flutter web 消除了必須通過應用商店安裝應用的障礙，同時用戶還可以靈活選擇運行應用的設備： 移動設備、桌面設備或平板電腦。因此，只要能使用瀏覽器，用戶便可無需下載直接使用 I/O 照相亭。

Flutter webhttps://flutter.cn/web

Firebasehttps://firebase.google.com/

盡管 I/O 照相亭旨在提供 Web 體驗，但所有代碼均采用與平臺無關的架構編寫而成。當相機插件等原生功能的支持在各個平臺就緒后，這套代碼即可在所有平臺 （桌面、Web 和移動設備） 通用。

使用 Flutter 構建虛擬照相亭

構建 Web 版 Flutter 相機插件

第一個挑戰即在 Web 上為 Flutter 構建攝像頭插件。最初，我們聯系了 Baseflow 團隊，因為他們負責維護現有的開源 Flutter 攝像頭插件。Baseflow 致力于構建適用于 iOS 和 Android 的一流攝像頭插件支持，我們也很樂于與其合作，使用聯合插件 （federated plugin） 方法為插件提供 Web 支持。我們盡可能符合官方插件接口，以便我們可以在準備就緒時將其合并回官方插件。

Baseflowhttps://www.baseflow.com/

Flutter 攝像頭插件https://github.com/Baseflow/flutter-plugins

聯合插件https://flutter.cn/docs/development/packages-and-plugins/developing-packages#federated-plugins

我們確定了兩個對于在 Flutter 中構建 I/O 照相亭相機體驗至關重要的 API。

初始化攝像頭： 應用首先需要訪問您的設備攝像頭。對于桌面設備，訪問的可能是網絡攝像頭，而對于移動設備，我們選擇了訪問前置攝像頭。我們還提供了 1080p 的預期分辨率，以根據用戶設備類型充分提高拍攝質量。

拍照： 我們使用了內置的 HtmlElementView，該控件使用平臺視圖將原生 Web 元素渲染為 Flutter widget。在此項目中，我們將 VideoElement 渲染為原生 HTML 元素，這便是您在拍照前會在屏幕上看到的內容。我們還使用了一個 CanvasElement，用于在您點擊拍照按鈕時從媒體流中捕獲圖像。

HtmlElementViewhttps://api.flutter.cn/flutter/widgets/HtmlElementView-class.html

VideoElementhttps://api.flutter.cn/flutter/dart-html/VideoElement-class.html

CanvasElementhttps://api.flutter.cn/flutter/dart-html/CanvasElement-class.html

Future《CameraImage》 takePicture（） async { final videoWidth = videoElement.videoWidth; final videoHeight = videoElement.videoHeight; final canvas = html.CanvasElement（ width： videoWidth， height： videoHeight， ）; canvas.context2D 。.translate（videoWidth， 0） 。.scale（-1， 1） 。.drawImageScaled（videoElement， 0， 0， videoWidth， videoHeight）; final blob = await canvas.toBlob（）; return CameraImage（ data： html.Url.createObjectUrl（blob）， width： videoWidth， height： videoHeight， ）;}

攝像頭權限

在 Web 上完成 Flutter 攝像頭插件后，我們創建了一個抽象布局，以根據相機權限顯示不同的界面。例如，在等待您允許或拒絕使用瀏覽器攝像頭時，或者如果沒有可供訪問的攝像頭時，我們可以顯示一條說明性消息。

Camera（ controller： _controller， placeholder： （_） =》 const SizedBox（）， preview： （context， preview） =》 PhotoboothPreview（ preview： preview， onSnapPressed： _onSnapPressed， ）， error： （context， error） =》 PhotoboothError（error： error），）

在上面的抽象布局中，placeholder 會在應用等待您授予攝像頭權限時返回初始界面。Preview 則會在您授予權限后返回真實的界面，并顯示攝像頭的實時視頻流。結尾的 Error 構造語句則可以在錯誤發生時捕獲錯誤并顯示相應的消息。

生成鏡像照片

我們的下一個挑戰是生成鏡像照片。如果我們照原樣使用攝像頭拍攝的照片，那么您看到的內容將與您在照鏡子時所看到的內容不一樣。某些設備會提供專門處理這一問題的設置選項，所以，如果您用前置攝像頭拍照，您看到的其實是照片的鏡像版本。

鏡像拍攝https://9to5mac.com/2020/07/09/iphone-mirror-selfie-photos/

在我們的第一種方法中，我們嘗試捕捉默認的攝像頭視圖，然后圍繞 y 軸對其進行 180 度翻轉。這種方法似乎有效，但后來我們遇到了一個問題，即 Flutter 偶爾會覆蓋這個翻轉，導致視頻恢復到未鏡像的版本。

HtmlElementView 的變形被覆蓋https://github.com/flutter/flutter/issues/79519

在 Flutter 團隊的幫助下，我們將 VideoElement 放在 DivElement 中，并更新 VideoElement 以填充 DivElement 的寬度和高度，解決了這個問題。這樣一來，我們能夠為視頻元素應用鏡像，同時因為父元素是 div，所以不會被 Flutter 覆蓋翻轉效果。如此一來，我們便獲得了所需的鏡像攝像頭視圖！

DivElementhttps://api.flutter.cn/flutter/dart-html/DivElement-class.html

保持寬高比

在大屏幕上保持 4:3 寬高比，以及在小屏幕上保持 3:4 寬高比，這個操作起來比看起來更難！保持寬高比非常重要，既要符合 Web 應用的整體設計，又要確保在社交媒體上分享照片時，令其中的像素呈現出清晰的本色效果。這是一項具有挑戰性的任務，因為不同設備上內置攝像頭的寬高比差異很大。

為了強制保持寬高比，應用首先使用 JavaScript getUserMedia API 從設備攝像頭請求可能的最大分辨率。隨后，我們將此 API 傳遞到 VideoElement 流中，這便是您在攝像頭視圖中看到的內容 （當然是已鏡像的版本）。

我們還應用了 object-fit CSS 屬性來確保視頻元素能蓋住其父級容器。我們使用 Flutter 自帶的 AspectRatio widget 來設置寬高比。因此，攝像頭不會對顯示的寬高比做出任何假設；它始終返回支持的最大分辨率，然后遵守 Flutter 提供的約束條件 （在本例中為 4:3 或 3:4）。

getUserMediahttps://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

object-fithttps://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

final orientation = MediaQuery.of（context）.orientation;final aspectRatio = orientation == Orientation.portrait ？ PhotoboothAspectRatio.portrait ： PhotoboothAspectRatio.landscape;return Scaffold（ body： _PhotoboothBackground（ aspectRatio： aspectRatio， child： Camera（ controller： _controller， placeholder： （_） =》 const SizedBox（）， preview： （context， preview） =》 PhotoboothPreview（ preview： preview， onSnapPressed： （） =》 _onSnapPressed（ aspectRatio： aspectRatio， ）， ）， error： （context， error） =》 PhotoboothError（error： error）， ）， ），）;

通過拖放添加貼紙

I/O 照相亭的一大重要體驗在于與您最喜歡的 Google 吉祥物合影并添加道具。您能夠在照片中拖放吉祥物和道具，以及調整大小和旋轉，直到獲得您喜歡的圖像。您也會發現，在將吉祥物添加到屏幕上時，您可以拖動它們并調整其大小。吉祥物們還是有動畫效果的——這種效果由 sprite sheet 來實現。

for （final character in state.characters） DraggableResizable（ canTransform： character.id == state.selectedAssetId， onUpdate： （update） { context.read《PhotoboothBloc》（）.add（ PhotoCharacterDragged（ character： character， update： update， ）， ）; }， child： _AnimatedCharacter（name： character.asset.name）， ），

為調整對象的大小，我們創建了可拖動、可調整大小且可以容納其他 Flutter widget 的 widget，在本例中，即為吉祥物和道具。該 widget 會使用 LayoutBuilder，根據窗口的約束條件來處理 widget 的縮放。

在內部，我們使用 GestureDetector 以掛接到 onScaleStart、onScaleUpdate 和 onScaleEnd 事件。這些回調提供了必要的手勢詳細信息，以反映用戶對吉祥物和道具的操作。

LayoutBuilderhttps://api.flutter.cn/flutter/widgets/LayoutBuilder-class.html

GestureDetectorhttps://api.flutter.cn/flutter/widgets/GestureDetector-class.html

通過多個 GestureDetector 回饋的數據，Transform widget 和 4D 矩陣變換即可根據用戶所做的各種手勢處理縮放，以及旋轉吉祥物和道具。

Transformhttps://api.flutter.cn/flutter/widgets/Transform-class.html

Transform（ alignment： Alignment.center， transform： Matrix4.identity（） 。.scale（scale） 。.rotateZ（angle）， child： _DraggablePoint（。。。），）

最后，我們創建了單獨的 package 來確定您的設備是否支持觸摸輸入。可拖動、可調整大小的 widget 會根據觸摸功能做出相應的調整。

在具有觸摸輸入功能的設備上，您并不能看到調整大小的錨點和旋轉圖標，因為您可以通過雙指張合和平移手勢來直接操縱圖像；而在不支持觸摸輸入的設備 （例如您的桌面設備） 上，我們則添加了錨點和旋轉圖標，以適應單擊和拖動操作。

針對 Web 優化 Flutter

使用 Flutter 針對 Web 進行開發

這是我們使用 Flutter 構建的首批純 Web 項目之一，其與移動應用具有不同的特征。

我們需要確保該應用對任何設備上的任何瀏覽器都具有響應性和自適應性。也就是說，我們必須確保 I/O 照相亭可以根據瀏覽器大小進行縮放，并且能夠處理移動設備和 Web 端的輸入。我們通過以下幾種方式做到了這一點：

響應式調整大小： 用戶能夠隨意調整瀏覽器的大小，并且界面能做出響應。如果您的瀏覽器窗口為縱向，則相機會從 4:3 的橫向視圖翻轉為 3:4 的縱向視圖。

響應式設計： 針對桌面瀏覽器，我們設計為在右側顯示 Dash、Android Jetpack、Dino 和 Sparky，而對于移動設備，這些要素則會顯示在頂部。我們針對桌面設備，在攝像頭右側設計使用了抽屜式導航欄，而對于移動設備，則使用了 BottomSheet 類。

自適應輸入： 如果您使用桌面設備訪問 I/O 照相亭，則鼠標點擊操作將被視為輸入，如果您使用的是平板電腦或手機，則使用觸摸輸入。在調整貼紙大小并將其放置在照片中時，這一點尤其重要。移動設備支持雙指張合和平移手勢，桌面設備支持點擊和拖動操作。

創建響應式和自適應的應用https://flutter.cn/docs/development/ui/layout/adaptive-responsive

可擴展架構

我們還為此應用構建了可擴展的移動應用。我們的 I/O 照相亭在創建之初就具有穩固的基礎，包括良好的空安全性、國際化，以及從第一次提交開始就做到的 100% 單元和 widget 測試覆蓋率。

我們使用 flutter_bloc 進行狀態管理，因為它支持我們輕松測試業務邏輯，并觀察應用中的所有狀態變化。這對于生成開發者日志和確保可追溯性特別有用，因為我們可以準確地觀察到從一個狀態到另一個狀態的變化，并更快地隔離問題。

flutter_blochttps://pub.flutter-io.cn/packages/flutter_bloc

我們還實現了由功能驅動的單一代碼庫結構。例如，貼紙、分享和實時相機預覽，均在各自的文件夾中得到實現，其中每個文件夾包含其各自的界面組件和業務邏輯。這些功能也會用到外部依賴，例如位于 package 子目錄中的相機插件。

利用這種架構，我們的團隊能夠在互不干擾的情況下并行處理多個功能，最大限度地減少合并沖突，并有效地重用代碼。例如，界面組件庫是名為 photobooth_ui 的單獨 package，相機插件也是單獨的。

photobooth_uihttps://github.com/flutter/photobooth/tree/main/packages/photobooth_ui

通過將組件分成獨立的 package，我們可以提取未與此特定項目綁定的各個組件，并將其開源。與 Material 和 Cupertino 組件庫類似，我們甚至可以將界面組件庫 package 做開源處理，以供 Flutter 社區使用。

Materialhttps://flutter.cn/docs/development/ui/widgets/material

Cupertinohttps://flutter.cn/docs/development/ui/widgets/cupertino

Firebase + Flutter = 完美組合

Firebase Auth、存儲、托管等照相亭利用 Firebase 生態系統進行各種后端集成。firebase_auth package 支持用戶在應用啟動后立即匿名登錄。每個會話都使用 Firebase Auth 創建具有唯一 ID 的匿名用戶。

firebase_authhttps://pub.flutter-io.cn/packages/firebase_auth

當您來到共享頁面時，此設置即會開始發揮作用。您可以下載照片以保存為個人頭像，也可以直接將其分享到社交媒體。如果您下載照片，則該照片將存儲在您的本地設備上。如果您分享照片，我們會使用 firebase_storage package 將照片存儲在 Firebase 中，以便稍后檢索并生成帖子通過社交媒體發布。

firebase_storagehttps://pub.flutter-io.cn/packages/firebase_storage

我們在 Firebase 的存儲分區上定義了 Firebase 安全規則，確保照片在創建后不可變。這可以防止其他用戶修改或刪除存儲分區中的照片。此外，我們使用 Google Cloud 提供的對象生命周期管理，定義了一個刪除 30 天前所有對象的規則，但您可以按照應用中列出的說明請求盡快刪除您的照片。

Firebase 安全規則https://firebase.google.cn/docs/rules

對象生命周期管理https://cloud.google.com/storage/docs/lifecycle

此應用還使用 Firebase Hosting 快速安全地進行托管。我們可以借助 action-hosting-deploy GitHub Action，根據目標分支，將應用自動部署到 Firebase Hosting。當我們將變更合并到主分支時，該操作會觸發一個工作流，用于構建應用的特定開發版本，并將其部署到 Firebase Hosting。同樣，當我們將變更合并到發布分支時，該操作也會觸發部署生產版本。通過結合使用 GitHub Action 與 Firebase Hosting，我們的團隊能夠快速迭代，并始終得到最新版本的預覽。

Firebase Hostinghttps://firebase.google.cn/docs/hosting

action-hosting-deployhttps://github.com/FirebaseExtended/action-hosting-deploy

最后，我們使用 Firebase 性能監測來監控主要的 Web 性能指標：

https://firebase.google.cn/products/performance

使用 Cloud Functions 進行社交

在生成您的社交帖子之前，我們首先會確保照片內容是像素級完美的。最終圖像包含漂亮的邊框，以呈現 I/O 照相亭特色，并按 4:3 或 3:4 的寬高比進行裁剪，以便在社交帖子上呈現出色的效果。

我們使用 OffscreenCanvas API 或 CanvasElement 來合成原始照片、吉祥物和道具的圖層，并生成您可以下載的單個圖像。這個處理步驟由 image_compositor package 負責執行。

OffscreenCanvashttps://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

CanvasElementhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

image_compositorhttps://github.com/flutter/photobooth/tree/main/packages/image_compositor

然后，我們利用 Firebase 強大的 Cloud Functions，來將照片分享到社交媒體。當您點擊分享按鈕時，系統會帶您前往新標簽頁，并在所選的社交平臺上自動生成待發布的帖子。

該帖子還包含一個鏈接，連接到我們編寫的 Cloud Functions。瀏覽器在分析網址時，會檢測 Cloud Functions 生成的動態元數據，并據此在您的社交帖子中顯示照片的精美預覽，以及一個指向分享頁面的鏈接，您的粉絲們可以在該頁面上查看照片，并導航回 I/O 照相亭應用，以獲取他們自己的照片。

Cloud Functionshttps://firebase.google.cn/docs/functions

function renderSharePage（imageFileName： string， baseUrl： string）： string { const context = Object.assign（{}， BaseHTMLContext， { appUrl： baseUrl， shareUrl： `${baseUrl}/share/${imageFileName}`， shareImageUrl： bucketPathForFile（`${UPLOAD_PATH}/${imageFileName}`）， }）; return renderTemplate（shareTmpl， context）;}

有關如何在 Flutter 項目中使用 Firebase 的更多信息，請查看此 Codelab：

https://firebase.google.cn/codelabs/firebase-get-to-know-flutter#0

最終成果

本項目詳細地示范了如何針對 Web 來構建應用的方法。令我們感到驚喜的是，與使用 Flutter 構建移動應用的體驗相比，這個 Web 應用的構建工作流與之非常相似。我們必須考慮窗口大小、自適應、觸摸與鼠標輸入、圖像加載時間、瀏覽器兼容性等元素，以及在構建 Web 應用時所必需考慮的其他所有因素。

但是，我們仍然可以使用相同的模式、架構和編碼標準來編寫 Flutter 代碼，這讓我們在構建 Web 應用時感到非常自在。Flutter package 提供的工具和不斷發展的生態系統，包括 Firebase 工具套件，幫助我們實現了 I/O 照相亭。

編輯：jq