Vidéo embarquée : intégrer WebRTC dans votre application
Réponse courte
La vidéo embarquée (embedded video) intègre une session WebRTC directement dans une page web, un portail ou une application via iframe ou SDK JavaScript. L'utilisateur reste dans votre environnement (marque, navigation) sans basculer vers un outil externe. C'est le pattern le plus rapide pour connecter la communication temps réel à un parcours existant.
Iframe vs SDK : quelle approche ?
| Iframe | SDK JavaScript | |
|---|---|---|
| Intégration | <iframe src="..."> |
Import lib + init |
| Effort dev | Minimal | Moyen |
| Contrôle UX | Limité (sandbox) | Total |
| Personnalisation | Paramètres URL | API composants |
| CSP | Autoriser frame-src | Autoriser script + connect-src |
| Mise à jour | Côté serveur | Versionning SDK |
Comment fonctionne une iframe vidéo ?
- Votre backend appelle l'API vidéo → obtient URL + token ;
- Votre page insère
<iframe src="https://video.votre-domaine.fr/room/abc?token=...">; - L'iframe charge l'interface vidéo (WebRTC, SFU, TURN) ;
- L'utilisateur interagit sans quitter votre portail.
Sécurité de l'embed
- Token temporaire : accès limité dans le temps ;
- CSP frame-ancestors : restreindre les domaines parents autorisés ;
- HTTPS obligatoire : WebRTC exige un contexte sécurisé ;
- Sandbox iframe : limiter les permissions si nécessaire.
Vidéo embarquée et marque blanche
- Domaine client (video.entreprise.fr) ;
- Charte graphique (couleurs, logo, textes) ;
- Pas de branding éditeur visible pour l'utilisateur final.
Contraintes techniques
- CSP : autoriser
frame-src,connect-src(WebSocket),media-src; - Pare-feu : flux WebRTC vers SFU/TURN (voir STUN/TURN) ;
- Responsive : iframe adaptative (aspect-ratio, fullscreen API).
Vidéo embarquée vs redirection
| Embed (iframe/SDK) | Redirection (lien) | |
|---|---|---|
| UX | Reste dans le portail | Nouvel onglet |
| Intégration SI | Contexte conservé | Contexte perdu |
| Complexité | Moyenne | Minimale |
| Mobile | Variable (iframe) | Bon (lien direct) |
Pour un parcours simple (assistance client, invité externe), un lien direct reste souvent suffisant : voir assistance-video.fr.
Comment Leagora supporte la vidéo embarquée ?
Iframe et SDK sur infrastructure WebRTC souveraine, personnalisable marque blanche. Intégration vidéo pour le cadrage SI. Contact.
FAQ
Une iframe WebRTC fonctionne-t-elle sur mobile ?
Oui, mais l'expérience fullscreen est parfois meilleure avec un lien direct plutôt qu'une iframe nested.
Faut-il autoriser la caméra/micro dans l'iframe ?
Oui : l'attribut allow="camera; microphone; display-capture" est requis sur l'iframe.
L'iframe peut-elle communiquer avec la page parente ?
Oui, via postMessage (cross-origin) pour les événements session (join, leave, end).
La vidéo embarquée est-elle compatible RGPD ?
Oui si l'infrastructure sous-jacente respecte la politique de données. Voir RGPD et hébergement France.
Peut-on embarquer dans une application mobile native ?
Via WebView avec permissions caméra/micro, ou via SDK natif si disponible.
À retenir
- Iframe = intégration rapide ; SDK = contrôle total.
- Token + CSP + HTTPS = triptyque sécurité embed.
- Leagora.io = hub infrastructure ; produits métier sur les sites satellites.