AgoraIO-Extensions / Agora-Flutter-SDK

Describe the bug
If the browser video is not visible when a remote user is added, then when switching back to visible the video takes over the whole document body and shows the error:

13:27:21:872 Agora-SDK [WARNING]: [track-video-3051840809-client-8afbe_6f938] can not find "#agora_rtc_engine/AgoraSurfaceView_2" element, use document.body

To Reproduce
Steps to reproduce the behavior:

Launch example basic video app and connect to a channel
Join Channel
minimize browser (or just bring another browser over it)
Connet to the channel from another device or even just another window
Bring the flutter app back to the foreground

See that the video is just added to the document body and takes up the whole screen.

Expected behavior
The video is rendered inside the html div that is generated with platformViewRegistry

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: iOS
Browser: chrome
Version 120.0.6099.234

Additional context
I did look and the div with the expected ID ("#agora_rtc_engine/AgoraSurfaceView_2" above) is added to the dom, I'm guessing it just doesnt get added fast enough when it is not visible or something.

FWIW this is fixing it for me:

Future<bool> _waitForHtmlElement(String elementId) async {
    // Check for the HTML element by ID every 100ms for up to 5 seconds
    const checkInterval = Duration(milliseconds: 100);
    for (var i = const Duration(seconds: 0); i < const Duration(seconds: 5); i += checkInterval) {
      final element = document.getElementById(elementId);
      if (element != null) {
        return true;
      }
      await Future.delayed(checkInterval);
    }

      print('Warning: HTML element with ID "$elementId" not found.');
      return false;
  }

/**
 !!!!! Do the same thing for RemoteVideoWeb as well
*/
Future<void> _setupLocalVideoWeb(
      VideoCanvas canvas, Object viewHandle) async {
    const apiType = 'RtcEngine_setupLocalVideo_acc9c38';
    // The type of the `VideoCanvas.view` is `String` on web
    final param = _createParamsWeb(viewHandle, canvas);
    final List<Uint8List> buffers = [];
    buffers.addAll(canvas.collectBufferList());


    /**
     !!!!! Ensure element is visible
    */
    const isElementVisible = await _waitForHtmlElement(viewHandle.toString());
    if (!isElementVisible) {
      return;
    }

    final callApiResult = await irisMethodChannel.invokeMethod(IrisMethodCall(
      apiType,
      jsonEncode(param),
      rawBufferParams: [BufferParam(BufferParamHandle(viewHandle), 1)],
    ));
    if (callApiResult.irisReturnCode < 0) {
      throw AgoraRtcException(code: callApiResult.irisReturnCode);
    }
    return;
  }
}

Thank you for your report. Which version of the Flutter SDK you are currently using?

flutter --version
Flutter 3.19.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ba39319843 (12 days ago) • 2024-03-07 15:22:21 -0600
Engine • revision 2e4ba9c6fb
Tools • Dart 3.3.1 • DevTools 2.31.1

Which version of agora_rtc_engine are you using, I tried 6.3.0, and it works fine by following your steps.

Weird, it looks like whatever is latest in main, I just cloned the repo and used the sample app.

Desktop (please complete the following information):

OS: iOS
Browser: chrome
Version 120.0.6099.234

Is this info valid?

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.

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.

It's most likely the same issue flutter/flutter#143922, reopen this issue.

Maybe related issue:

Agora-Flutter-SDK/.github/workflows/build.yml

Line 567 in 462cfc3

    
           # TODO(littlegnal): Temporily pin the Flutter SDK version to 3.16, since the rendering on web not work correct after 3.16,

[Flutter] [Web] Adding remote track while browser not visible, video takes over whole screen/document body