[camera_web] Re: Support for camera stream on web

packages/camera/camera_web/CHANGELOG.md

@@ -1,5 +1,6 @@
-## NEXT
+## 0.3.6
 
+* Supporting camera image stream on web.
 * Updates minimum supported SDK version to Flutter 3.22/Dart 3.4.
 
 ## 0.3.5

packages/camera/camera_web/example/integration_test/camera_bitrate_test.dart

@@ -106,6 +106,10 @@ void main() {
       ).thenAnswer(
           (_) => Future<MediaStream>.value(canvasElement.captureStream()));
 
+      when(
+        () => cameraService.hasPropertyOffScreenCanvas(),
+      ).thenAnswer((_) => true);
+
       final Camera camera = Camera(
           textureId: cameraId,
           cameraService: cameraService,

packages/camera/camera_web/example/integration_test/camera_service_test.dart

@@ -4,6 +4,7 @@
 
 // ignore_for_file: only_throw_errors
 
+import 'dart:async';
 import 'dart:js_interop';
 import 'dart:js_interop_unsafe';
 
@@ -903,5 +904,103 @@ void main() {
         );
       });
     });
+
+    group('camera image stream', () {
+      setUp(
+        () {
+          cameraService = cameraService..jsUtil = jsUtil;
+        },
+      );
+      testWidgets(
+        'returns true if broswer has OffscreenCanvas '
+        'otherwise false',
+        (WidgetTester widgetTester) async {
+          when(
+            () => jsUtil.hasProperty(
+              window,
+              'OffscreenCanvas'.toJS,
+            ),
+          ).thenReturn(true);
+          final bool hasOffScreenCanvas =
+              cameraService.hasPropertyOffScreenCanvas();
+          expect(
+            hasOffScreenCanvas,
+            true,
+          );
+          when(
+            () => jsUtil.hasProperty(
+              window,
+              'OffscreenCanvas'.toJS,
+            ),
+          ).thenReturn(false);
+          final bool hasNotOffScreenCanvas =
+              cameraService.hasPropertyOffScreenCanvas();
+          expect(
+            hasNotOffScreenCanvas,
+            false,
+          );
+        },
+      );
+      testWidgets(
+        'returns Camera Image of Size '
+        'when videoElement is of Size '
+        'when browser supports OffscreenCanvas',
+        (WidgetTester widgetTester) async {
+          const Size size = Size(10, 10);
+          final Completer<void> completer = Completer<void>();
+          final web.VideoElement videoElement =
+              getVideoElementWithBlankStream(size)
+                ..onLoadedMetadata.listen((_) {
+                  completer.complete();
+                })
+                ..load();
+          await completer.future;
+          when(() => cameraService.hasPropertyOffScreenCanvas()).thenReturn(
+            true,
+          );
+          final CameraImageData cameraImageData = cameraService.takeFrame(
+            videoElement,
+          );
+          expect(
+            size,
+            Size(
+              cameraImageData.width.toDouble(),
+              cameraImageData.height.toDouble(),
+            ),
+          );
+          verify(cameraService.hasPropertyOffScreenCanvas).called(1);
+        },
+      );
+      testWidgets(
+        'returns Camera Image of Size '
+        'when videoElement is of Size '
+        'when browser does not supports OffscreenCanvas',
+        (WidgetTester widgetTester) async {
+          const Size size = Size(10, 10);
+          final Completer<void> loadVideo = Completer<void>();
+          final web.VideoElement videoElement =
+              getVideoElementWithBlankStream(size)
+                ..onLoadedMetadata.listen((_) {
+                  loadVideo.complete();
+                })
+                ..load();
+          await loadVideo.future;
+          when(() => cameraService.hasPropertyOffScreenCanvas()).thenReturn(
+            false,
+          );
+          final CameraImageData cameraImageData = cameraService.takeFrame(
+            videoElement,
+          );
+          expect(
+            size,
+            Size(
+              cameraImageData.width.toDouble(),
+              cameraImageData.height.toDouble(),
+            ),
+          );
+          verify(cameraService.hasPropertyOffScreenCanvas).called(1);
+        },
+      );
+    });
   });
 }

packages/camera/camera_web/example/integration_test/camera_test.dart

@@ -5,6 +5,7 @@
 import 'dart:async';
 import 'dart:js_interop';
 import 'dart:js_interop_unsafe';
+import 'dart:typed_data';
 import 'dart:ui';
 
 import 'package:async/async.dart';
@@ -61,6 +62,10 @@ void main() {
           cameraId: any(named: 'cameraId'),
         ),
       ).thenAnswer((_) => Future<MediaStream>.value(mediaStream));
+
+      when(
+        () => cameraService.hasPropertyOffScreenCanvas(),
+      ).thenAnswer((_) => true);
     });
 
     setUpAll(() {
@@ -1704,5 +1709,107 @@ void main() {
         });
       });
     });
+    group('cameraFrameStream', () {
+      testWidgets(
+        'CameraImageData bytes is a multiple of 4 '
+        'when browser supports OffscreenCanvas',
+        (WidgetTester tester) async {
+          final VideoElement videoElement = getVideoElementWithBlankStream(
+            const Size(10, 10),
+          );
+
+          final Camera camera = Camera(
+            textureId: textureId,
+            cameraService: cameraService,
+          )..videoElement = videoElement;
+
+          when(() => cameraService.hasPropertyOffScreenCanvas()).thenReturn(
+            true,
+          );
+
+          when(
+            () => cameraService.takeFrame(videoElement),
+          ).thenAnswer(
+            (_) => CameraImageData(
+              format: const CameraImageFormat(
+                ImageFormatGroup.unknown,
+                raw: 0,
+              ),
+              planes: <CameraImagePlane>[
+                CameraImagePlane(
+                  bytes: Uint8List(32),
+                  bytesPerRow: videoElement.width * 4,
+                ),
+              ],
+              height: 10,
+              width: 10,
+            ),
+          );
+
+          final CameraImageData cameraImageData =
+              await camera.cameraFrameStream().first;
+          expect(
+            cameraImageData,
+            equals(
+              isA<CameraImageData>().having(
+                (CameraImageData e) => e.planes.first.bytes.length % 4,
+                'bytes',
+                equals(0),
+              ),
+            ),
+          );
+        },
+      );
+      testWidgets(
+        'CameraImageData bytes is a multiple of 4 '
+        'when browser does not supports OffscreenCanvas',
+        (WidgetTester tester) async {
+          final VideoElement videoElement = getVideoElementWithBlankStream(
+            const Size(10, 10),
+          );
+
+          final Camera camera = Camera(
+            textureId: textureId,
+            cameraService: cameraService,
+          )..videoElement = videoElement;
+
+          when(() => cameraService.hasPropertyOffScreenCanvas()).thenReturn(
+            false,
+          );
+
+          when(
+            () => cameraService.takeFrame(videoElement),
+          ).thenAnswer(
+            (_) => CameraImageData(
+              format: const CameraImageFormat(
+                ImageFormatGroup.unknown,
+                raw: 0,
+              ),
+              planes: <CameraImagePlane>[
+                CameraImagePlane(
+                  bytes: Uint8List(32),
+                  bytesPerRow: videoElement.width * 4,
+                ),
+              ],
+              height: 10,
+              width: 10,
+            ),
+          );
+
+          final CameraImageData cameraImageData =
+              await camera.cameraFrameStream().first;
+          expect(
+            cameraImageData,
+            equals(
+              isA<CameraImageData>().having(
+                (CameraImageData e) => e.planes.first.bytes.length % 4,
+                'bytes',
+                equals(0),
+              ),
+            ),
+          );
+        },
+      );
+    });
   });
 }

packages/camera/camera_web/example/integration_test/camera_web_test.dart

@@ -100,6 +100,10 @@ void main() {
         (_) async => videoElement.captureStream(),
       );
 
+      when(
+        () => cameraService.hasPropertyOffScreenCanvas(),
+      ).thenAnswer((_) => true);
+
       CameraPlatform.instance = CameraPlugin(
         cameraService: cameraService,
       )..window = window;

packages/camera/camera_web/lib/src/camera.dart

@@ -49,7 +49,8 @@ class Camera {
     required CameraService cameraService,
     this.options = const CameraOptions(),
     this.recorderOptions = const (audioBitrate: null, videoBitrate: null),
-  }) : _cameraService = cameraService;
+  })  : _cameraService = cameraService,
+        canUseOffscreenCanvas = cameraService.hasPropertyOffScreenCanvas();
 
   /// The texture id used to register the camera view.
   final int textureId;
@@ -159,6 +160,10 @@ class Camera {
   final StreamController<VideoRecordedEvent> videoRecorderController =
       StreamController<VideoRecordedEvent>.broadcast();
 
+  /// Used to check if allowed to paint canvas off screen
+  @visibleForTesting
+  bool canUseOffscreenCanvas = false;
+
   /// Initializes the camera stream displayed in the [videoElement].
   /// Registers the camera view with [textureId] under [_getViewType] type.
   /// Emits the camera default video track on the [onEnded] stream when it ends.
@@ -638,4 +643,70 @@ class Camera {
       ..height = '100%'
       ..objectFit = 'cover';
   }
+
+  final StreamController<CameraImageData> _cameraFrameStreamController =
+      StreamController<CameraImageData>.broadcast();
+
+  // TODO(replace): introduced fps in
+  /// [CameraImageStreamOptions]
+  final int cameraStreamFPS = 60;
+
+  /// Returns a stream of camera frames.
+  ///
+  /// To stop listening to new animation frames close all listening streams.
+  Stream<CameraImageData> cameraFrameStream({
+    CameraImageStreamOptions? options,
+  }) {
+    _cameraFrameStreamController.onListen = () {
+      _triggerAnimationFramesLoop(
+        _addCameraImageDataEvent,
+        fps: cameraStreamFPS,
+      );
+    };
+
+    return _cameraFrameStreamController.stream;
+  }
+
+  /// Triggers animation frames in a loop at a specified FPS
+  /// as long as [animationFrameId] is not cancelled
+  void _triggerAnimationFramesLoop(
+    VoidCallback action, {
+    required int fps,
+  }) {
+    int? animationFrameId;
+    num then = 0, fpsInterval = 1000 / fps;
+
+    int? animate(num timestamp) {
+      // Schedule the next frame
+      animationFrameId = window.requestAnimationFrame(animate.toJS);
+      // Calculate the elapsed time since the last frame
+      final num elapsed = timestamp - then;
+
+      // if we're close to the next frame (by ~8ms), do it.
+      if (fpsInterval - elapsed <= 8) {
+        // Get ready for next frame
+        then = timestamp;
+        // Perform the action task
+        action();
+      }
+      return animationFrameId;
+    }
+
+    // Initialize the animation loop
+    animationFrameId = animate(window.performance.now());
+
+    // Listen for the stream controller cancellation to stop the animation
+    _cameraFrameStreamController.onCancel = () {
+      if (animationFrameId != null) {
+        window.cancelAnimationFrame(animationFrameId!);
+        animationFrameId = null;
+      }
+    };
+  }
+
+  /// Used to trigger add event of camera image data in camera frame stream
+  void _addCameraImageDataEvent() {
+    final CameraImageData image = _cameraService.takeFrame(videoElement);
+    _cameraFrameStreamController.add(image);
+  }
 }