如何阻止 Flutter Web HtmlElementView 重建/重新运行？

Posted 2023-02-23

【中文标题】如何阻止 Flutter Web HtmlElementView 重建/重新运行？

【英文标题】：How to stop Flutter Web HtmlElementView from rebuilding/rerunning?

【发布时间】：2020-08-05 15:20:56

【问题描述】：

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

一切运行良好，但是当在浏览器窗口内触发任何事件时，例如鼠标输入按钮或单击任何内容，IFrame 会刷新并重建视频视图，这需要 1-2 秒来初始化。

无论如何我可以取消 IFrame 与浏览器事件的链接吗？我尝试将 htmlElementView 标记为 const 并将其放在仅注册平台视图一次的 StatefulWidget 中。小部件实际上并未再次运行 build() 方法，但 IFrame 仍在刷新。

颤振代码

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

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

【参考方案1】：

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