如何从 rebuilding/rerunning 停止 Flutter Web HtmlElementView？

Question

我使用 Agora SDK 在 Flutter 中构建了一个视频通话应用程序。这仅适用于 iOS/Android，因此对于 Web 构建，我必须围绕现有的 Agora Web SDK 构建一个包装器。由于 Flutter 在阴影 DOM 内呈现 Web 元素的方式，您无法通过 document.getElementById() 访问元素，这是 Agora SDK 用于注入其视频播放器的方式。为了解决这个问题，我正在渲染一个将 div 和 Agora SDK 脚本捆绑在一起的 IFrame。

一切正常，但是当浏览器内部触发任何事件时 window，例如鼠标进入按钮或单击任何内容，IFrame 会刷新并重建视频视图，这需要 1-2 秒初始化。

我是否可以取消 IFrame 与浏览器事件的链接？我尝试将 HtmlElementView 标记为 const 并将其放入仅注册平台视图一次的 StatefulWidget 中。该小部件实际上不再是运行 build() 方法，但 IFrame 仍会刷新。

Flutter代码

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',
  );
}

声网代码

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

Answer 1

这是 Flutter Web 的活跃问题之一。我想这里提到了一个解决方法：https://github.com/flutter/flutter/issues/53253#issuecomment-607197549

Answer 2

对我有用的是：

Key key = UniqueKey(); // 在构建方法之前

HtmlElementView(
      key: key,
      viewType: 'iframeElement',
    );

现在没有rebuilding/rerunning。请注意，我使用的是 iframeElement，而不是 video-container，但这应该有效。请评论。

如何从 rebuilding/rerunning 停止 Flutter Web HtmlElementView？

How to stop Flutter Web HtmlElementView from rebuilding/rerunning?

dart

flutter

agora.io

flutter-web