This prevents static image and CSS assets from containing broken links.
It's similar to the Mutation Observers approach, but instead of sending summary diffs, it creates a Blob clone of the entire HTMLDocument and sends it across a binary websocket. This next method is one that recently dawned on me. Method 2: Blob from an HTMLDocument + Binary WebSocket Still, I think it's a neat way to combine a newer platform feature like Mutation Observers with an older one like Websockets.
FULL SOURCEĪs Rafael points out in the video, this is merely a proof of concept. The entire page isn't sent for every frame. As the user scrolls or interacts with the page, the observers pick up these changes and report them back to the viewer using Rafael's mutation summary library. His technique uses Mutation Observers and a WebSocket.Įssentially, the tab that the presenter is sharing watches for changes to the page and sends diffs to the viewer using a websocket. One approach for mirroring a tab was demonstrated by + Rafael Weinstein earlier this year. This article discusses a few of my favorite proof-of-concept solutions for "screensharing" a tab. You'd be lucky to get 1fps throughput, much less that covetted 60fps. These types of projects are very cool, but they're also dreadfully slow. Projects like html2canvas have tackled screencapturing HTML by re-implementing the browser's rendering engine.in JavaScript! Another example is Google Feedback, though it's not open-source. The snapshotting part is a much harder problem.
Websockets are very capable of sending data in different formats (string, JSON, binary). Essentially, we need a way to snapshot the DOM and share it out. If we remove the complexities of traditional screen sharing and focus on sharing the contents of a browser tab, the problem greatly simplifies to a.) capturing the visible tab in its current state, and b.) sending that "frame" across the wire. Relaying mouse pointer position, forwarding keystrokes, and achieving full 24-bit color repaints at 60fps are just a few of the issues. There are a lot of things to consider and a lot of challenges to overcome. From my experience, implementing VNC solely in web platform technologies (i.e. In the past couple of years, I've helped a few different companies achieve screensharing-like functionality using only browser technologies.