Flutter Web集成Hotjar/Smartlook录屏显示空白问题求助

1. 渲染器选择：必须用CanvasKit吗？ #

不用，两种渲染器都能支持，但处理逻辑有区别：

• HTML渲染器：Flutter会把UI拆分为DOM元素，理论上录屏工具能直接捕获，但如果页面大量使用自定义Canvas绘制，仍可能出现捕获空白。
• CanvasKit渲染器：整个Flutter UI绘制在单个Canvas上，这种场景下必须严格按照录屏工具的Canvas捕获配置来做，否则录屏必然空白。

核心是确保录屏工具能识别Flutter的渲染层，和渲染器类型没有强制绑定。

2. 脚本标签位置问题 #

你提到加在<head>里，但加载顺序才是关键：

• 必须先加载Hotjar/Smartlook的初始化脚本，再加载Flutter的main.dart.js。如果Flutter先完成渲染，录屏工具可能来不及监听Canvas或DOM的变化，导致捕获不到画面。
• 还要确认初始化配置是否正确：比如Smartlook要加recordCanvas: true开启Canvas捕获，Hotjar要确保后台开启了视觉录制功能。

正确的HTML结构示例：

<head>
  <!-- 先加载Smartlook初始化脚本 -->
  <script>
    window.smartlook || (function(d) {
      var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
      var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
      c.charset='utf-8';c.src='https://web-sdk.smartlook.com/recorder.js';h.appendChild(c);
    })(document);
    smartlook('init', '你的项目密钥', { recordCanvas: true });
  </script>
  
  <!-- 再加载Hotjar初始化脚本 -->
  <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:你的HJID,hjsv:6};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  </script>
</head>
<body>
  <div id="flutter_host"></div>
  
  <!-- 最后加载Flutter核心脚本 -->
  <script src="main.dart.js" type="application/javascript"></script>
</body>

3. 其他容易忽略的因素 #

• CSP跨域限制：检查页面的内容安全策略（CSP），如果script-src或img-src限制了第三方域名，可能阻止录屏工具加载脚本或截图请求，要允许*.smartlook.com、*.hotjar.com这类域名。
• Flutter版本兼容：旧版Flutter Web的Canvas渲染逻辑可能和录屏工具不兼容，建议升级到最新稳定版试试。
• 本地测试限制：localhost环境下，部分录屏工具需要额外配置（比如Hotjar要把本地域名加入允许列表），直接部署到线上测试结果更准确。
• 调试日志排查：开启录屏工具的调试模式，比如Smartlook加smartlook('enableLogging', true)，查看浏览器控制台有没有Canvas捕获失败、权限报错等信息，能快速定位问题。

内容的提问来源于stack exchange，提问作者Federico Fefe Tiranti