Flutter Web screen recording tools are producing subpar results due to flutter web's rendering

[idotenenbaum]

TL;DR -- our flutter web Hotjar and Smartlook screen recording are producing subpar results due to flutter web's rendering.

Context:

• We're running our frontend in Flutter Web.

• We'd like to install a screen recording tool that would record the sessions of our users.

• We tried several tools (Hotjar being one of them), but all face a very similar problem: there's something about the way Flutter renders the webpage that makes it difficult for the screen-recording tool to properly capture the elements on the page.

• Example of the result is can be viewed in the attached images; the image isn't rendering. This is a minor example, but we have many more.

Actual webpageview:

Screen recording result:

• We've tried using the HTML web renderer (https://flutter.dev/docs/development/tools/web-renderers) -- improvement was unfortunately very small (above picture is with the renderer).

This is an important enterprise feature that is blocking our product work. Would appreciate your help on this.

[yjbanov]

I don't know how tools like that work. I suspect they may be relying on semantic information in the UI. Do you get better results when you enable semantics? You can do that as follows:

main() {
  runApp(...);
  RendererBinding.instance!.setSemanticsEnabled(true);
}

[yjbanov]

The best integration with Flutter might be for Hotjar and Smartlook to provide Flutter packages that probe into the widget hierarchy (using something like WidgetController but without a dependency on package:test so it can be deployed to production) rather than try to reverse-engineer and replay the HTML we generate.

[darshankawar]

@idotenenbaum
This seems to sound more of not in Flutter's control, but the way Hotjar and Smartlook currently handles the framework.
Please look at above comments and see if either of them helps.

[tjerkw]

Smartlook does have a flutter SDK for Web and iOS: https://smartlook.github.io/docs/sdk/flutter

But if you use the Web (non-flutter) integration then the recording is a white screen.

I don't know why this is yet.

[TahaTesser]

Without additional information, we are unfortunately not sure how to resolve this issue.
We are therefore reluctantly going to close this bug for now.
Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.

Could everyone who still has this problem please file a new issue with the exact description of what happens, logs, and the output of flutter doctor -v.
All system setups can be slightly different, so it's always better to open new issues and reference related issues.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.