[camera_web] Support for camera stream on web

[TecHaxter]

This PR aims to provide support for strartImageStream and stopImageStream on Web.

#92460

Based on #6944 from the archived plugins repository

Pre-launch Checklist

• [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
• [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities.
• [x] I read and followed the [relevant style guides] and ran the auto-formatter. (Unlike the flutter/flutter repo, the flutter/packages repo does use dart format.)
• [x] I signed the [CLA].
• [x] The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
• [x] I [linked to at least one issue that this PR fixes] in the description above.
• [x] I updated pubspec.yaml with an appropriate new version according to the [pub versioning philosophy], or this PR is [exempt from version changes].
• [x] I updated CHANGELOG.md to add a description of the change, [following repository CHANGELOG style].
• [x] I updated/added relevant documentation (doc comments with ///).
• [x] I added new tests to check the change I am making, or this PR is [test-exempt].
• [x] All existing and new tests are passing.

POV: my first PR on a public repo

[google-cla[bot]]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[TecHaxter]

@ditman @bparrishMines Can you help me how to resolve these Checks?

[bparrishMines]

You should be able to click on details for the failing issue. It looks like this is the cause in the integration test

The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.
Failure Details:
Failure in method: bytes is a multiple of 4
══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞═════════════════
The following LateError was thrown running a test:
LateInitializationError: Field 'videoElement' has already been
initialized.

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
packages/camera_web/src/camera_service.dart.js 828:19                        set videoElement
packages/camera_web/src/camera_service.dart.js 859:27                        initialize
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1407:47                                         _rootRunUnary
dart-sdk/lib/async/zone.dart 1308:19                                         runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722:7                                    <fn>
dart-sdk/lib/async/zone.dart 1399:13                                         _rootRun
dart-sdk/lib/async/zone.dart 1301:19                                         run
dart-sdk/lib/async/zone.dart 1209:7                                          runGuarded
dart-sdk/lib/async/zone.dart 1249:23                                         callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

The test description was:
  bytes is a multiple of 4
═════════════════════════════════════════════════════════════════

end of failure 1

[TecHaxter]

@bparrishMines All the checks related to the files that were changed are passed, But some checks related to camera_android federated plugin are failing. There are no changes made in this PR for camera_android.

Linux_android android_device_tests_shard_1 master

Test failure for example/integration_test/camera_test.dart after 2 attempts

[packages/camera/camera completed in 7m 0s]


The following packages had errors:
  packages/camera/camera:
    example/integration_test/camera_test.dart failed tests
See above for full details.

Kindly review and let me know if any changes are required, Thanks :)

[TecHaxter]

@bparrishMines @ditman The PR is ready for review and merge, Thanks :)

[TecHaxter]

@matanlurey @camsim99 Can you review and identify what's wrong in android_device_tests_shard_1 check, Thanks :)

* What went wrong:
A problem occurred configuring project ':flutter_plugin_android_lifecycle'.
> Could not resolve all files for configuration ':flutter_plugin_android_lifecycle:classpath'.
   > Could not download opencensus-contrib-grpc-metrics-0.21.0.jar (io.opencensus:opencensus-contrib-grpc-metrics:0.21.0)
      > Could not get resource 'https://repo.maven.apache.org/maven2/io/opencensus/opencensus-contrib-grpc-metrics/0.21.0/opencensus-contrib-grpc-metrics-0.21.0.jar'.
         > Could not GET 'https://repo.maven.apache.org/maven2/io/opencensus/opencensus-contrib-grpc-metrics/0.21.0/opencensus-contrib-grpc-metrics-0.21.0.jar'. Received status code 503 from server: Service Unavailable
> Failed to notify project evaluation listener.
   > Could not get unknown property 'android' for project ':flutter_plugin_android_lifecycle' of type org.gradle.api.Project.
   > Could not get unknown property 'android' for project ':flutter_plugin_android_lifecycle' of type org.gradle.api.Project.

And why android checks are failing if there are no changes related to android federated plugin in this PR?

[camsim99]

@TecHaxter Re-ran it because I've seen a similar error before and it looks like it was a flake. As to why it ran, maybe @ditman knows?

[stuartmorgan-g]

@ditman It looks like this ready for another review.

[kevmoo]

Are we unblocked here @ditman ?

[stuartmorgan-g]

From triage: Ping @ditman on this review

[Piinks]

(PR triage): @ditman can you give this another look? Apologies @TecHaxter, thank you for your patience. It looks like there are some merge conflicts now, can you take a look? Thank you!

[ditman]

This is next in my review queue, will get to it on friday. I can deal with the conflicts (if @TecHaxter allows contributors to modify this PR)

[ditman]

@TecHaxter I'm going to rebase and foce push this branch to remove all the unneeded commits/participants.

[ditman]

This PR is super outdated, it never made it through the dart:html migration. Unfortunately, @TecHaxter didn't follow the tree hygiene docs and created this PR on the main branch of their fork, so I won't be able to fix this PR.

What I'm going to do, is try to cherry-pick @TecHaxter's commits on a new branch off of main, and see how far I can get:

dit@dit:/work/flutter/packages/packages/camera/camera_web$ git log [email protected] --no-merges --format=oneline --reverse
822c5bfe4e6663d70a251ecef2d015ce19b57f52 [camera/camera_web] Supporting camera stream on web
88dce1d8282139de2b788fe90b90ae09f397cec0 [camera_web] Version and Changelog updated
bcea8122ffc0dd729aadeb3c51f444cb8c4ad7f2 [camera_web] - integration test updated: mock videoElement initialized before expecting mock response
c776141e4b3e608c67bd7e4da3340e899f10b8c5 [camera_web] camera service takeFrame with better exception handelling
6d73310b0d4cd96d90639beb592a099ccd4efdc4 [camera_web] tested takeFrame camera service function
7244e7f5c33895cdc9fd4d40ffbcd80d76585600 [camera_web] tested cameraFrameStream
9ebbddbfeba60cb0d87cd020858861caa791cbca [camera_web] platform version updated according to guidelines
01594c48dbb3ea5f41ef7941ea9968cc4e2be51a style: removed late from late final_cameraFrameStreamController
7d83693b94e3592b22052456c21f32cfdc229f8e refactor: cameraFrameStream handles looping of animation frames
b3e8bc5cd4e4f2654dfc6aecdbd37fe46881bf18 refactor: saperated _triggerAnimationFramesLoop from cameraFrameStream, and used window.animationFrames
327dcdf9861fac4431f2d518649afe84f7ace97e chore: can use off screen canvas constant
ef44e13f6d5dfd563cf152e047b7b61789d8c01f chore: removed unnecessary string interpolation from videoElement style height and width in takeFrame
6c607056d10c5880da6976c8e1879e0f6afa3158 chore: reusing the OffscreenCanvas or CanvasElement depending on canUseOffScreenCanvas
7eceff29dffb69011011069b5de4b56e46f1b286 refactor: removed getCameraImageDataFromBytes to be used in-line
db792f415aa6847c3d2f18763feea7a7156b327b fix: setup hasPropertyOffScreenCanvas in tests
6a8c5db4a54c2c764ffe3c27925ddf18231e297f chore: version and changelog updated
4db1863e6b8560afd0950a634f0fc5a9091e33f9 docs: removed "Streaming of frames" from Missing implementation
56e5abbc8f44984e0ba8605816d5cdbb64cd22cb (HEAD, TecHaxter/main) Revert "docs: removed "Streaming of frames" from Missing implementation"

[TecHaxter]

This is next in my review queue, will get to it on friday. I can deal with the conflicts (if @TecHaxter allows contributors to modify this PR)

@ditman The following checkbox is marked true on this PR:

• [x] Allow edits by maintainers

Let me know if I requires to do anything with the PR. Thanks :)

[TecHaxter]

Hi @ditman,

I've resolved the merge conflicts, and the latest commits replace the dart:html imports with package:web.

Since window.animationFrame is unavailable in package:web, the implementation now utilizes window.requestAnimationFrame instead.

Additionally, the _triggerAnimationFramesLoop function has been updated to be non-blocking and non-recursive (in a technical sense). Currently, a static FPS value of 30 is being used, as requestAnimationFrame can execute faster on high-refresh-rate screens, leading to screen freezing if the FPS is not controlled.

We can remove this static FPS value later once FPS is introduced in CameraImageStreamOptions (the platform interface class).

[ditman]

@ditman The following checkbox is marked true on this PR:

I don't think I can push or force-push to your main branch, you should have created this off of a branch of your fork, rather than "main"?

I just want to fix this PR so it only shows your commits, and not 200 unrelated others :)

[TecHaxter]

Sorry for the trouble, @ditman . I've created a new PR #7950 by cherry picking required commits from this PR. Should we close this PR and keep the new one?, or is there any other way to continue with this PR? Let me know how you'd like to proceed. Thanks!

[TecHaxter]

@ditman I have just updated the rules on my fork repository main branch, it is open to all contributors (force push allowed) I appreciate your help, thanks :)

[ditman]

Should we close this PR and keep the new one?, or is there any other way to continue with this PR? Let me know how you'd like to proceed.

@TecHaxter thanks! You saved me a lot of trouble, haha!

Lets' close this PR, and continue on the new one. I'll try to review/change stuff over there!

I've updated the rules on my fork repository main branch, it is open to all contributors (force push allowed)

Now that you're working on a separate branch, you can keep your main branch protected (in fact, I rarely push to the main of my fork, I always use the "Sync fork" Github button to keep it updated!

[ditman]

Moved to:

• https://github.com/flutter/packages/pull/7950