Agora-Flutter-SDK icon indicating copy to clipboard operation
Agora-Flutter-SDK copied to clipboard

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

Open rutaba1 opened this issue 1 year ago • 7 comments

Version of the agora_rtc_engine

6.3.0

Platforms affected

  • [ ] Android
  • [ ] iOS
  • [ ] macOS
  • [ ] Windows
  • [X] 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

https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/assets/71274568/be19ff46-bd10-4a98-80da-dd9c2d80cbc6

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

rutaba1 avatar Apr 30 '24 13:04 rutaba1

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

littleGnAl avatar Apr 30 '24 14:04 littleGnAl

@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?

rutaba1 avatar Apr 30 '24 18:04 rutaba1

Yes, it was fixed after 6.3.0.

littleGnAl avatar May 06 '24 06:05 littleGnAl

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 avatar May 06 '24 13:05 Silfalion

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

Silfalion avatar May 06 '24 13:05 Silfalion

@Silfalion It's a break change of Flutter SDK 3.19.x, you can find more details here https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/pull/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.

littleGnAl avatar May 07 '24 03:05 littleGnAl

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.

Silfalion avatar May 08 '24 07:05 Silfalion

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[bot] avatar May 20 '24 07:05 github-actions[bot]

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.

github-actions[bot] avatar May 27 '24 08:05 github-actions[bot]