How to "capture" the behavior of the elements on the page and generate a video?

Question

css

There is a normal html page. On it, using JS, some manipulations with the DOM are performed.
You need to create a video file (or gif) that will capture the behavior of the page.
Are there any JS libraries or something similar for this?

Answer 1

To quote Stackoverflow:
You can use ready-made solutions:
www.google.com/analytics
www.clicktale.com
https://segment.io/
www.extrawatch.com
mouseflow.com
https://www.seevolution.com/
clicky.com
You can do amazing stuff with Google Analytics and its Event Tracker:
https://developers.google.com/analytics/devguides/...
searchenginewatch.com/article/2287906/10-Google-An...
If you're looking for a custom-made solution, you can try the following one with PHP and JavaScript:
css-tricks.com/tracking-clicks-building-a-clickmap...
Keep in mind that using third-party solutions is better performance-wise . Writing the coordinates of the mouse movements in a database in real time, needs a lot of resources.
https://stackoverflow.com/questions/18713415/user-...

Answer 2

Mmm, you can make screenshots using js , save these screenshots to a server, and then generate gifs from screenshots, just a suggestion, I haven’t practiced this