How to stop Flutter Web HtmlElementView from rebuilding/rerunning?

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>

Solution

This is one of the active problem with the Flutter Web. I guess a workaround to this is mentioned here: https://github.com/flutter/flutter/issues/53253#issuecomment-607197549