Flutter Web接入Hotjar等录屏工具仅捕获鼠标无画面如何解决

绝大多数第三方用户行为录屏工具依赖DOM节点快照生成回放画面，Flutter Web默认使用CanvasKit渲染模式，所有UI元素直接绘制在单个<canvas>标签中，无独立DOM节点对应UI内容，因此录屏工具只能捕获到画布容器和鼠标轨迹，无法识别画布内实际渲染内容，是该问题的核心诱因。你推测的CSS资源无法拉取属于次要可能性，可按以下优先级排查解决：

解决方案 #

• 方案1：切换Flutter Web渲染模式为HTML渲染
  构建时指定渲染模式为HTML，将UI元素渲染为真实DOM节点，录屏工具可正常识别内容。CodeMagic构建配置中修改flutter build web命令为：
  flutter build web --web-renderer html --release
  该方案兼容性最好，不需要额外修改录屏工具配置，适合逻辑简单的Hello World级项目。
• 方案2：启用录屏工具的Canvas录制支持
  目前主流录屏工具均已支持Canvas内容捕获，需要在初始化录屏SDK的代码中添加对应配置项：
  • Hotjar：在Hotjar初始化代码中添加allowCanvasCapture: true参数
  • Inspectlet：在全局配置中加入__insp.push(['allowCanvasRecording', true]);
  • Smartlook：初始化时添加canvasRecording: true配置项
    该方案无需修改Flutter渲染逻辑，可保留CanvasKit渲染的高性能优势。
• 方案3：调整静态资源跨域配置
  若确认是录屏服务无法拉取CSS资源导致的问题，需在CodeMagic托管的站点响应头中添加跨域资源共享配置：
  1. 在项目根目录新建_headers文件，添加以下配置：

  /*
    Access-Control-Allow-Origin: *
    Access-Control-Allow-Methods: GET, OPTIONS
  

  2. 构建时将_headers文件复制到构建输出的web目录中，CodeMagic托管会自动识别该文件配置响应头，允许第三方服务拉取静态资源。
• 方案4：禁用Flutter Web的静态资源哈希后缀
  Flutter Web构建默认会给CSS、JS等静态资源添加哈希后缀，录屏服务回放时如果拉取旧版本哈希的资源会返回404，构建时添加参数禁用哈希：
  flutter build web --no-web-resources-hash --release

内容的提问来源于stack exchange，提问作者Asaf HorVitz