How to stop Flutter Web HtmlElementView from rebuilding/rerunning?

[davidkogan]

I have built a video calling app in Flutter using the Agora SDK. This is only available for iOS/Android and so for the web build I had to build a wrapper around the existing Agora web SDK. Due to the way Flutter renders web elements inside a shadow DOM, you cannot access elements by document.getElementById(), which is what the Agora SDK uses to inject their video player. To get around this I am rendering an IFrame that has the div and Agora SDK script bundled together.

It is all working nicely but when any event is triggered inside the browser window, such as the mouse entering a button or clicking anything, the IFrame refreshes and rebuilds the video view which takes 1-2 seconds to initialize.

Is there anyway I can unlink the IFrame from the browser events? I tried marking the HtmlElementView as const and putting it inside a StatefulWidget that only registers the platform view once. The widget isn't actually running the build() method again but the IFrame still refreshes.

Flutter Code:

ui.platformViewRegistry.registerViewFactory(
        'video-container',
            (int viewId) => IFrameElement()
          ..id = 'my-iframe'
          ..width = '100%'
          ..height = '100%'
          ..src = 'assets/web_elements/agora_container.html'
          ..allow = "camera; microphone"
          ..style.border = 'none');

@override
  Widget build(BuildContext context) {
    print("*****\n\n\nBuilding the web host container\n\n\n*****"); // this is only printing once
    return const HtmlElementView(
      viewType: 'video-container',
    );
  }

Agora Code:

<div id="local-video"></div>
<div id="remote-video"></div>
<div id="video-canvas"></div>

<script src="scripts/AgoraSDK.js"></script>
<script src="scripts/agora_controller.js"></script>

[yjbanov]

It's the same as #53253.

[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 open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.