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 fonctionnalité de capture de région, qui permet 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 les pistes vidéo "manuellement", c'est-à-dire qu'elles pouvaient manipuler chaque frame directement. Cette approche n'était ni robuste ni performante. La capture de région permet de pallier ces lacunes. L'application Web peut désormais demander au navigateur d'effectuer le travail à sa place.

À propos de la capture de région

Vous avez créé un site Web avec Dynamic Content™. Il s'agit de la meilleure application Web qui soit, et les utilisateurs ne peuvent plus s'en passer, souvent de manière collaborative. L'étape suivante pourrait consister à intégrer des fonctionnalités de visioconférence. Vous décidez de choisir cette option. Vous faites équipe avec un fournisseur de services de visioconférence existant, en intégrant son application Web en tant qu'iframe d'origine croisée. L'application Web de visioconférence capture l'onglet actuel sous forme de piste vidéo et la transmet aux participants à distance.

Pas si vite… Vous ne voulez pas vraiment retransmettre les vidéos des utilisateurs à eux-mêmes, n'est-ce pas ? Il vaut mieux recadrer cette partie. Mais comment y parvenir ? L'iframe intégré ne sait pas quel contenu vous exposez ni où, il ne peut donc pas 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 ? Faire 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 timing peuvent toujours entraîner des cadres mal recadrés.

Utilisons alors la capture de région. Votre page comporte un 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 le cadre englobant 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 frames de cette piste ne sont désormais constitués que des pixels qui se trouvent dans le cadre de sélection de mainContentArea. Si mainContentArea change de taille, de forme ou d'emplacement, la piste vidéo suit, sans nécessiter d'intervention supplémentaire de la part de l'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 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 sur 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 des fonctionnalités

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

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

Dériver un CropTarget

Concentrons-nous sur l'élément appelé mainContentArea. Pour en dériver un CropTarget, appelez CropTarget.fromElement(mainContentArea). Si l'opération réussit, 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'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 selon les contours de mainContentArea (l'élément à partir duquel cropTarget a été dérivé).

Si l'opération réussit, la promesse sera résolue lorsqu'il sera garanti que toutes les images vidéo suivantes seront constituées des pixels qui se trouvent dans le cadre de sélection de mainContentArea.

Si l'opération échoue, 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.)
• Le 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 de capture de soi (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 l'autocapture. Il est donc conseillé de vérifier si l'utilisateur a sélectionné l'onglet actuel avant d'essayer de recadrer la piste. Pour ce faire, utilisez Capture Handle. Il est également possible de demander au navigateur d'inciter l'utilisateur à effectuer lui-même la capture à 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 masquant et masqué

Pour la capture de région, seuls la position et la taille de la cible comptent, pas l'index Z. Les pixels qui masquent la cible seront capturés. Les parties masquées de la cible ne seront pas capturées.

Il s'agit d'un corollaire de la capture de région, qui est essentiellement un recadrage. Une autre solution, qui deviendra sa propre API, est la capture au niveau de l'élément. Elle consiste à capturer uniquement 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 de ces pixels. Il est manifestement sécurisé, car aucune nouvelle information ne peut être obtenue.

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

Notez qu'au niveau local, la capture de région n'ajoute aucune garantie de sécurité. Lorsqu'une piste est transférée vers un autre document, le document de destination peut toujours recadrer la piste 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 la bordure bleue autour de la cible recadrée.

Démo

Vous pouvez tester la capture de région en exécutant la démonstration.

Prise en charge des navigateurs

La capture de région n'est disponible qu'à partir de Chrome 104 sur ordinateur.

Étape suivante

Voici un aperçu de ce qui vous attend prochainement pour améliorer le partage d'écran sur le Web :

• La capture de région sera compatible avec la capture d'autres onglets.
• L'activation conditionnelle de la mise au point permettra à l'application Web de capture d'indiquer au navigateur de faire passer la mise au point sur la surface d'affichage capturée ou d'éviter un tel changement.
• 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

Y a-t-il quelque chose qui ne fonctionne pas comme prévu dans la capture de région ? 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 lié aux spécifications dans le dépôt GitHub ou ajoutez vos commentaires à un problème existant.

Vous rencontrez un 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.

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 pour nous indiquer où et comment vous l'utilisez.

Liens utiles

• Spécification
• Explication
• Examen par le TAG
• Bug Chromium
• Entrée ChromeStatus.com

Remerciements

Merci à Joe Medley d'avoir relu cet article.