Amélioration du partage d'onglet avec la poignée de capture

François Beaufort

Elad Alon

La plate-forme Web est désormais fournie avec Capture Handle, un mécanisme qui facilite la collaboration entre les applications Web capturées et celles qui effectuent la capture. La poignée de capture permet à une application Web de capture d'identifier de manière ergonomique et fiable l'application Web capturée (si l'application Web capturée a activé cette fonctionnalité).

Voici quelques exemples qui illustrent ces avantages.

Exemple 1:Si une application Web de visioconférence capture une application Web de présentation, elle peut exposer des commandes permettant à l'utilisateur de naviguer entre les diapositives. Étant donné que les commandes sont intégrées directement à l'application Web de visioconférence, l'utilisateur n'a pas besoin de passer constamment de l'onglet de visioconférence à l'onglet présenté. Libéré de ce fardeau, l'utilisateur peut désormais se concentrer davantage sur la présentation.

Exemple 2:L'effet "hall d'ombres" se produit lorsqu'une surface capturée est affichée à nouveau à l'emplacement de la capture. Plus précisément, si l'utilisateur choisit de capturer l'onglet dans lequel un appel par visioconférence est en cours et que l'application Web de visioconférence affiche un aperçu local, cet effet redouté sera observé. Avec le gestionnaire de capture, la capture automatique peut être détectée et atténuée, par exemple en supprimant l'aperçu local dans l'application Web.

À propos de la poignée de capture

La poignée de capture se compose de deux parties complémentaires:

• Les applications Web capturées peuvent activer l'exposition de certaines informations à certaines origines avec navigator.mediaDevices.setCaptureHandleConfig().
• Les applications Web de capture peuvent ensuite lire ces informations avec getCaptureHandle() sur les objets MediaStreamTrack.

Côté capturé

Les applications Web peuvent exposer des informations à des applications Web susceptibles de les capturer. Pour ce faire, il appelle navigator.mediaDevices.setCaptureHandleConfig() avec un objet facultatif composé des membres suivants:

• handle: peut être n'importe quelle chaîne de 1 024 caractères maximum.
• exposeOrigin: si la valeur est true, l'origine de l'application Web capturée peut être exposée à la capture d'applications Web.
• permittedOrigins: les valeurs valides sont (i) un tableau vide, (ii) un tableau contenant l'élément unique "*" ou (iii) un tableau d'origines. Si permittedOrigins ne contient qu'un seul élément, "*", CaptureHandle est observable par toutes les applications Web de capture. Sinon, il n'est observable que pour la capture d'applications Web dont l'origine se trouve dans permittedOrigins.

L'exemple suivant montre comment exposer un UUID généré de manière aléatoire en tant que poignée et en tant qu'origine à toute application Web de capture.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Notez que l'application Web capturée ne sait pas si elle est capturée. Sauf si l'application Web de capture utilise des informations CaptureHandle pour établir la communication avec l'application Web capturée (à l'aide de la messagerie via un worker ou une infrastructure cloud partagée, par exemple).

Côté de la capture

L'application Web de capture contient un MediaStreamTrack vidéo et peut lire les informations de poignée de capture en appelant getCaptureHandle() sur ce MediaStreamTrack. Cet appel renvoie null si aucun gestionnaire de capture n'est disponible ou si l'application Web de capture n'est pas autorisée à le lire. Si un handle de capture est disponible et que l'application Web de capture est ajoutée à permittedOrigins, cet appel renvoie un objet avec les membres suivants:

• handle: valeur de chaîne définie par l'application Web capturée avec navigator.mediaDevices.setCaptureHandleConfig().
• origin: origine de l'application Web capturée si exposeOrigin a été défini sur true. Sinon, il n'est pas défini.

L'exemple suivant montre comment lire les informations de poignée de capture à partir d'une piste vidéo.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

Surveillez les modifications CaptureHandle en écoutant les événements "capturehandlechange" sur un objet MediaStreamTrack. Les modifications sont appliquées dans les cas suivants:

• L'application Web capturée appelle navigator.mediaDevices.setCaptureHandleConfig().
• Une navigation inter-documents se produit dans l'application Web capturée.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Sécurité et confidentialité

La collaboration entre les applications Web capturées et celles qui effectuent la capture est théoriquement possible aujourd'hui, par exemple en insérant des "pixels magiques" dans l'application Web capturée ou des codes QR dans le flux vidéo. Le gestionnaire de capture offre un mécanisme plus simple, plus fiable et plus sécurisé. Il permet également à l'application Web capturée de sélectionner l'audience (origines sélectionnées ou Web entier).

Notez que navigator.mediaDevices.setCaptureHandleConfig() n'est disponible que pour les cadres principaux de niveau supérieur dans les contextes de navigation sécurisée (HTTPS uniquement).

Échantillon

Vous pouvez tester la poignée de capture en exécutant l'exemple sur Glitch. Veillez à consulter le code source.

Démonstrations

Vous trouverez certaines démonstrations sur les sites suivants:

• Télécommande
• Détection de prise de vue de soi-même

Détection de fonctionnalités

Pour vérifier si getCaptureHandle() est compatible, utilisez:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

Pour vérifier si navigator.mediaDevices.setCaptureHandleConfig() est compatible, utilisez:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

É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 permet de recadrer une piste vidéo dérivée de la capture d'écran de l'onglet actuel.
• 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.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent connaître votre expérience avec le contrôle Capture.

Parlez-nous de la conception

La poignée de capture 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 Capture Handle ? 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.