使用Flutter和 Firebase輕松構(gòu)建Web應(yīng)用

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

Flutter Dashhttps://flutter.cn/dash

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

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

Flutter webhttps://flutter.cn/web

Firebasehttps://firebase.google.com/

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

使用 Flutter 構(gòu)建虛擬照相亭

構(gòu)建 Web 版 Flutter 相機插件

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

Baseflowhttps://www.baseflow.com/

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

聯(lián)合插件https://flutter.cn/docs/development/packages-and-plugins/developing-packages#federated-plugins

我們確定了兩個對于在 Flutter 中構(gòu)建 I/O 照相亭相機體驗至關(guān)重要的 API。

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

拍照： 我們使用了內(nèi)置的 HtmlElementView，該控件使用平臺視圖將原生 Web 元素渲染為 Flutter widget。在此項目中，我們將 VideoElement 渲染為原生 HTML 元素，這便是您在拍照前會在屏幕上看到的內(nèi)容。我們還使用了一個 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， ）;}

攝像頭權(quán)限

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

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

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

生成鏡像照片

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

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

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

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

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

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

保持寬高比

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

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

我們還應(yīng)用了 object-fit CSS 屬性來確保視頻元素能蓋住其父級容器。我們使用 Flutter 自帶的 AspectRatio widget 來設(shè)置寬高比。因此，攝像頭不會對顯示的寬高比做出任何假設(shè)；它始終返回支持的最大分辨率，然后遵守 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 吉祥物合影并添加道具。您能夠在照片中拖放吉祥物和道具，以及調(diào)整大小和旋轉(zhuǎn)，直到獲得您喜歡的圖像。您也會發(fā)現(xiàn)，在將吉祥物添加到屏幕上時，您可以拖動它們并調(diào)整其大小。吉祥物們還是有動畫效果的——這種效果由 sprite sheet 來實現(xiàn)。

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）， ），

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

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

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

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

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

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

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

最后，我們創(chuàng)建了單獨的 package 來確定您的設(shè)備是否支持觸摸輸入。可拖動、可調(diào)整大小的 widget 會根據(jù)觸摸功能做出相應(yīng)的調(diào)整。

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

針對 Web 優(yōu)化 Flutter

使用 Flutter 針對 Web 進行開發(fā)

這是我們使用 Flutter 構(gòu)建的首批純 Web 項目之一，其與移動應(yīng)用具有不同的特征。

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

響應(yīng)式調(diào)整大?。?用戶能夠隨意調(diào)整瀏覽器的大小，并且界面能做出響應(yīng)。如果您的瀏覽器窗口為縱向，則相機會從 4:3 的橫向視圖翻轉(zhuǎn)為 3:4 的縱向視圖。

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

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

創(chuàng)建響應(yīng)式和自適應(yīng)的應(yīng)用https://flutter.cn/docs/development/ui/layout/adaptive-responsive

可擴展架構(gòu)

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

我們使用 flutter_bloc 進行狀態(tài)管理，因為它支持我們輕松測試業(yè)務(wù)邏輯，并觀察應(yīng)用中的所有狀態(tài)變化。這對于生成開發(fā)者日志和確?？勺匪菪蕴貏e有用，因為我們可以準(zhǔn)確地觀察到從一個狀態(tài)到另一個狀態(tài)的變化，并更快地隔離問題。

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

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

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

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

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

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

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

Firebase + Flutter = 完美組合

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

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

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

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

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

Firebase 安全規(guī)則https://firebase.google.cn/docs/rules

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

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

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

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

最后，我們使用 Firebase 性能監(jiān)測來監(jiān)控主要的 Web 性能指標(biāo)：

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

使用 Cloud Functions 進行社交

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

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

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，來將照片分享到社交媒體。當(dāng)您點擊分享按鈕時，系統(tǒng)會帶您前往新標(biāo)簽頁，并在所選的社交平臺上自動生成待發(fā)布的帖子。

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

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）;}

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

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

最終成果

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

但是，我們?nèi)匀豢梢允褂孟嗤哪Ｊ?、架?gòu)和編碼標(biāo)準(zhǔn)來編寫 Flutter 代碼，這讓我們在構(gòu)建 Web 應(yīng)用時感到非常自在。Flutter package 提供的工具和不斷發(fā)展的生態(tài)系統(tǒng)，包括 Firebase 工具套件，幫助我們實現(xiàn)了 I/O 照相亭。

編輯：jq