[camera_web] Re: Support for camera stream on web

packages/camera/camera_web/CHANGELOG.md

@@ -1,5 +1,6 @@
-## NEXT
+## 0.3.6
 
+* Adds support for camera image stream on web.
 * Updates minimum supported SDK version to Flutter 3.35/Dart 3.9.
 
 ## 0.3.5+3

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

@@ -65,10 +65,11 @@ void main() {
       mockWindow.navigator = navigator;
       mockNavigator.mediaDevices = mediaDevices;
 
-      final canvasElement = HTMLCanvasElement()
-        ..width = videoSize.width.toInt()
-        ..height = videoSize.height.toInt()
-        ..context2D.clearRect(0, 0, videoSize.width, videoSize.height);
+      final canvasElement =
+          HTMLCanvasElement()
+            ..width = videoSize.width.toInt()
+            ..height = videoSize.height.toInt()
+            ..context2D.clearRect(0, 0, videoSize.width, videoSize.height);
 
       final videoElement = HTMLVideoElement();
 
@@ -91,6 +92,8 @@ void main() {
         cameraService.getMediaStreamForOptions(options, cameraId: cameraId),
       ).thenAnswer((_) async => canvasElement.captureStream());
 
+      when(cameraService.hasPropertyOffScreenCanvas()).thenAnswer((_) => true);
+
       final 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';
 
@@ -975,5 +976,55 @@ void main() {
         );
       });
     });
+
+    group('camera image stream', () {
+      setUp(() {
+        cameraService = cameraService..jsUtil = jsUtil;
+      });
+      testWidgets('returns true if broswer has OffscreenCanvas '
+          'otherwise false', (WidgetTester widgetTester) async {
+        for (final supportsOffscreenCanvas in <bool>[true, false]) {
+          when(
+            jsUtil.hasProperty(window, 'OffscreenCanvas'.toJS),
+          ).thenReturn(supportsOffscreenCanvas);
+          final bool hasOffScreenCanvas = cameraService
+              .hasPropertyOffScreenCanvas();
+          expect(
+            hasOffScreenCanvas,
+            supportsOffscreenCanvas ? isTrue : isFalse,
+          );
+        }
+      });
+      testWidgets('returns Camera Image of Size '
+          'when videoElement is of Size '
+          'regardless of OffscreenCanvas support', (
+        WidgetTester widgetTester,
+      ) async {
+        const size = Size(10, 10);
+        final completer = Completer<void>();
+        final web.VideoElement videoElement =
+            getVideoElementWithBlankStream(size)
+              ..onLoadedMetadata.listen((_) {
+                completer.complete();
+              })
+              ..load();
+        await completer.future;
+        for (final supportsOffscreenCanvas in <bool>[true, false]) {
+          when(
+            jsUtil.hasProperty(window, 'OffscreenCanvas'.toJS),
+          ).thenReturn(supportsOffscreenCanvas);
+          final CameraImageData cameraImageData = cameraService.takeFrame(
+            videoElement,
+          );
+          expect(
+            size,
+            Size(
+              cameraImageData.width.toDouble(),
+              cameraImageData.height.toDouble(),
+            ),
+          );
+        }
+      });
+    });
   });
 }

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,8 @@ void main() {
           cameraId: anyNamed('cameraId'),
         ),
       ).thenAnswer((_) => Future<MediaStream>.value(mediaStream));
+
+      when(cameraService.hasPropertyOffScreenCanvas()).thenAnswer((_) => true);
     });
 
     group('initialize', () {
@@ -1537,5 +1540,52 @@ void main() {
         });
       });
     });
+    group('cameraFrameStream', () {
+      testWidgets('CameraImageData bytes is a multiple of 4 '
+          'regardless of OffscreenCanvas support', (WidgetTester tester) async {
+        final VideoElement videoElement = getVideoElementWithBlankStream(
+          const Size(10, 10),
+        );
+        final camera = Camera(
+          textureId: textureId,
+          cameraService: cameraService,
+        )..videoElement = videoElement;
+
+        for (final supportsOffscreenCanvas in <bool>[true, false]) {
+          when(
+            cameraService.hasPropertyOffScreenCanvas(),
+          ).thenReturn(supportsOffscreenCanvas);
+
+          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

@@ -95,6 +95,8 @@ void main() {
         ),
       ).thenAnswer((_) async => videoElement.captureStream());
 
+      when(cameraService.hasPropertyOffScreenCanvas()).thenAnswer((_) => true);
+
       CameraPlatform.instance = CameraPlugin(cameraService: cameraService)
         ..window = window;
     });
@@ -2219,6 +2221,12 @@ void main() {
       );
     });
 
+    testWidgets('supportsImageStreaming returns true', (
+      WidgetTester tester,
+    ) async {
+      expect(CameraPlatform.instance.supportsImageStreaming(), isTrue);
+    });
+
     group('dispose', () {
       late Camera camera;
       late MockVideoElement mockVideoElement;