Manted: Pixel-perfect, low bandwidth tab sharing for Chrome
Shared by yunyu · 51d ago · 36 comments
#hackathon

Demo video: https://www.youtube.com/watch?v=1gsWWY56H6o

Chrome extension so you can try it out (try not to crash the server!): https://chrome.google.com/webstore/detail/aegkjjkggchllfihdiigigpodjpjjdfk/

Project description:
Pixel-perfect, low bandwidth tab sharing for Chrome.

Screen sharing quality can suck, especially for people on weaker connections. This is because most screen sharing implementations are encoding the screen as video frames, compressing them, sending them over the wire, and then decompressing them. This takes up a lot of additional latency and bandwidth (which must be traded off with quality/frame rate), and lossy compression frequently makes things unreadable (this is particularly an issue with Tandem recently).

What if instead of streaming video frames from the screen, we only streamed partial DOM updates from websites? That way, we can reproduce pixel-perfect versions of your active Chrome tab with extremely low bandwidth consumption and scrolling that doesn't give you a headache.

Welcome to Manted.

Team members:
Yunyu Lin
Jason Wang
Rahul G Sengottuvelu

Git repo:
https://github.com/calderajs/manted

joinBankroll.com · 51d ago

following.

Brickenator · 50d ago

Sick project guys!

theivanfranco · 50d ago

this is so cool

krishan711 · 50d ago

This is incredibly clever! nice job

nathanganser · 50d ago

Reach out to https://there.so, they might be interested in using this!

rahulgs · 51d ago
rishi_t · 51d ago

Always good to see what you all are up to. Big moves

VyomaPatel · 51d ago

You've identified a really interesting and big problem! I'd use Manted during this WFH.

ender-043304 · 50d ago

I watched your mini pitch and immediately saw the value. You guys definitely did a great job. This has been an issue that I have personally struggled with while trying to share my screen with clients that have slow connections and I never know what they are really seeing.

mgg · 50d ago

Awesome execution for a hackathon

bilbo-baggins-720839 · 50d ago

Very good for support.

jborichevskiy · 50d ago

This is awesome, especially given how much support is given for web apps running in the browser anyway.

prep.surf · 50d ago

I need this ASAP. Following

mendes · 50d ago

This is amazing

valm · 50d ago

Super cool!! Great job and concept. Look forward to more features like large highlighting text. increasing cursor size. other things to make it easier to share your screen on the web

deliverator-544575 · 50d ago

The applications for this are awesome!

ayush · 50d ago

Amazing work.

princess-leia-251050 · 50d ago

awesome! can't wait to see this working on my chrome!

trentonbricken · 50d ago

This is great. Real problem with screen sharing to get work done esp in the developing world.

rishi_t · 50d ago

Super cool! Would be awesome to see where it goes :)

sethguy · 50d ago

this is very helpful when you want to stream other media, while tab sharing, and you have roommates that are also heavy internet users

valm · 50d ago

Great demo! Curious what partial dom updates means

yunyu · 50d ago

We use DOM mutation observers to encode the current share session as updates to HTML elements and page attributes instead of a video frames. So, a gradient, shadow, or complex nested layout can just be represented as a short string instead of a bitmapped image. Hope that helps!

steventey · 50d ago

Following!

steventey · 51d ago

This is incredible - you're solving a real problem here! Keep it up!

jackson · 51d ago

Very, very cool!

cregox@ahoxus.org · 47d ago

would love to see (and perhaps even pay for) an android webapp #offlinefirst for this... i could use it for my own collection of wayback backups of link sharing.

kamesstory · 47d ago

Update to everyone: we've published the Chrome extension on the store at the following link - feel free to download it and try it out!

The link is here: https://chrome.google.com/webstore/detail/aegkjjkggchllfihdiigigpodjpjjdfk/

mishkaorakzai · 50d ago

So useful!!

teeks · 50d ago

wow this is awesome!

deliverator-042119 · 50d ago

Very cool!

Orderich.com · 50d ago

Great idea and neat execution, guys! Congrats

braddwyer · 50d ago

Check out crisp.chat's MagicBrowse feature; it's been super helpful for us debugging issues for users and understanding usability issues with our site: https://crisp.chat/en/livechat/

This tool would be great for that use-case. The pitch would be "Embed it on your site so you can see what's actually happening on your users' screens."

yunyu · 50d ago

If anybody is curious as to what the server consists of, here is the repo (linked in GitHub readme): https://github.com/calderajs/manted-server

nell-919336 · 50d ago

mind blown..!

yunyu · 51d ago

Update 1: We've gotten Chrome to correctly keep track of the active tab through a background script, and have managed to successfully pass recording start/stop messages to the content script through a popup. We're now seeing DOM diffs show up, time to pass them to the server