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 de capture et celles capturées. Capture Handle 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 les avantages.

Exemple 1 : Si une application Web de visioconférence capture une application Web de présentation, elle peut exposer des commandes à l'utilisateur pour naviguer entre les diapositives. Comme les commandes sont intégrées directement dans l'application Web de visioconférence, l'utilisateur n'a pas besoin de basculer plusieurs fois entre l'onglet de visioconférence et l'onglet de présentation. L'utilisateur peut ainsi se concentrer davantage sur la présentation.

Exemple 2 : L'effet "galerie des glaces" se produit lorsqu'une surface capturée est rendue à l'emplacement de la capture. En particulier, si l'utilisateur choisit de capturer l'onglet dans lequel se déroule une visioconférence et que l'application Web de visioconférence affiche un aperçu local, cet effet redouté se produira. L'utilisation de Capture Handle permet de détecter et d'atténuer l'auto-capture, par exemple en supprimant l'aperçu local dans l'application Web.

À propos de la poignée de capture

Le nom de chaîne se compose de deux parties complémentaires :

• Les applications Web capturées peuvent choisir d'exposer 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 de capture potentielles. 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 caractères (jusqu'à 1 024 caractères).
• exposeOrigin : si la valeur est true, l'origine de l'application Web capturée peut être exposée aux applications Web de capture.
• permittedOrigins : les valeurs valides sont (i) un tableau vide, (ii) un tableau avec un seul élément "*" ou (iii) un tableau d'origines. Si permittedOrigins ne contient que l'élément "*", CaptureHandle est observable par toutes les applications Web de capture. Sinon, il n'est observable que par les applications Web de capture 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 handle et 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 en train d'être capturée. Sauf si l'application Web de capture utilise les informations CaptureHandle pour établir une communication avec l'application Web capturée (à l'aide de messages via un worker ou d'une infrastructure cloud partagée, par exemple).

Côté capture

L'application Web de capture contient une vidéo MediaStreamTrack et peut lire les informations du handle de capture en appelant getCaptureHandle() sur ce MediaStreamTrack. Cet appel renvoie null si aucun handle 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 est défini sur true. Sinon, il n'est pas défini.

L'exemple suivant montre comment lire les informations sur le handle 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 apportées à CaptureHandle en écoutant les événements "capturehandlechange" sur un objet MediaStreamTrack. Les modifications sont apportées dans les cas suivants :

• L'application Web capturée appelle navigator.mediaDevices.setCaptureHandleConfig().
• Une navigation entre 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 de capture et celles capturées est théoriquement possible aujourd'hui, en intégrant des "pixels magiques" dans l'application Web capturée ou en intégrant des codes QR dans le flux vidéo, par exemple. Capture Handle 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 premier niveau dans les contextes de navigation sécurisée (HTTPS uniquement).

Échantillon

Vous pouvez tester le handle de capture en exécutant l'exemple.

Démonstrations

Certaines démonstrations sont disponibles à l'adresse suivante :

• Télécommande
• Détection de l'autocapture

Détection de caractéristiques

Pour vérifier si getCaptureHandle() est pris en charge, utilisez la commande suivante :

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

Pour vérifier si navigator.mediaDevices.setCaptureHandleConfig() est pris en charge, utilisez la commande suivante :

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

É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 permettrait de recadrer une piste vidéo issue de la capture d'écran de l'onglet actuel.
• L'activation conditionnelle de la mise au point permettrait à l'application Web de capture d'indiquer au navigateur de faire la mise au point sur la surface d'affichage capturée ou de l'éviter.

Commentaires

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

Parlez-nous de la conception

Y a-t-il quelque chose concernant le nom à afficher qui ne fonctionne pas comme prévu ? 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é ?

• Créez une demande concernant les spécifications dans le dépôt GitHub ou ajoutez vos commentaires à une demande existante.

Vous rencontrez un problème d'implémentation ?

Avez-vous trouvé un bug dans l'implémentation de Chrome ? 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 le reproduire.

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

Liens utiles

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

Remerciements

Merci à Joe Medley d'avoir relu cet article.