Screen-capture like DOM-capture with javascript?

Question

I'm working on a web-app and I would like to have some first hand experience on how our users actually use our software. This is my idea:

*Use javascript to save the html-DOM and cursor-position. Possibly only the changes to the DOM to reduce the amount of data. *Save it to the server along with the users browser used.

Do a javascript that updates the DOM according to the recording and an image that replicate the mouse movements in the corresponding browser.

Has this ever been done before? Would this work in most cases?

I don't know if you can record a webpage being used but you can screen capture every 5 seconds with the plugin http://html2canvas.hertzen.com/ the entire html page and store in your database base64 images that can be decoded in your cms for you to view them — CIRCLE, Sep 20 '13 at 15:06
A [DOM change listener](http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener/11546242#11546242) and [mouse tracking](http://stackoverflow.com/questions/7790725/javascript-track-mouse-position) may solve your problems. — atomman, Sep 20 '13 at 15:30

score 1 · Answer 1 · edited May 23 '17 at 10:25

As circle73 said, you can use HTML5 to do this via canvas, however, I don't think that would track the mouse position. You could write a JavaScript function to track the mouse coords every x seconds, you'd just have to time it with the screen captures so you can match up the mouse movements with the captured frames.

Your other options would be to do this via an ActiveX control as answered here: Take a screenshot of a webpage with JavaScript?

score 1 · Answer 2 · edited May 23 '17 at 11:56

I would approach this with the following high-level strategy:

Use jQuery mouseover to record the user's mouse positions on the page. Store these positions (x,y coordinates) locally. Send a structured request to your server with these coordinates.
Use a browser automation framework like Selenium to "play" the stored coordinates. You can use the same path as your user, only in development, in order to see what he saw. For example:
```
void mouseMove(WebElement toElement, long xOffset, long yOffset)
```
This moves (from the current location) to new coordinates. There's more info here.
Take screenshots with of the page with Selenium WebDriver. More info here.

Screen-capture like DOM-capture with javascript?

2 Answers2