Amélioration du partage d'onglet avec la capture de région

François Beaufort

Elad Alon

La plate-forme Web permet déjà à une application Web de capturer une piste vidéo de l'onglet actuel. Il est désormais fourni avec la capture de région, un mécanisme permettant de recadrer ces pistes vidéo. L'application Web désigne une partie de l'onglet actuel comme zone d'intérêt, et le navigateur recadre tous les pixels en dehors de cette zone.

Auparavant, les applications Web pouvaient recadrer des pistes vidéo "manuellement", c'est-à-dire qu'elles pouvaient manipuler directement chaque frame. Ce n'était ni robuste, ni performant. La capture de région résout ces lacunes. L'application Web peut désormais demander au navigateur d'effectuer la tâche en son nom.

À propos de la capture de région

Vous avez donc créé un site Web avec du contenu dynamique™. C'est la meilleure application Web qui soit, et les utilisateurs ne peuvent plus s'en passer, souvent en collaboration. L'intégration de fonctionnalités de conférence virtuelle est une option envisageable. Vous décidez de suivre cette recommandation. Vous vous associez à un fournisseur de services de visioconférence existant et intégrez son application Web en tant qu'iframe inter-origine. L'application Web de visioconférence capture l'onglet actuel en tant que piste vidéo et la transmet aux participants à distance.

Pas si vite ! Vous ne voulez pas vraiment renvoyer les vidéos des utilisateurs à eux-mêmes, n'est-ce pas ? Il vaut mieux couper cette partie. Mais comment y parvenir ? L'iframe intégrée ne sait pas quel contenu vous exposez et où. Elle ne peut donc pas le recadrer sans aide. En théorie, vous pouvez transmettre les coordonnées souhaitées. Mais que se passe-t-il si l'utilisateur redimensionne la fenêtre ? fait défiler la fenêtre d'affichage ? Zoom avant ou arrière ? interagit avec la page de manière à modifier la mise en page ? Même si vous envoyez les nouvelles coordonnées à l'iframe de capture, des problèmes de synchronisation peuvent toujours entraîner des cadres mal recadrés.

Utilisons donc la capture de zone. Votre page contient un élément Element, peut-être un <div>, qui contient le contenu principal. Appelons-le mainContentArea. Vous souhaitez que l'application Web de visioconférence capture et partage à distance la zone définie par la boîte englobante de cet élément. Vous dérivez donc un CropTarget à partir de mainContentArea. Vous transmettez ce CropTarget à l'application Web de visioconférence. Après avoir recadré la piste vidéo à l'aide de ce CropTarget, les images de cette piste ne contiennent plus que les pixels qui se trouvent dans la zone de délimitation de mainContentArea. Si mainContentArea modifie sa taille, sa forme ou son emplacement, la piste vidéo suit, sans aucune entrée supplémentaire de la part de l'une ou l'autre application Web.

Revoyons ces étapes:

Vous définissez un CropTarget dans votre application Web en appelant CropTarget.fromElement() avec l'élément de votre choix comme entrée.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Vous transmettez le CropTarget à l'application Web de visioconférence.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

L'application Web de visioconférence demande au navigateur de recadrer la piste dans la zone définie par CropTarget en appelant cropTo() sur la piste vidéo d'autocapture avec la cible de recadrage reçue de l'application Web principale.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

Et voilà ! C'est tout.

Présentation détaillée

Détection de fonctionnalités

Pour vérifier si CropTarget.fromElement() est compatible, utilisez:

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

Déduire un CropTarget

Concentrons-nous sur l'élément appelé mainContentArea. Pour en dériver un CropTarget, appelez CropTarget.fromElement(mainContentArea). Si la requête aboutit, la promesse renvoyée sera résolue avec un nouvel objet CropTarget. Sinon, il sera refusé si vous avez créé un nombre déraisonnable d'objets CropTarget.

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Contrairement à un Element, un objet CropTarget est sérialisable. Il peut être transmis à un autre document à l'aide de Window.postMessage(), par exemple.

Recadrage

Lors de la capture d'un onglet, la piste vidéo est instanciée en tant que BrowserCaptureMediaStreamTrack, qui est une sous-classe de MediaStreamTrack. Cette sous-classe expose cropTo(). Appelez track.cropTo(cropTarget) pour commencer à recadrer en fonction des contours de mainContentArea (l'élément à partir duquel cropTarget a été dérivé).

Si l'opération réussit, la promesse est résolue lorsqu'il est possible de garantir que tous les frames vidéo suivants seront constitués des pixels qui se trouvent dans la zone de délimitation de l'mainContentArea.

En cas d'échec, la promesse sera rejetée. Cela se produit dans les cas suivants:

• Le CropTarget a été créé dans un autre onglet. (Pour l'instant, restez à l'écoute.)
• CropTarget a été dérivé d'un élément qui n'existe plus.
• La piste comporte des clones. (Consultez le problème 1509418.)
• La piste actuelle n'est pas une piste vidéo auto-capturée. Voir ci-dessous.

La méthode cropTo() est exposée sur n'importe quelle piste vidéo de capture d'onglet, et pas seulement pour la capture de soi-même. Il est donc conseillé de vérifier si l'utilisateur a sélectionné l'onglet actuel avant d'essayer de recadrer le titre. Pour ce faire, utilisez Capture Handle. Vous pouvez également demander au navigateur d'inciter l'utilisateur à se prendre en photo à l'aide de preferCurrentTab.

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

Pour revenir à l'état non recadré, appelez cropTo() avec null.

// Stop cropping.
await track.cropTo(null);

Contenu masqué et masqué

Pour la capture de région, seules la position et la taille de la cible importent, et non l'indice de z-index. Les pixels masquant la cible seront capturés. Les parties masquées de la cible ne seront pas capturées.

Il s'agit d'un corollaire du fait que la capture de région est essentiellement un recadrage. Une autre option, qui sera sa propre API à l'avenir, est la capture au niveau de l'élément. Autrement dit, ne capturez que les pixels associés à la cible, quelles que soient les occlusions. Une telle API présente un ensemble d'exigences de sécurité et de confidentialité différent de celui d'un simple recadrage.

Sécurité et confidentialité

La capture de région permet à une application Web qui observe déjà tous les pixels de l'onglet de supprimer volontairement certains d'entre eux. Il est manifestement sécurisé, car aucune nouvelle information ne peut être obtenue.

La capture de région permet de limiter les informations envoyées aux participants à distance. Par exemple, vous souhaitez peut-être partager certaines diapositives, mais pas vos notes du présentateur.

Notez que localement, la capture de région n'ajoute aucune garantie de sécurité. Lorsque vous transmettez un canal à un autre document, le document destinataire peut toujours le décadrer et accéder à tous les pixels de l'onglet capturé.

Chrome dessine une bordure bleue autour des onglets capturés. Lors du recadrage, Chrome dessine généralement une bordure bleue autour de la cible recadrée.

Démo

Vous pouvez tester la capture de région en exécutant la démo sur Glitch. Veillez à consulter le code source.

Prise en charge des navigateurs

La capture de région est disponible à partir de Chrome 104 sur ordinateur uniquement.

Étape suivante

Voici un aperçu des nouveautés qui amélioreront le partage d'écran sur le Web dans un avenir proche:

• La capture de région sera compatible avec la capture d'autres onglets.
• La mise au point conditionnelle permet à l'application Web de capture d'indiquer au navigateur de mettre au point la surface d'affichage capturée ou d'éviter un tel changement de mise au point.
• Une API de capture au niveau de l'élément peut être fournie.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent connaître votre expérience avec la capture de région.

Parlez-nous de la conception

La capture de région ne fonctionne-t-elle pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ?

• Signalez un problème de spécification dans le dépôt GitHub ou ajoutez vos commentaires à un problème existant.

Problème d'implémentation ?

Avez-vous trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ?

• Signalez un bug sur https://new.crbug.com. Veillez à inclure autant de détails que possible et des instructions simples pour reproduire le problème. Glitch est idéal pour partager des reproductions rapidement et facilement.

Montrer votre soutien

Prévoyez-vous d'utiliser la capture de région ? Votre soutien public aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Envoyez un tweet à @ChromiumDev et dites-nous où et comment vous l'utilisez.

Liens utiles

• Spécification
• Explication
• Examen du TAG
• Bug Chromium
• Enregistrement sur ChromeStatus.com

Remerciements

Merci à Joe Medley d'avoir relu cet article.