Flutter Web - Video covers the whole screen as If it is being opened on top of the flutter app.

[rutaba1]

Version of the agora_rtc_engine

6.3.0

Platforms affected

• Android
• iOS
• macOS
• Windows
• Web

Steps to reproduce

Initialise Agora
It opens camera but covers the whole screen

Expected results

The video should open inside my widget which I have specified

Actual results

The Video covers the whole screen as if it is being opened on top of the flutter app

Code sample

Here is the code of the widget I am using to display the video

Stack(
                        children: [
                          if (videoState?.focusUserId != null)
                            videoState?.focusUserId == videoState?.localUserId
                                ? AgoraVideoView(
                                    controller: VideoViewController(
                                      rtcEngine: engine,
                                      canvas: const VideoCanvas(uid: 0),
                                      useFlutterTexture: true,
                                      useAndroidSurfaceView: true,
                                    ),
                                    onAgoraVideoViewCreated: (viewId) {
                                      engine.startPreview();
                                    },
                                  )
                                : AgoraVideoView(
                                    controller: VideoViewController.remote(
                                      rtcEngine: engine,
                                      canvas: VideoCanvas(
                                          uid: videoState?.focusUserId),
                                      connection: RtcConnection(
                                          channelId:
                                              agoraDetailsModel.channelName),
                                      useFlutterTexture: true,
                                      useAndroidSurfaceView: true,
                                    ),
                                  ),
                          Container(
                            padding: const EdgeInsets.all(16),
                            alignment: Alignment.bottomCenter,
                            child: Wrap(
                              spacing: 8,
                              runSpacing: 8,
                              alignment: WrapAlignment.center,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              children: [
                                GenericIconButton(
                                  onPressed: () {
                                    videoControllerNotifier.toggleMute();
                                  },
                                  icon: videoState.isMuted == true
                                      ? FeatherIcons.micOff
                                      : FeatherIcons.mic,
                                  iconColor: AppColors.white,
                                ),
                                GenericElevatedButton(
                                  onPressed: () {
                                    videoControllerNotifier.leaveChannel();
                                    videoControllerNotifier.disposeEngine();
                                    SharedRouteHelper(context).pop();
                                  },
                                  text: "Leave",
                                  color: AppColors.red,
                                  leadingIcon: const Icon(Icons.close),
                                ),
                              ],
                            ),
                          ),
                        ],
                      )

The video should open in the stack but it's not

Screenshots or Video

5308ee86-62f4-4013-b3f6-1b61443760e4.mp4

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.19.4, on macOS 14.4.1 23E224 darwin-arm64, locale en-PK)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.88.0)
[✓] Connected device (3 available)
[✓] Network resources

[littleGnAl]

This issue had been fixed, please try the latest code on main branch.

[rutaba1]

@littleGnAl Do I need to reference library from main? Because I am still experiencing this and I am on version 6.3.0 which seems to be the latest on pub dev?

[littleGnAl]

Yes, it was fixed after 6.3.0.

[Silfalion]

Have the same issue as well on 6.3.0. Could it be an issue with the iris js file rather than the package itself?

[Silfalion]

Oh so sorry, just understood what you meant. The version is not yet published

[littleGnAl]

@Silfalion It's a break change of Flutter SDK 3.19.x, you can find more details here #1717, this fix has not been published to pub.dev yet, you need to use the main branch as a git package at this time.

[Silfalion]

Thank you for the explanation littleGnA. I pulled from the main branch and it fixed the issue, although now a new one appeared where popping out of the page the video stream stays on screens and hides the UI underneath it. I'll open an issue for that.

[github-actions]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please raise a new issue.