Paramètres de partage d'écran protégeant la confidentialité

Le partage d'onglets, de fenêtres et d'écrans est déjà possible sur la plate-forme Web avec l'API Screen��Capture. En résumé, getDisplayMedia() permet à l'utilisateur de sélectionner une partie ou une partie de l'écran (une fenêtre, par exemple) à capturer en tant que flux multimédia. Ce flux peut ensuite être enregistré ou partagé avec d'autres utilisateurs sur le réseau. Des modifications ont été récemment apportées à l'API afin de mieux préserver la confidentialité et d'éviter le partage accidentel d'informations personnelles.

Voici une liste des commandes que vous pouvez utiliser pour partager votre écran tout en protégeant votre confidentialité :

• L'option displaySurface peut indiquer que l'application Web préfère proposer un type de surface d'affichage spécifique (onglets, fenêtres ou écrans).
• L'option monitorTypeSurfaces permet d'empêcher l'utilisateur de partager un écran entier.
• L'option surfaceSwitching indique si Chrome doit autoriser l'utilisateur à passer d'un onglet partagé à un autre de manière dynamique.
• L'option selfBrowserSurface permet d'empêcher l'utilisateur de partager l'onglet actuel. Cela évite l'effet "hall d'ombres".
• L'option systemAudio garantit que Chrome ne propose à l'utilisateur que la capture audio pertinente.

Modifications apportées à getDisplayMedia()

Les modifications suivantes ont été apportées à getDisplayMedia().

L'option displaySurface

Les applications Web avec des parcours utilisateur spécialisés, qui fonctionnent mieux avec le partage d'une fenêtre ou d'un écran, peuvent toujours demander à Chrome de proposer des fenêtres ou des écrans plus visibles dans le sélecteur multimédia. L'ordre de l'offre reste inchangé, mais le volet concerné est présélectionné.

Les valeurs de l'option displaySurface sont les suivantes :

• "browser" pour les onglets.
• "window" pour les fenêtres.
• "monitor" pour les écrans.

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

Notez que nous ne proposons pas d'option permettant de présélectionner une fenêtre ou un écran spécifique. C'est logique, car cela donnerait à l'application Web trop de pouvoir sur l'utilisateur.

Option monitorTypeSurfaces

Pour protéger les entreprises contre les fuites d'informations privées dues aux erreurs des employés, les applications Web de visioconférence peuvent désormais définir monitorTypeSurfaces sur "exclude". Chrome exclura ensuite les écrans du sélecteur de contenu multimédia. Pour l'inclure, définissez-le sur "include". Actuellement, la valeur par défaut de monitorTypeSurfaces est "include", mais nous vous recommandons de la définir explicitement, car elle est susceptible de changer à l'avenir.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

Notez qu'un monitorTypeSurfaces: "exclude" explicite s'exclut mutuellement de displaySurface: "monitor".

L'option surfaceSwitching

L'une des principales raisons de partager l'intégralité de l'écran est le désir de passer facilement d'un partage de surface à un autre au cours d'une session. Pour y remédier, Chrome propose désormais un bouton qui permet à l'utilisateur de basculer dynamiquement entre le partage de différents onglets. Ce bouton "Partager cet onglet à la place" était auparavant disponible pour les extensions Chrome. Il peut désormais être utilisé par n'importe quelle application Web qui appelle getDisplayMedia().

Si surfaceSwitching est défini sur "include", le navigateur expose ce bouton. Si elle est définie sur "exclude", ce bouton ne s'affiche pas. Nous vous recommandons de définir une valeur explicite pour les applications Web, car Chrome peut modifier la valeur par défaut au fil du temps.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

Option selfBrowserSurface

Dans les scénarios de visioconférence, les utilisateurs font souvent l'erreur de sélectionner l'onglet de visioconférence lui-même, ce qui entraîne un effet "hall d'échos", des sifflements et une confusion générale.

Pour protéger les utilisateurs contre eux-mêmes, les applications Web de visioconférence peuvent désormais définir selfBrowserSurface sur "exclude". Chrome exclura alors l'onglet actuel de la liste des onglets proposés à l'utilisateur. Pour l'inclure, définissez-le sur "include". Actuellement, la valeur par défaut de selfBrowserSurface est "exclude", mais nous vous recommandons de la définir explicitement, car elle est susceptible de changer à l'avenir.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

Notez qu'un élément selfBrowserSurface: "exclude" explicite s'exclue mutuellement avec preferCurrentTab: true.

Option systemAudio

getDisplayMedia() permet d'enregistrer l'audio en même temps que la vidéo. Mais tous les contenus audio ne se valent pas. Envisagez d'utiliser des applications Web de visioconférence : - Si l'utilisateur partage un autre onglet, il est également judicieux d'enregistrer l'audio. En revanche, l'audio système inclut l'audio des participants à distance et ne doit pas leur être retransmis.

À l'avenir, il sera peut-être possible d'exclure certaines sources audio de la capture. Toutefois, pour le moment, il est souvent préférable d'éviter de capturer l'audio système dans les applications Web de visioconférence. Pour ce faire, il était auparavant possible de vérifier la surface d'affichage choisie par l'utilisateur et d'arrêter la piste audio s'il choisit de partager un écran. Toutefois, cela pose un petit problème, car certains utilisateurs sont perplexes lorsqu'ils cochent explicitement la case pour partager l'audio du système et que les participants à distance leur indiquent qu'aucun son n'est reçu.

En définissant systemAudio sur "exclude", une application Web peut éviter de dérouter les utilisateurs en leur transmettant des signaux contradictoires. Chrome proposera de capturer le contenu audio à côté des onglets et des fenêtres, mais pas à côté des écrans.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

Actuellement, la valeur par défaut de systemAudio est "include", mais nous vous recommandons de la définir explicitement, car elle est susceptible de changer à l'avenir.

Démo

Vous pouvez tester ces commandes de partage d'écran en exécutant la démo sur Glitch. N'oubliez pas de consulter le code source.

Prise en charge des navigateurs

• displaySurface, surfaceSwitching et selfBrowserSurface sont disponibles dans Chrome 107 sur ordinateur.

• systemAudio est disponible dans Chrome 105 sur ordinateur.

• monitorTypeSurfaces est disponible dans Chrome 119 sur ordinateur.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent en savoir plus sur votre expérience avec ces commandes de partage d'écran.

Parlez-nous de la conception

Y a-t-il quelque chose qui ne fonctionne pas comme prévu avec les commandes de partage d'écran ? 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 trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ?

• Signalez un bug à l'adresse https://new.crbug.com. Veillez à fournir autant de détails que possible et des instructions simples pour reproduire le bug. Glitch est un bon outil pour partager du code.

Montrer votre soutien

Prévoyez-vous d'utiliser ces commandes de partage d'écran ? 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

• Spécification
• Explication de displaySurface
• Explication de monitorTypeSurfaces
• Explication de surfaceSwitching
• Explication de selfBrowserSurface
• Explication de systemAudio
• Examen du TAG

Remerciements

Merci à Rachel Andrew d'avoir examiné