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

François Beaufort
François Beaufort
GitHub
Elad Alon

Navigateurs pris en charge

  • Chrome: 102. <ph type="x-smartling-placeholder">
  • Edge: 102. <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: non compatible. <ph type="x-smartling-placeholder">

La plate-forme Web intègre désormais une poignée de capture, un mécanisme qui facilite la collaboration entre les applications Web de capture et celles capturées. Capturer le handle permet à une application Web de capture d'identifier l'application Web capturée de manière ergonomique et fiable. (si l'application Web capturée a été activée).

Voici quelques exemples illustrant les avantages.

Exemple 1:Si une application Web de visioconférence capture une application Web de présentation, elle peut présenter des commandes permettant à l'utilisateur de naviguer entre les diapositives. Comme les commandes sont intégrées directement à 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 présenté. Cette contrainte étant levée, l'utilisateur est maintenant libre de se concentrer davantage sur la présentation de sa présentation.

Exemple 2:La "galerie des miroirs" se produit lorsqu'une surface capturée est renvoyée à l'emplacement capturé. En particulier, si l'utilisateur choisit de capturer l'onglet dans lequel un appel de visioconférence a lieu et que l'application Web de visioconférence affiche un aperçu local, cet effet redouté sera observé. L'utilisation d'un handle de capture permet de détecter l'auto-capture et de limiter les risques associés. par exemple, en supprimant l'aperçu local.

Illustration de l&#39;effet Hall des miroirs

À 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 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 aux applications Web susceptibles d'être capturées. Pour ce faire, il appelle navigator.mediaDevices.setCaptureHandleConfig() avec un objet facultatif composé des membres suivants:

  • handle: n'importe quelle chaîne comportant jusqu'à 1 024 caractères.
  • exposeOrigin: si la valeur est true, l'origine de l'application Web capturée peut être exposée lors de la capture d'applications Web.
  • permittedOrigins: les valeurs valides sont (i) un tableau vide, (ii) un tableau avec un seul élément "*", ou (iii) un tableau des origines. Si permittedOrigins comprend le seul élément "*", CaptureHandle est observable par toutes les applications Web de capture. Sinon, il n'est observable que pour la capture des 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 handle et l'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 c'est le cas, l'application Web de capture utilise des informations CaptureHandle pour établir la communication avec l'application Web capturée (à l'aide d'une messagerie via un nœud de calcul ou une infrastructure cloud partagée, par exemple).

Capture du côté...

L'application Web de capture contient un MediaStreamTrack vidéo et peut lire les informations sur la poignée de capture en appelant getCaptureHandle() au niveau de 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 a été défini sur true. Sinon, il n'est pas défini.

L'exemple suivant montre comment lire les identifiants 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 de CaptureHandle en écoutant les événements "capturehandlechange" sur un objet MediaStreamTrack. Des modifications se produisent 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 la capture et la capture des applications Web est théoriquement possible aujourd'hui, grâce à l'intégration de "pixels magiques" dans l'application Web capturée ou l'intégration de codes QR dans le flux vidéo, par exemple. Capturer la poignée offre un mécanisme plus simple, plus fiable et plus sécurisé. Cela permet également à l'application Web capturée de sélectionner l'audience (soit des origines, soit l'ensemble du Web).

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 jouer avec le gestionnaire de capture en exécutant l'exemple sur Glitch. Être pensez à consulter le code source.

Démonstrations

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

Détection de caractéristiques

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 prochaines améliorations qui permettront d'améliorer le partage d'écran sur le Web:

  • L'option Region Capture permet de recadrer une piste vidéo issue de la capture de l'écran de l'onglet actuel.
  • 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.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent en savoir plus sur votre expérience avec le gestionnaire de capture.

Parlez-nous de la conception

Y a-t-il un problème avec le handle de capture 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 un identifiant de 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.

Remerciements

Merci à Joe Medley d'avoir lu cet article.