Skip to content

Instantly share code, notes, and snippets.

@nenkoru
Created December 12, 2023 07:28
Show Gist options
  • Save nenkoru/e8ae49982707b8a1716e04ab47b8a843 to your computer and use it in GitHub Desktop.
Save nenkoru/e8ae49982707b8a1716e04ab47b8a843 to your computer and use it in GitHub Desktop.
How to share a MacOS screen to any device with Retina quality and low-latency

How to share a screen in MacOS to any device with Retina quality and low-latency.

Embarking on a quest for seamless MacBook-to-Android tablet screen sharing, I quickly discovered that existing solutions, like the clunky Duet, left much to be desired. Undeterred, I delved into the realm of browser-based screen sharing, realizing that our ubiquitous browsers might just hold the key to a smoother experience.

My exploration led me to the fascinating world of WebRTC, a technology weaving its magic across the internet and, importantly, in screen-sharing solutions. What caught my attention was not just its capability to facilitate screen sharing but the added perk of peer-to-peer connectivity, bypassing the need for intermediary servers. Imagine sharing your screen without the fuss of servers – WebRTC promised just that.

As I scoured various projects enabling browser-based screen sharing, I stumbled upon Spreen, a nifty JS project. Spreen seamlessly integrates a server-side JS code that acts as a messenger, facilitating communication between the streamer and the receiver to effortlessly negotiate connection details. A quick spin-up, and it worked like a charm, with my Chrome browser giving it the stamp of approval.

However, the journey wasn't without its hurdles. In my pursuit of a dual-screen setup, I turned to BetterDisplay. Alas, the macOS penchant for "pixel-perfect" magic posed a challenge, leading to a virtual display that lacked the crispness I craved. Undeterred, I dug deeper and uncovered a revelation: the resolution at the start of the screen stream remained constant.

Eureka! The solution lay in creating a virtual screen mirroring the resolution of my Android tablet. Connecting the laptop and tablet, I tweaked the resolution – opting for HiDPI glory that balanced UI scaling and Retina-quality magic. The outcome? A screen stream that mirrored the system-reported resolution but utilized additional pixels, thanks to the media source in the WebRTC connection.

In essence, my workaround translated to a high-fidelity stream, overcoming the limitations imposed by macOS. The journey from investigating WebRTC to untangling the intricacies of screen resolution was nothing short of an adventure. So, for those seeking a smoother MacBook-to-Android tablet screen-sharing experience, the fusion of WebRTC, Spreen, and BetterDisplay might just be the enchanting solution you've been searching for.

TL;DR

Spin up Spreen https://github.com/IshaanOhri/Spreen

Create a virtual display of a resolution as the one you have on a target device(HiDPI!), using BetterDisplay or so.

Start the streaming session with the target resolution in HiDPI

While streaming change the resolution to the smaller one, but yet being HiDPI

You get Retina streaming, with large UI and P2P(low-latency).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment