Hello @yz-yu and thank you for this fabulous project rrweb ! We are developing educational tools out of it (programming tutorials with audio, for example)! Keep up the good work.
By the way, I find your pernosco debugger very interesting for pedagogical purposes. We are working on integrating Debug Adapter Protocol to preprocess the execution of a program and execute it line by line on the client side for teaching purposes but your solution looks much more elegant ! Any plan to make it compatible with Python and Java or other JVM languages ?
Right now we're focused on selling the product we have.
The infrastructure we built to support JS would extend pretty easily to Python. Extending to Java would be a lot more work. No plans to do either anytime soon (unless someone wants to pay us significant money for that).
I haven't seen any subsequent work from Mickens on session replay. Many commercial tools like Inspectlet, Fullstory, LogRocket, etc., are available, though.
Mickens has done subsequent work on web page load times with Ravi Netravali.
What excites me about this approach is that it has the potential to make demos that are also accessible to blind people. It would take some work though, possibly even including support from browsers and screen readers. The pseudo-focus and pseudo-caret features in particular are problematic. Also, blind people might need a playback mode that advances the recording manually frame by frame (only counting frames that actually include changes), rather than playing back in real time.
How do you handle CSSOM changes which don’t generate mutation events?
I wrote a similar library and this was a pain for react-native-web apps, eg Twitter.
Nested iframes were also an issue, since the recording script needs to run in a context with access to all frames, in all origins. (IIRC you have to disable site-per-process in Chrome, at a minimum.)
Edit: I should add, very nice work and thanks for open sourcing!
DOMRec doesn't handle dynamic changes to rules in CSS stylesheets because our app doesn't do that. If we needed to do that, I'd try wrapping the CSSOM API prototypes.
(Of course DOMRec does handle changes to 'style' attributes on DOM nodes, because those do generate mutation notifications.)
Similarly, DOMRec doesn't handle cross-origin frames, because our app doesn't use them. To make that work I guess we'd have to port to a browser extension and even so it would make things quite a lot harder.
This is very cool, but for me the problem has always been the repeatability of demo videos. I make a demo video of our product, and two weeks later that demo is out of date and now I need to make the same video again.
Additionally, the need to add fake CSS pseudo classes to get it to work with focus, etc. seems like a bummer.
Nonetheless, seems like a nice compact way to make and share demos, so well done!
Repeatability can be such a pain. Company I used to work for had separate product and marketing teams that didn't talk to each other much. Which meant that by the time the recording was finished a new product update had been pushed out which made the whole recording obsolete.
This problem inspired me to build https://RecordOnce.com which does the re-recording automatically and periodically.
For the initial recording we also uses rrweb.
(Can't wait to get us on the rrweb donor/supporter list!)
Mutation Summary is a nice little library to help with this. It coalesces mutation observer events so you get one minimal set of changes per animation frame.
MutationObserver is much more efficient than mutation events because it can group events into batches, vastly reducing the number of event handler callbacks when you're observing whole documents.
