La plate-forme Web permet déjà à une application Web d'enregistrer une piste vidéo de l'onglet actif. L'application intègre désormais 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 qui se trouvent à l'extérieur de cette zone.
Auparavant, les applications Web pouvaient recadrer les pistes vidéo "manuellement", ce qui signifie qu'elles pouvaient manipuler directement chaque image. Cette solution n'était ni robuste, ni performante. La capture de région comble ces lacunes. L'application Web peut maintenant demander au navigateur d'effectuer le travail en son nom.
À propos de la capture de région
Vous avez créé un site Web avec Dynamic ContentTM. C'est la meilleure application Web de tous les temps et les utilisateurs ne peuvent s'arrêter de l'utiliser, souvent de façon collaborative. Une prochaine étape possible consiste à intégrer des fonctionnalités de conférence virtuelle. Vous décidez d'opter pour cette approche. Vous faites équipe 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 enregistre l'onglet actif en tant que piste vidéo et le transmet aux participants à distance.
Pas si vite... Vous ne voulez plus vraiment transmettre les vidéos des gens aux internautes, n'est-ce pas ? Il est préférable de couper cette partie. Mais comment y parvenir ? L'iFrame intégré ne sait pas quel contenu vous exposez ni où. Il ne peut donc pas être recadré 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 codes temporels peuvent toujours entraîner des erreurs au niveau des frames.
Nous allons donc utiliser la capture de région. Il y a un Element sur votre page, peut-être un <div>, qui contient le contenu principal. Appelons-le mainContentArea. Vous voulez que l'application Web de visioconférence enregistre et partage à distance la zone définie par le cadre de délimitation de cet élément. Vous obtenez 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 sont désormais composées que des pixels qui se trouvent dans le cadre de délimitation de mainContentArea. Si mainContentArea change de taille, de forme ou de lieu, la piste vidéo suit le mouvement sans nécessiter d'entrée supplémentaire des deux applications Web.
Reprenons ces étapes:
Pour définir un CropTarget dans votre application Web, appelez 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 à la zone définie par CropTarget en appelant cropTo() sur la piste vidéo d'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 fonctionnalités
Pour vérifier si CropTarget.fromElement() est compatible, utilisez:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
Déduction d'une rootTarget
Concentrons-nous sur l'élément appelé mainContentArea. Pour en déduire un CropTarget, appelez CropTarget.fromElement(mainContentArea). En cas de succès, la promesse renvoyée sera résolue avec un nouvel objet CropTarget. Sinon, elle sera refusée si vous avez généré 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 l'enregistrement d'onglets, 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 l'image en fonction des contours de mainContentArea (l'élément dont est dérivé le recadrage Target).
Si la requête aboutit, la promesse est résolue lorsqu'il est possible de garantir que toutes les images vidéo suivantes seront constituées des pixels situés dans le cadre de délimitation de la mainContentArea.
En cas d'échec, la promesse sera rejetée. Cela se produit dans les cas suivants:
- Le
CropTargeta été saisi dans un autre onglet. (Pour l'instant, tenez-vous informé.) CropTargetest dérivé d'un élément qui n'existe plus.- La piste comporte des clones. Consultez le problème 1509418.
- La piste en cours n'est pas une piste d'auto-enregistrement (voir ci-dessous).
La méthode cropTo() est utilisée sur n'importe quelle piste vidéo de capture d'onglet, et pas seulement pour la capture automatique. 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 Capture Handle. Vous pouvez également demander au navigateur d'encourager l'utilisateur à effectuer une capture automatique à 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);
Masquage du contenu
Pour la capture de région, seuls la position et la taille du sujet cible sont prises en compte, et non le z-index. Les pixels qui masquent la cible seront capturés. Les parties masquées de la cible ne seront pas capturées.
Ceci est un corollaire de la capture de région, qui est essentiellement le recadrage. L'une des alternatives, qui constituera sa propre API, est la capture au niveau de l'élément. En d'autres termes, elle ne permet de capturer que les pixels associés à la cible, quelles que soient les occlusions. Les exigences de sécurité et de confidentialité d'une API de ce type diffèrent de celles du 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 d'en supprimer volontairement certains. Il est manifestement sûr, puisqu'aucune nouvelle information ne peut être recueillie.
La capture de région permet de limiter les informations envoyées aux participants à distance. Par exemple, vous souhaitez peut-être partager quelques diapositives, mais pas vos commentaires du présentateur.
Il n'est absolument pas souhaitable de partager les notes à distance. Mise à l'emplacement de la capture de zone
Notez que la capture régionale n'offre aucune garantie de sécurité en local. Lorsque vous transférez une piste vers un autre document, le document de destination 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 d'un recadrage, Chrome dessine généralement la bordure bleue autour de la cible recadrée.
Démonstration
Vous pouvez jouer avec la capture de région en exécutant la démonstration sur Glitch. N'oubliez pas de vérifier le code source.
Prise en charge des navigateurs
Navigateurs pris en charge
- 104
- 104
- x
- x
La capture de région est disponible à partir de Chrome 104 sur ordinateur uniquement.
Étapes suivantes
Voici un aperçu des fonctionnalités qui amélioreront le partage d'écran sur le Web dans un avenir proche:
- La capture de région est compatible avec d'autres onglets.
- La mise au point conditionnelle permet à l'application Web de capture de demander au navigateur de basculer sur la surface d'affichage capturée ou d'éviter ce type de changement de sélection.
- Une API 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 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 ? Ou manque-t-il 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 faites part de vos commentaires à un problème existant.
Un problème d'implémentation ?
Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou la mise en œuvre est-elle différente des spécifications ?
- Pour signaler un bug, rendez-vous sur https://new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que des instructions simples pour reproduire le bug. Glitch est idéal pour partager des représentations rapides et faciles.
Montrez votre soutien
Prévoyez-vous d'utiliser la capture de zone ? 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 prendre en charge.
Envoyez un tweet à @ChromiumDev pour nous indiquer où et comment vous l'utilisez.
Liens utiles
Remerciements
Merci à Joe Medley d'avoir consulté cet article.