Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<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.
À 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 objetsMediaStreamTrack
.
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 esttrue
, 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. SipermittedOrigins
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 danspermittedOrigins
.
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 avecnavigator.mediaDevices.setCaptureHandleConfig()
.origin
: origine de l'application Web capturée siexposeOrigin
a été défini surtrue
. 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.
Liens utiles
Remerciements
Merci à Joe Medley d'avoir lu cet article.