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

François Beaufort
François Beaufort
GitHub
Elad Alon
Elad Alon
GitHub

Navigateurs pris en charge

  • 102
  • 102
  • x
  • x

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

Quelques exemples illustrent 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. Les commandes étant 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 présenté. Une fois cette charge levée, l'utilisateur est désormais libre de se concentrer davantage sur l'exécution de sa présentation.

Exemple 2:L'effet "hall des miroirs" se produit lorsqu'une surface capturée est rendue à l'endroit concerné. 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 redoutable sera observé. L'utilisation d'un identifiant de capture permet de détecter et de limiter l'autocapture, par exemple en supprimant l'aperçu en local dans l'application Web.

Illustration de la salle des miroirs

À propos de la poignée de capture

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

  • Les applis Web capturées peuvent choisir d'exposer certaines informations pour certaines origines avec navigator.mediaDevices.setCaptureHandleConfig().
  • La capture des applications Web permet de lire ces informations avec getCaptureHandle() sur les objets MediaStreamTrack.

Côté capturé

Les applications Web peuvent exposer des informations aux applications Web potentielles. Pour ce faire, elle appelle navigator.mediaDevices.setCaptureHandleConfig() avec un objet facultatif constitué des éléments suivants:

  • handle: peut être 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 aux applications Web.
  • permittedOrigins: les valeurs valides sont (i) un tableau vide, (ii) un tableau ne contenant qu'un seul article, "*", ou (iii) un tableau d'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 qu'identifiant et l'origine pour 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 messages 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 de l'identifiant de capture en appelant getCaptureHandle() sur ce MediaStreamTrack. Cet appel renvoie null si aucun identifiant de capture n'est disponible ou si l'application Web de capture n'est pas autorisée à les 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 était défini sur true. Sinon, il n'est pas défini.

L'exemple suivant montre comment lire les informations sur l'identifiant de capture 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. Les changements se produisent dans les cas suivants:

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

Sécurité et confidentialité

Il est théoriquement possible de collaborer entre la capture et les applications Web capturées aujourd'hui, en intégrant des "pixels magiques" à l'application Web capturée ou des codes QR dans le flux vidéo, par exemple. Capture Handle offre un mécanisme plus simple, plus fiable et plus sécurisé. Elle permet également à l'application Web capturée de sélectionner l'audience, qu'il s'agisse de sélectionner des origines ou de l'ensemble du Web.

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

Échantillon

Vous pouvez jouer avec la poignée de capture en exécutant l'exemple sur Glitch. N'oubliez pas de vérifier le code source.

Démonstrations

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

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.
}

Étapes suivantes

Voici un aperçu des fonctionnalités qui permettront d'améliorer le partage d'écran sur le Web dans un avenir proche:

  • La fonctionnalité Capture de région permet de recadrer une piste vidéo issue de la capture de l'écran de l'onglet actif.
  • 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 un tel changement de sélection.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent en savoir plus sur votre expérience avec l'identifiant Capture.

Parlez-nous de la conception

Y a-t-il quelque chose qui ne fonctionne pas comme prévu dans l'identifiant de capture ? 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 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 prendre en charge.

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

Remerciements

Merci à Joe Medley d'avoir consulté cet article.