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

François Beaufort

Elad Alon

La plate-forme Web autorise déjà une application Web à capturer une piste vidéo de l'onglet actuel. Elle dispose désormais de Region Capture, un mécanisme qui permet 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". En d'autres termes, les applications Web pourraient manipuler directement chaque frame. Elle n'était ni robuste, ni performante. La capture de la région permet de remédier à ces problèmes. L'application Web peut maintenant demander au navigateur d'effectuer le travail en son nom.

À propos de la capture de la région

Vous venez de créer un site Web avec Dynamic ContentTM. Il s'agit de la meilleure application Web jamais utilisée, et les gens ne peuvent tout simplement pas arrêter 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 collaborez avec un fournisseur de services de visioconférence existant en intégrant son application Web en tant qu'iFrame multi-origine. L'application Web de visioconférence capture l'onglet actuel sous forme de piste vidéo et la transmet aux participants à distance.

</ph> <ph type="x-smartling-placeholder">

Pas si vite... Vous ne voulez pas vraiment leur transmettre les vidéos des autres utilisateurs, n'est-ce pas ? Mieux vaut recadrer cette partie. Mais comment y parvenir ? L'iFrame intégré ne sait pas quel contenu vous exposez ni où, et il ne peut donc pas être recadré sans aide. En théorie, vous pourriez 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 ? Vous faites un zoom avant ou arrière ? interagit avec la page d'une manière qui entraîne un changement de 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 erreurs de cadrage.

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 le cadre de délimitation de cet élément. Vous obtenez donc CropTarget à partir de mainContentArea. Vous transmettez ce CropTarget à l'application Web de visioconférence. Une fois que vous avez recadré la piste vidéo à l'aide de ce CropTarget, les images de cette piste ne sont désormais constituées que des pixels compris dans le cadre 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:

Pour définir un CropTarget dans votre application Web, appelez CropTarget.fromElement() avec l'élément de votre choix en 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 obtenir un CropTarget à partir de celui-ci, appelez CropTarget.fromElement(mainContentArea). La promesse renvoyée sera résolue avec un nouvel objet CropTarget en cas de réussite. Sinon, elle sera refusée si vous avez frappé 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 de la tabulation, 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 dont cropTarget a été dérivé).

Si l'opération réussit, la promesse est résolue lorsqu'il est possible que toutes les images vidéo suivantes soient composées de pixels compris dans le cadre de délimitation de mainContentArea.

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

• Le CropTarget a été frappé dans un autre onglet. (Pour l'instant, restez à l'écoute.)
• Le CropTarget est dérivé d'un élément qui n'existe plus.
• Le canal comporte des clones. Consultez le problème 1509418.
• La piste actuelle n'est pas une piste vidéo auto-capture. 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 actif avant d'essayer de recadrer la piste. Pour ce faire, utilisez la commande Capture Handle. Vous pouvez également demander au navigateur d'encourager l'utilisateur à effectuer une capture de son propre contenu à 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é

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 occultant la cible seront capturés. Les parties masquées de la cible ne seront pas capturées.

Il s'agit du corollaire de la capture de la région, qui consiste essentiellement à recadrer l'image. Une autre solution, qui sera sa propre API, est la capture au niveau de l'élément. autrement dit, ne capturer que les pixels associés à la cible, quelles que soient les occlusions. Ce type d'API présente des exigences de sécurité et de confidentialité différentes de celles du simple recadrage.

</ph> <ph type="x-smartling-placeholder">

Sécurité et confidentialité

La capture de la 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 breveté en toute sécurité, car aucune nouvelle information ne peut être obtenue.

La capture de la 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.

</ph> <ph type="x-smartling-placeholder">

Notez qu'en local, Region Capture n'ajoute aucune garantie de sécurité. Lorsque vous transmettez une piste à un autre document, le document destinataire peut toujours annuler le recadrage de la piste 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 Region Capture en exécutant la démonstration sur Glitch. Être pensez à 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 placer le curseur 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 en savoir plus sur votre expérience avec Region Capture.

Parlez-nous de la conception

Y a-t-il un problème avec la capture de la région qui ne fonctionne pas comme prévu ? Ou s'il manque des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre 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 des spécifications ?

• 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 répétitions rapidement et facilement.

Montrez votre soutien

Prévoyez-vous d'utiliser Region Capture ? Votre assistance publique aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les aider.

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

Liens utiles

• Spécification
• Vidéo explicative
• Examen TAG
• Bug Chromium
• Entrée ChromeStatus.com

Remerciements

Merci à Joe Medley d'avoir lu cet article.