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 actif comme zone d'intérêt, et le navigateur recadre tous les pixels en dehors de cette zone.

Auparavant, les applications Web pouvaient recadrer les pistes vidéo "manuellement", c'est-à-dire qu'elles pouvaient manipuler chaque image directement. Ce n'était ni robuste, ni performant. La capture de région répond à 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 créé un site Web avec Dynamic ContentTM. Il s'agit de la meilleure application Web jamais utilisée, et les utilisateurs ne peuvent pas cesser de l'utiliser, souvent en collaboration. Une prochaine étape possible consiste à intégrer des fonctionnalités de visioconférence virtuelle. À vous de décider. 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 leur transmettre les vidéos des autres utilisateurs, 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 Region Capture. Il y a un Element sur votre page, peut-être un <div>, qui inclut 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 change de taille, de forme ou d'emplacement, la piste vidéo suit le flux, sans nécessiter de saisie supplémentaire de la part de l'une ou l'autre des applications 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 auto-capture 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 caractéristiques

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

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

Générer une cible de recadrage

Concentrons-nous sur l'élément appelé mainContentArea. Pour en dériver un CropTarget, appelez CropTarget.fromElement(mainContentArea). La promesse renvoyée sera résolue avec un nouvel objet CropTarget en cas de réussite. 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. Elle peut être transmise à 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 est 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 rétablir l'état non recadré, appelez cropTo() avec null.

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

Contenu masqué et masqué

Pour la capture de la région, seules la position et la taille de la cible sont concernées, et non le 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 voudrez peut-être partager quelques diapositives, mais pas vos commentaires d’orateur.

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 bords 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 à venir qui amélioreront le partage d'écran sur le Web:

• La capture de la région est compatible avec les captures 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 en savoir plus sur votre expérience avec Region Capture.

Dites-nous en plus sur 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.

Vous rencontrez un problème lors de l'implémentation ?

Avez-vous détecté 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.

Montrez 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 TAG
• Bug Chromium
• Enregistrement sur ChromeStatus.com

Remerciements

Merci à Joe Medley d'avoir relu cet article.