[camera] Add web support

packages/camera/camera/README.md

@@ -2,7 +2,7 @@
 
 [![pub package](https://img.shields.io/pub/v/camera.svg)](https://pub.dev/packages/camera)
 
-A Flutter plugin for iOS and Android allowing access to the device cameras.
+A Flutter plugin for iOS, Android and Web allowing access to the device cameras.
 
 *Note*: This plugin is still under development, and some APIs might not be available yet. We are working on a refactor which can be followed here: [issue](https://github.com/flutter/flutter/issues/31225)
 
@@ -45,6 +45,11 @@ minSdkVersion 21
 
 It's important to note that the `MediaRecorder` class is not working properly on emulators, as stated in the documentation: https://developer.android.com/reference/android/media/MediaRecorder. Specifically, when recording a video with sound enabled and trying to play it back, the duration won't be correct and you will only see the first frame.
 
+### Web integration
+
+For web integration details, see the
+[`camera_web` package](https://pub.dev/packages/camera_web).
+
 ### Handling Lifecycle states
 
 As of version [0.5.0](https://github.com/flutter/plugins/blob/master/packages/camera/CHANGELOG.md#050) of the camera plugin, lifecycle changes are no longer handled by the plugin. This means developers are now responsible to control camera resources when the lifecycle state is updated. Failure to do so might lead to unexpected behavior (for example as described in issue [#39109](https://github.com/flutter/flutter/issues/39109)). Handling lifecycle changes can be done by overriding the `didChangeAppLifecycleState` method like so:

packages/camera/camera/example/lib/main.dart

@@ -8,6 +8,7 @@ import 'dart:async';
 import 'dart:io';
 
 import 'package:camera/camera.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:video_player/video_player.dart';
 
@@ -231,7 +232,14 @@ class _CameraExampleHomeState extends State<CameraExampleHome>
                 ? Container()
                 : SizedBox(
                     child: (localVideoController == null)
-                        ? Image.file(File(imageFile!.path))
+                        ? (
+                            // The captured image on the web contains a network-accessible URL
+                            // pointing to a location within the browser. It may be displayed
+                            // either with Image.network or Image.memory after loading the image
+                            // bytes to memory.
+                            kIsWeb
+                                ? Image.network(imageFile!.path)
+                                : Image.file(File(imageFile!.path)))
                         : Container(
                             child: Center(
                               child: AspectRatio(
@@ -267,17 +275,24 @@ class _CameraExampleHomeState extends State<CameraExampleHome>
               color: Colors.blue,
               onPressed: controller != null ? onFlashModeButtonPressed : null,
             ),
-            IconButton(
-              icon: Icon(Icons.exposure),
-              color: Colors.blue,
-              onPressed:
-                  controller != null ? onExposureModeButtonPressed : null,
-            ),
-            IconButton(
-              icon: Icon(Icons.filter_center_focus),
-              color: Colors.blue,
-              onPressed: controller != null ? onFocusModeButtonPressed : null,
-            ),
+            // The exposure and focus mode are currently not supported on the web.
+            ...(!kIsWeb
+                ? [
+                    IconButton(
+                      icon: Icon(Icons.exposure),
+                      color: Colors.blue,
+                      onPressed: controller != null
+                          ? onExposureModeButtonPressed
+                          : null,
+                    ),
+                    IconButton(
+                      icon: Icon(Icons.filter_center_focus),
+                      color: Colors.blue,
+                      onPressed:
+                          controller != null ? onFocusModeButtonPressed : null,
+                    )
+                  ]
+                : []),
             IconButton(
               icon: Icon(enableAudio ? Icons.volume_up : Icons.volume_mute),
               color: Colors.blue,
@@ -499,38 +514,43 @@ class _CameraExampleHomeState extends State<CameraExampleHome>
               ? onTakePictureButtonPressed
               : null,
         ),
-        IconButton(
-          icon: const Icon(Icons.videocam),
-          color: Colors.blue,
-          onPressed: cameraController != null &&
-                  cameraController.value.isInitialized &&
-                  !cameraController.value.isRecordingVideo
-              ? onVideoRecordButtonPressed
-              : null,
-        ),
-        IconButton(
-          icon: cameraController != null &&
-                  cameraController.value.isRecordingPaused
-              ? Icon(Icons.play_arrow)
-              : Icon(Icons.pause),
-          color: Colors.blue,
-          onPressed: cameraController != null &&
-                  cameraController.value.isInitialized &&
-                  cameraController.value.isRecordingVideo
-              ? (cameraController.value.isRecordingPaused)
-                  ? onResumeButtonPressed
-                  : onPauseButtonPressed
-              : null,
-        ),
-        IconButton(
-          icon: const Icon(Icons.stop),
-          color: Colors.red,
-          onPressed: cameraController != null &&
-                  cameraController.value.isInitialized &&
-                  cameraController.value.isRecordingVideo
-              ? onStopButtonPressed
-              : null,
-        )
+        // Video recording is currently not supported on the web.
+        ...(!kIsWeb
+            ? [
+                IconButton(
+                  icon: const Icon(Icons.videocam),
+                  color: Colors.blue,
+                  onPressed: cameraController != null &&
+                          cameraController.value.isInitialized &&
+                          !cameraController.value.isRecordingVideo
+                      ? onVideoRecordButtonPressed
+                      : null,
+                ),
+                IconButton(
+                  icon: cameraController != null &&
+                          cameraController.value.isRecordingPaused
+                      ? Icon(Icons.play_arrow)
+                      : Icon(Icons.pause),
+                  color: Colors.blue,
+                  onPressed: cameraController != null &&
+                          cameraController.value.isInitialized &&
+                          cameraController.value.isRecordingVideo
+                      ? (cameraController.value.isRecordingPaused)
+                          ? onResumeButtonPressed
+                          : onPauseButtonPressed
+                      : null,
+                ),
+                IconButton(
+                  icon: const Icon(Icons.stop),
+                  color: Colors.red,
+                  onPressed: cameraController != null &&
+                          cameraController.value.isInitialized &&
+                          cameraController.value.isRecordingVideo
+                      ? onStopButtonPressed
+                      : null,
+                )
+              ]
+            : []),
       ],
     );
   }
@@ -621,12 +641,17 @@ class _CameraExampleHomeState extends State<CameraExampleHome>
     try {
       await cameraController.initialize();
       await Future.wait([
-        cameraController
-            .getMinExposureOffset()
-            .then((value) => _minAvailableExposureOffset = value),
-        cameraController
-            .getMaxExposureOffset()
-            .then((value) => _maxAvailableExposureOffset = value),
+        // The exposure mode is currently not supported on the web.
+        ...(!kIsWeb
+            ? [
+                cameraController
+                    .getMinExposureOffset()
+                    .then((value) => _minAvailableExposureOffset = value),
+                cameraController
+                    .getMaxExposureOffset()
+                    .then((value) => _maxAvailableExposureOffset = value)
+              ]
+            : []),
         cameraController
             .getMaxZoomLevel()
             .then((value) => _maxAvailableZoom = value),
@@ -696,16 +721,20 @@ class _CameraExampleHomeState extends State<CameraExampleHome>
   }
 
   void onCaptureOrientationLockButtonPressed() async {
-    if (controller != null) {
-      final CameraController cameraController = controller!;
-      if (cameraController.value.isCaptureOrientationLocked) {
-        await cameraController.unlockCaptureOrientation();
-        showInSnackBar('Capture orientation unlocked');
-      } else {
-        await cameraController.lockCaptureOrientation();
-        showInSnackBar(
-            'Capture orientation locked to ${cameraController.value.lockedCaptureOrientation.toString().split('.').last}');
+    try {
+      if (controller != null) {
+        final CameraController cameraController = controller!;
+        if (cameraController.value.isCaptureOrientationLocked) {
+          await cameraController.unlockCaptureOrientation();
+          showInSnackBar('Capture orientation unlocked');
+        } else {
+          await cameraController.lockCaptureOrientation();
+          showInSnackBar(
+              'Capture orientation locked to ${cameraController.value.lockedCaptureOrientation.toString().split('.').last}');
+        }
       }
+    } on CameraException catch (e) {
+      _showCameraException(e);
     }
   }
 

packages/camera/camera/example/web/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- Copyright 2013 The Flutter Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. -->
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="An example of the camera on the web.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" type="image/png" href="favicon.png" />
+
+  <title>Camera Web Example</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+
+<body>
+  <!-- This script installs service_worker.js to provide PWA functionality to
+       application. For more information, see:
+       https://developers.google.com/web/fundamentals/primers/service-workers -->
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('flutter_service_worker.js');
+      });
+    }
+  </script>
+  <script src="main.dart.js" type="application/javascript"></script>
+</body>
+
+</html>

packages/camera/camera/example/web/manifest.json

@@ -0,0 +1,23 @@
+{
+    "name": "camera example",
+    "short_name": "camera",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "An example of the camera on the web.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

packages/camera/camera/pubspec.yaml

@@ -1,6 +1,6 @@
 name: camera
 description: A Flutter plugin for getting information about and controlling the
-  camera on Android and iOS. Supports previewing the camera feed, capturing images, capturing video,
+  camera on Android, iOS and Web. Supports previewing the camera feed, capturing images, capturing video,
   and streaming image buffers to dart.
 repository: https://github.com/flutter/plugins/tree/master/packages/camera/camera
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+camera%22
@@ -18,9 +18,12 @@ flutter:
         pluginClass: CameraPlugin
       ios:
         pluginClass: CameraPlugin
+      web:
+        default_package: camera_web
 
 dependencies:
   camera_platform_interface: ^2.0.0
+  camera_web: ^0.0.1
   flutter:
     sdk: flutter
   pedantic: ^1.10.0

packages/camera/camera_platform_interface/lib/src/platform_interface/camera_platform.dart

@@ -64,19 +64,21 @@ abstract class CameraPlatform extends PlatformInterface {
   /// [imageFormatGroup] is used to specify the image formatting used.
   /// On Android this defaults to ImageFormat.YUV_420_888 and applies only to the imageStream.
   /// On iOS this defaults to kCVPixelFormatType_32BGRA.
+  /// On Web this parameter is currently not supported.
   Future<void> initializeCamera(
     int cameraId, {
     ImageFormatGroup imageFormatGroup = ImageFormatGroup.unknown,
   }) {
     throw UnimplementedError('initializeCamera() is not implemented.');
   }
 
-  /// The camera has been initialized
+  /// The camera has been initialized.
   Stream<CameraInitializedEvent> onCameraInitialized(int cameraId) {
     throw UnimplementedError('onCameraInitialized() is not implemented.');
   }
 
-  /// The camera's resolution has changed
+  /// The camera's resolution has changed.
+  /// On Web this returns an empty stream.
   Stream<CameraResolutionChangedEvent> onCameraResolutionChanged(int cameraId) {
     throw UnimplementedError('onResolutionChanged() is not implemented.');
   }
@@ -91,7 +93,7 @@ abstract class CameraPlatform extends PlatformInterface {
     throw UnimplementedError('onCameraError() is not implemented.');
   }
 
-  /// The camera finished recording a video
+  /// The camera finished recording a video.
   Stream<VideoRecordedEvent> onVideoRecordedEvent(int cameraId) {
     throw UnimplementedError('onCameraTimeLimitReached() is not implemented.');
   }
@@ -154,6 +156,7 @@ abstract class CameraPlatform extends PlatformInterface {
   }
 
   /// Sets the flash mode for the selected camera.
+  /// On Web [FlashMode.auto] corresponds to [FlashMode.always].
   Future<void> setFlashMode(int cameraId, FlashMode mode) {
     throw UnimplementedError('setFlashMode() is not implemented.');
   }
@@ -228,8 +231,8 @@ abstract class CameraPlatform extends PlatformInterface {
 
   /// Set the zoom level for the selected camera.
   ///
-  /// The supplied [zoom] value should be between 1.0 and the maximum supported
-  /// zoom level returned by the `getMaxZoomLevel`. Throws a `CameraException`
+  /// The supplied [zoom] value should be between the minimum and the maximum supported
+  /// zoom level returned by `getMinZoomLevel` and `getMaxZoomLevel`. Throws a `CameraException`
   /// when an illegal zoom level is supplied.
   Future<void> setZoomLevel(int cameraId, double zoom) {
     throw UnimplementedError('setZoomLevel() is not implemented.');

packages/camera/camera_platform_interface/lib/src/types/resolution_preset.dart

@@ -6,10 +6,10 @@
 ///
 /// If a preset is not available on the camera being used a preset of lower quality will be selected automatically.
 enum ResolutionPreset {
-  /// 352x288 on iOS, 240p (320x240) on Android
+  /// 352x288 on iOS, 240p (320x240) on Android and Web
   low,
 
-  /// 480p (640x480 on iOS, 720x480 on Android)
+  /// 480p (640x480 on iOS, 720x480 on Android and Web)
   medium,
 
   /// 720p (1280x720)