用 Flutter 和 Firebase 轻松构建 Web 应用

做者 / Very Good Ventures Teamhtml

咱们 (Very Good Ventures 团队) 与 Google 合做，在今年的 Google I/O 大会上推出了 照相亭互动体验 (I/O Photo Booth)。您能够与深受喜好的 Google 吉祥物合影: Flutter 的 Dash、Android Jetpack、Chrome 的 Dino 和 Firebase 的 Sparky，并用各类贴纸装饰照片，包括派对帽、披萨、时髦眼镜等。固然，您也能够经过社交媒体下载并分享，或者用做您的我的头像！git

△ Flutter 的 Dash、Firebase 的 Sparky、Android Jetpack 和 Chrome 的 Dinogithub

咱们使用 Flutter web 和 Firebase 构建了 I/O 照相亭。由于 Flutter 如今支持打造 Web 应用，咱们认为这将是一个很好的方式，可让世界各地的与会者在今年的线上 Google I/O 大会上轻松访问这一应用。Flutter web 消除了必须经过应用商店安装应用的障碍，同时用户还能够灵活选择运行应用的设备: 移动设备、桌面设备或平板电脑。所以，只要能使用浏览器，用户即可无需下载直接使用 I/O 照相亭。web

尽管 I/O 照相亭旨在提供 Web 体验，但全部代码均采用与平台无关的架构编写而成。当相机插件等原生功能的支持在各个平台就绪后，这套代码便可在全部平台 (桌面、Web 和移动设备) 通用。canvas

使用 Flutter 构建虚拟照相亭

构建 Web 版 Flutter 相机插件后端

第一个挑战即在 Web 上为 Flutter 构建摄像头插件。最初，咱们联系了 Baseflow 团队，由于他们负责维护现有的开源 Flutter 摄像头插件。Baseflow 致力于构建适用于 iOS 和 Android 的一流摄像头插件支持，咱们也很乐于与其合做，使用 联合插件 方法为插件提供 Web 支持。咱们尽量符合官方插件接口，以便咱们能够在准备就绪时将其合并回官方插件。api

咱们肯定了两个对于在 Flutter 中构建 I/O 照相亭相机体验相当重要的 API。浏览器

• 初始化摄像头: 应用首先须要访问您的设备摄像头。对于桌面设备，访问的多是网络摄像头，而对于移动设备，咱们选择了访问前置摄像头。咱们还提供了 1080p 的预期分辨率，以根据用户设备类型充分提升拍摄质量。
• 拍照: 咱们使用了内置的 HtmlElementView，该控件使用平台视图将原生 Web 元素渲染为 Flutter widget。在此项目中，咱们将 VideoElement 渲染为原生 HTML 元素，这即是您在拍照前会在屏幕上看到的内容。咱们还使用了一个 CanvasElement，用于在您点击拍照按钮时从媒体流中捕获图像。

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 构造语句则能够在错误发生时捕获错误并显示相应的消息。

生成镜像照片

咱们的下一个挑战是生成镜像照片。若是咱们照原样使用摄像头拍摄的照片，那么您看到的内容将与您在照镜子时所看到的内容不同。某些设备会提供专门处理这一问题的设置选项，因此，若是您用前置摄像头拍照，您看到的实际上是照片的镜像版本。

在咱们的第一种方法中，咱们尝试捕捉默认的摄像头视图，而后围绕 y 轴对其进行 180 度翻转。这种方法彷佛有效，但后来咱们遇到了 一个问题，即 Flutter 偶尔会覆盖这个翻转，致使视频恢复到未镜像的版本。

在 Flutter 团队的帮助下，咱们将 VideoElement 放在 DivElement 中，并更新 VideoElement 以填充 DivElement 的宽度和高度，解决了这个问题。这样一来，咱们可以为视频元素应用镜像，同时由于父元素是 div，因此不会被 Flutter 覆盖翻转效果。如此一来，咱们便得到了所需的镜像摄像头视图！

△ 未镜像的视图

△ 镜像视图

保持宽高比

在大屏幕上保持 4:3 宽高比，以及在小屏幕上保持 3:4 宽高比，这个操做起来比看起来更难！保持宽高比很是重要，既要符合 Web 应用的总体设计，又要确保在社交媒体上分享照片时，令其中的像素呈现出清晰的本色效果。这是一项具备挑战性的任务，由于不一样设备上内置摄像头的宽高比差别很大。

为了强制保持宽高比，应用首先使用 JavaScript getUserMedia API 从设备摄像头请求可能的最大分辨率。随后，咱们将此 API 传递到 VideoElement 流中，这即是您在摄像头视图中看到的内容 (固然是已镜像的版本)。咱们还应用了 object-fit CSS 属性来确保视频元素能盖住其父级容器。咱们使用 Flutter 自带的 AspectRatio widget 来设置宽高比。所以，摄像头不会对显示的宽高比作出任何假设；它始终返回支持的最大分辨率，而后遵照 Flutter 提供的约束条件 (在本例中为 4:3 或 3:4)。

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 事件。这些回调提供了必要的手势详细信息，以反映用户对吉祥物和道具的操做。

经过多个 GestureDetector 回馈的数据，Transform widget 和 4D 矩阵变换便可根据用户所作的各类手势处理缩放，以及旋转吉祥物和道具。

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 照相亭，则鼠标点击操做将被视为输入，若是您使用的是平板电脑或手机，则使用触摸输入。在调整贴纸大小并将其放置在照片中时，这一点尤为重要。移动设备支持双指张合和平移手势，桌面设备支持点击和拖动操做。

可扩展架构

咱们还为此应用构建了可扩展的移动应用。咱们的 I/O 照相亭在建立之初就具备稳固的基础，包括良好的空安全性、国际化，以及从第一次提交开始就作到的 100% 单元和 widget 测试覆盖率。咱们使用 flutter_bloc 进行状态管理，由于它支持咱们轻松测试业务逻辑，并观察应用中的全部状态变化。这对于生成开发者日志和确保可追溯性特别有用，由于咱们能够准确地观察到从一个状态到另外一个状态的变化，并更快地隔离问题。

咱们还实现了由功能驱动的单一代码库结构。例如，贴纸、分享和实时相机预览，均在各自的文件夹中获得实现，其中每一个文件夹包含其各自的界面组件和业务逻辑。这些功能也会用到外部依赖，例如位于 package 子目录中的相机插件。利用这种架构，咱们的团队可以在互不干扰的状况下并行处理多个功能，最大限度地减小合并冲突，并有效地重用代码。例如，界面组件库是名为 photobooth_ui 的单独 package，相机插件也是单独的。

经过将组件分红独立的 package，咱们能够提取未与此特定项目绑定的各个组件，并将其开源。与 Material 和 Cupertino 组件库相似，咱们甚至能够将界面组件库 package 作开源处理，以供 Flutter 社区使用。

Firebase + Flutter = 完美组合

Firebase Auth、存储、托管等

照相亭利用 Firebase 生态系统进行各类后端集成。firebase_auth package 支持用户在应用启动后当即匿名登陆。每一个会话都使用 Firebase Auth 建立具备惟一 ID 的匿名用户。

当您来到共享页面时，此设置即会开始发挥做用。您能够下载照片以保存为我的头像，也能够直接将其分享到社交媒体。若是您下载照片，则该照片将存储在您的本地设备上。若是您分享照片，咱们会使用 firebase_storage package 将照片存储在 Firebase 中，以便稍后检索并生成帖子经过社交媒体发布。

咱们在 Firebase 的存储分区上定义了 Firebase 安全规则，确保照片在建立后不可变。这能够防止其余用户修改或删除存储分区中的照片。此外，咱们使用 Google Cloud 提供的 对象生命周期管理，定义了一个删除 30 天前全部对象的规则，但您能够按照应用中列出的说明请求尽快删除您的照片。

此应用还使用 Firebase Hosting 快速安全地进行托管。咱们能够借助 action-hosting-deploy GitHub Action，根据目标分支，将应用自动部署到 Firebase Hosting。当咱们将变动合并到主分支时，该操做会触发一个工做流，用于构建应用的特定开发版本，并将其部署到 Firebase Hosting。一样，当咱们将变动合并到发布分支时，该操做也会触发部署生产版本。经过结合使用 GitHub Action 与 Firebase Hosting，咱们的团队可以快速迭代，并始终获得最新版本的预览。

最后，咱们使用 Firebase 性能监测 来监控主要的 Web 性能指标。

使用 Cloud Functions 进行社交

在生成您的社交帖子以前，咱们首先会确保照片内容是像素级完美的。最终图像包含漂亮的边框，以呈现 I/O 照相亭特点，并按 4:3 或 3:4 的宽高比进行裁剪，以便在社交帖子上呈现出色的效果。

咱们使用 OffscreenCanvas API 或 CanvasElement 来合成原始照片、吉祥物和道具的图层，并生成您能够下载的单个图像。这个处理步骤由 image_compositor package 负责执行。

而后，咱们利用 Firebase 强大的 Cloud Functions，来将照片分享到社交媒体。当您点击分享按钮时，系统会带您前往新标签页，并在所选的社交平台上自动生成待发布的帖子。该帖子还包含一个连接，链接到咱们编写的 Cloud Functions。浏览器在分析网址时，会检测 Cloud Functions 生成的动态元数据，并据此在您的社交帖子中显示照片的精美预览，以及一个指向分享页面的连接，您的粉丝们能够在该页面上查看照片，并导航回 I/O 照相亭应用，以获取他们本身的照片。

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。

最终成果

本项目详细地示范了如何针对 Web 来构建应用的方法。令咱们感到惊喜的是，与使用 Flutter 构建移动应用的体验相比，这个 Web 应用的构建工做流与之很是类似。咱们必须考虑窗口大小、自适应、触摸与鼠标输入、图像加载时间、浏览器兼容性等元素，以及在构建 Web 应用时所必需考虑的其余全部因素。可是，咱们仍然可使用相同的模式、架构和编码标准来编写 Flutter 代码，这让咱们在构建 Web 应用时感到很是自在。Flutter package 提供的工具和不断发展的生态系统，包括 Firebase 工具套件，帮助咱们实现了 I/O 照相亭。

△ 打造 I/O 照相亭的 Very Good Ventures 团队

咱们已经开放了全部源代码，欢迎你们前往 GitHub 查看 photo_booth 项目，也别忘了多多拍照秀出来哦！