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

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

Flutter Dashhttps://flutter.cn/dash

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

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

Flutter webhttps://flutter.cn/web

Firebasehttps://firebase.google.com/

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

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

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

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

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

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

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

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

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)建了一個(gè)抽象布局，以根據(jù)相機(jī)權(quán)限顯示不同的界面。例如，在等待您允許或拒絕使用瀏覽器攝像頭時(shí)，或者如果沒(méi)有可供訪問(wèn)的攝像頭時(shí)，我們可以顯示一條說(shuō)明性消息。

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

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

生成鏡像照片

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

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

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

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

在 Flutter 團(tuán)隊(duì)的幫助下，我們將 VideoElement 放在 DivElement 中，并更新 VideoElement 以填充 DivElement 的寬度和高度，解決了這個(gè)問(wèn)題。這樣一來(lái)，我們能夠?yàn)橐曨l元素應(yīng)用鏡像，同時(shí)因?yàn)楦冈厥?div，所以不會(huì)被 Flutter 覆蓋翻轉(zhuǎn)效果。如此一來(lái)，我們便獲得了所需的鏡像攝像頭視圖！

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

保持寬高比

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

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

我們還應(yīng)用了 object-fit CSS 屬性來(lái)確保視頻元素能蓋住其父級(jí)容器。我們使用 Flutter 自帶的 AspectRatio widget 來(lái)設(shè)置寬高比。因此，攝像頭不會(huì)對(duì)顯示的寬高比做出任何假設(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）， ）， ），）;

通過(guò)拖放添加貼紙

I/O 照相亭的一大重要體驗(yàn)在于與您最喜歡的 Google 吉祥物合影并添加道具。您能夠在照片中拖放吉祥物和道具，以及調(diào)整大小和旋轉(zhuǎn)，直到獲得您喜歡的圖像。您也會(huì)發(fā)現(xiàn)，在將吉祥物添加到屏幕上時(shí)，您可以拖動(dòng)它們并調(diào)整其大小。吉祥物們還是有動(dòng)畫(huà)效果的——這種效果由 sprite sheet 來(lái)實(shí)現(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)整對(duì)象的大小，我們創(chuàng)建了可拖動(dòng)、可調(diào)整大小且可以容納其他 Flutter widget 的 widget，在本例中，即為吉祥物和道具。該 widget 會(huì)使用 LayoutBuilder，根據(jù)窗口的約束條件來(lái)處理 widget 的縮放。

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

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

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

通過(guò)多個(gè) GestureDetector 回饋的數(shù)據(jù)，Transform widget 和 4D 矩陣變換即可根據(jù)用戶所做的各種手勢(shì)處理縮放，以及旋轉(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)建了單獨(dú)的 package 來(lái)確定您的設(shè)備是否支持觸摸輸入?？赏蟿?dòng)、可調(diào)整大小的 widget 會(huì)根據(jù)觸摸功能做出相應(yīng)的調(diào)整。

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

針對(duì) Web 優(yōu)化 Flutter

使用 Flutter 針對(duì) Web 進(jìn)行開(kāi)發(fā)

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

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

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

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

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

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

可擴(kuò)展架構(gòu)

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

我們使用 flutter_bloc 進(jìn)行狀態(tài)管理，因?yàn)樗С治覀冚p松測(cè)試業(yè)務(wù)邏輯，并觀察應(yīng)用中的所有狀態(tài)變化。這對(duì)于生成開(kāi)發(fā)者日志和確?？勺匪菪蕴貏e有用，因?yàn)槲覀兛梢詼?zhǔn)確地觀察到從一個(gè)狀態(tài)到另一個(gè)狀態(tài)的變化，并更快地隔離問(wèn)題。

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

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

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

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

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

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

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

Firebase + Flutter = 完美組合

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

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

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

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

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

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

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

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

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

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

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

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

使用 Cloud Functions 進(jìn)行社交

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

我們使用 OffscreenCanvas API 或 CanvasElement 來(lái)合成原始照片、吉祥物和道具的圖層，并生成您可以下載的單個(gè)圖像。這個(gè)處理步驟由 image_compositor package 負(fù)責(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 強(qiáng)大的 Cloud Functions，來(lái)將照片分享到社交媒體。當(dāng)您點(diǎn)擊分享按鈕時(shí)，系統(tǒng)會(huì)帶您前往新標(biāo)簽頁(yè)，并在所選的社交平臺(tái)上自動(dòng)生成待發(fā)布的帖子。

該帖子還包含一個(gè)鏈接，連接到我們編寫(xiě)的 Cloud Functions。瀏覽器在分析網(wǎng)址時(shí)，會(huì)檢測(cè) Cloud Functions 生成的動(dòng)態(tài)元數(shù)據(jù)，并據(jù)此在您的社交帖子中顯示照片的精美預(yù)覽，以及一個(gè)指向分享頁(yè)面的鏈接，您的粉絲們可以在該頁(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 項(xiàng)目中使用 Firebase 的更多信息，請(qǐng)查看此 Codelab：

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

最終成果

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

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

編輯：jq