Tous les formats d'écran
ProblèmeUn écran de téléphone en portrait s'affichait déformé ou minuscule.
SolutionLe conteneur vidéo suit le ratio réel du flux, en portrait comme en paysage.
Retour au bureau
Dans le bureau : le néon OsaLabs
OsaCast
Ton écran chez un ami, en un clic.
OsaCast partage ton écran avec quelqu'un d'autre, directement depuis le navigateur. Pas de compte, rien à installer : un code ou un QR code, et le flux vidéo part en pair-à-pair.
770lignes de code
1clic pour diffuser
30images par seconde
0logiciel à installer
01Le point de départ
« Montrer son écran à un pote ne devrait pas demander de créer une réunion. »
Pour partager un écran, on passe souvent par un outil de visio complet : compte, lien de réunion, micro, caméra… alors qu'on veut juste montrer quelque chose.
OsaCast réutilise la mécanique d'OsaDrop, mais pour un flux vidéo : le navigateur capture l'écran avec getDisplayMedia et l'envoie directement au spectateur.
02En images
À quoi ça ressemble.
03Comment ça marche
Sous le capot.
La même poignée de main WebRTC qu'OsaDrop, mais pour de la vidéo au lieu de données.
Capture de l'écran
Le diffuseur choisit un écran, une fenêtre ou un onglet avec
getDisplayMedia, son compris.Un code de session
Le serveur crée une session, et le spectateur la rejoint par code ou QR code.
La poignée de main
Offre, réponse et candidats ICE transitent par Socket.io.
Le flux direct
La vidéo part en pair-à-pair, à 30 images par seconde. Si le réseau bloque la connexion directe, un serveur relais TURN prend le relais.
Regarder confortablement
Le lecteur suit le format du flux (portrait ou paysage), passe en plein écran ou en image dans l'image pour continuer à travailler à côté.
✦À toi de jouer
La poignée de main WebRTC, pas à pas
Avant la première image, les deux navigateurs doivent se mettre d'accord. Avance étape par étape pour voir qui envoie quoi.
!Les défis
Ce qui a résisté.
Un flux qui survit
ProblèmeDans OsaNotch, replier l'île coupait le partage.
SolutionLe flux vit dans la WebView pont, indépendamment de l'interface : il continue quand le notch se replie, et un mode cinéma l'agrandit.
⏱Journal de bord
Comment c'est arrivé.
Version complète
Socket.io, WebRTC robuste et interface en verre dépoli.
Portrait et paysage
Le lecteur suit le ratio du flux.
Pont OsaNotch
Le notch peut diffuser et regarder avec le même moteur.
Nouvelle interface
Mascotte vivante, image dans l'image et relais TURN pour les réseaux difficiles.
Astuce : les flèches ← → de ton clavier passent d'un projet à l'autre.