Il est déjà possible de partager des onglets, des fenêtres et des écrans sur la plate-forme Web avec l'API Screen Capture. Lorsqu'une application Web appelle getDisplayMedia(), Chrome invite l'utilisateur à partager un onglet, une fenêtre ou un écran avec l'application Web en tant que vidéo MediaStreamTrack.
De nombreuses applications Web qui utilisent getDisplayMedia() affichent un aperçu vidéo de la surface capturée. Par exemple, les applications de visioconférence diffusent souvent cette vidéo aux utilisateurs à distance tout en l'affichant dans un HTMLVideoElement local, de sorte que l'utilisateur local voit constamment un aperçu de ce qu'il partage.
Cette documentation présente la nouvelle API Captured Surface Control dans Chrome, qui permet à votre application Web de faire défiler un onglet capturé, ainsi que de lire et d'écrire le niveau de zoom d'un onglet capturé.
Pourquoi utiliser le contrôle de surface capturée ?
Toutes les applications de visioconférence présentent le même inconvénient. Si l'utilisateur souhaite interagir avec un onglet ou une fenêtre capturés, il doit passer à cette surface, ce qui l'éloigne de l'application de visioconférence. Cela pose certains problèmes :
- L'utilisateur ne peut pas voir l'application capturée et les flux vidéo des utilisateurs à distance en même temps, sauf s'il utilise le Picture-in-picture ou des fenêtres côte à côte distinctes pour l'onglet de visioconférence et l'onglet partagé. Cela peut être difficile sur un écran plus petit.
- L'utilisateur doit passer de l'application de visioconférence à la surface capturée, ce qui est contraignant.
- L'utilisateur perd l'accès aux commandes exposées par l'application de visioconférence lorsqu'il n'est pas dessus. Par exemple, une application de chat intégrée, les réactions emoji, les notifications concernant les utilisateurs qui demandent à rejoindre l'appel, les commandes multimédias et de mise en page, ainsi que d'autres fonctionnalités utiles de visioconférence.
- Le présentateur ne peut pas déléguer le contrôle à des participants à distance. Cela conduit à un scénario bien trop familier où les utilisateurs à distance demandent au présentateur de changer de diapositive, de faire défiler un peu vers le haut et vers le bas ou d'ajuster le niveau de zoom.
L'API Captured Surface Control résout ces problèmes.
Comment utiliser la commande de surface capturée ?
Pour utiliser correctement Captured Surface Control, vous devez suivre quelques étapes, comme capturer explicitement un onglet de navigateur et obtenir l'autorisation de l'utilisateur avant de pouvoir faire défiler et zoomer sur l'onglet capturé.
Capturer un onglet de navigateur
Commencez par inviter l'utilisateur à choisir une surface à partager à l'aide de getDisplayMedia(), puis associez un objet CaptureController à la session de capture. Nous utiliserons bientôt cet objet pour contrôler la surface capturée.
const controller = new CaptureController();
const stream = await navigator.mediaDevices.getDisplayMedia({ controller });
Ensuite, générez un aperçu local de la surface capturée sous la forme d'un élément <video> :
const previewTile = document.querySelector('video');
previewTile