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

François Beaufort
François Beaufort

Il est déjà possible de partager des onglets, des fenêtres et des écrans sur la plate-forme Web avec l'API Screen Capture. En bref, getDisplayMedia() permet à l'utilisateur de sélectionner un écran ou une partie d'écran (comme une fenêtre) à 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 récemment été apportées à l'API pour mieux préserver la confidentialité et empêcher le partage accidentel d'informations personnelles.

Voici une liste des commandes que vous pouvez utiliser pour le partage d'écran respectueux de la 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 peut être utilisée pour empêcher l'utilisateur de partager un écran entier.
  • L'option surfaceSwitching indique si Chrome doit autoriser l'utilisateur à basculer dynamiquement entre les onglets partagés.
  • L'option selfBrowserSurface peut être utilisée pour empêcher l'utilisateur de partager l'onglet actuel. Cela permet d'éviter l'effet "salle des miroirs".
  • L'option systemAudio permet de s'assurer que Chrome ne propose à l'utilisateur que les options de capture audio pertinentes.

Modifications apportées à getDisplayMedia()

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

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 de manière plus visible dans le sélecteur de contenu multimédia. L'ordre des offres 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" },
});
Capture d'écran du sélecteur de fichiers multimédias avec le fichier présélectionné
Le volet "Fenêtre" est présélectionné dans le sélecteur de fichiers multimédias.

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

Option monitorTypeSurfaces

Pour protéger les entreprises contre la fuite d'informations privées due à des erreurs des employés, les applications Web de visioconférence peuvent désormais définir monitorTypeSurfaces sur "exclude". Chrome exclut alors 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 encourageons les applications Web à la définir explicitement, car elle peut changer à l'avenir.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});
Capture d'écran du sélecteur de fichiers multimédias sans
Le volet "Écran entier" n'est pas visible dans le sélecteur de fichiers multimédias.

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

Option surfaceSwitching

L'une des raisons les plus souvent citées pour partager l'intégralité de l'écran est la possibilité de passer facilement d'une surface à l'autre pendant une session. Pour résoudre ce problème, Chrome propose désormais un bouton qui permet à un utilisateur de basculer de manière dynamique 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().

Capture d'écran du bouton permettant de basculer dynamiquement entre le partage de différents onglets
Bouton "Partager cet onglet à la place" dans Chrome.

Si surfaceSwitching est défini sur "include", le navigateur affichera ce bouton. Si la valeur est définie sur "exclude", le bouton ne s'affiche pas. Les applications Web sont invitées à définir une valeur explicite, 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

Lors de visioconférences, les utilisateurs commettent souvent l'erreur de sélectionner l'onglet de la visioconférence lui-même, ce qui entraîne un effet de "salle des miroirs", des hurlements et une confusion générale.

Pour protéger les utilisateurs, les applications Web de visioconférence peuvent désormais définir selfBrowserSurface sur "exclude". Chrome exclut 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 encourageons les applications Web à la définir explicitement, car elle peut changer à l'avenir.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});
Capture d'écran du sélecteur de fichiers multimédias, à l'exception de l'onglet actuel
L'onglet actuel est exclu. Seul le deuxième onglet est présent.

Notez qu'un selfBrowserSurface: "exclude" explicite s'exclut mutuellement avec preferCurrentTab: true.

Option systemAudio

getDisplayMedia() permet de capturer l'audio en même temps que la vidéo. Mais tous les contenus audio ne se valent pas. Pensez aux applications Web de visioconférence : - Si l'utilisateur partage un autre onglet, il est logique de capturer également l'audio. - L'audio système, en revanche, 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. Mais pour l'instant, les applications Web de visioconférence préfèrent souvent éviter de capturer l'audio système. Auparavant, cela pouvait être fait en vérifiant la surface d'affichage choisie par l'utilisateur et en arrêtant la piste audio s'il choisissait de partager un écran. Cependant, cela pose un petit problème : certains utilisateurs sont déroutés lorsqu'ils cochent explicitement la case pour partager l'audio du système, puis que les participants à distance leur indiquent qu'ils n'entendent rien.

Captures d'écran des sélecteurs de contenus multimédias avec le partage de l'audio des onglets
Le partage de l'audio d'un onglet est proposé dans le volet "Onglet Chrome", mais pas dans le volet "Écran entier".

En définissant systemAudio sur "exclude", une application Web peut éviter de dérouter les utilisateurs en leur envoyant des signaux contradictoires. Chrome proposera de capturer l'audio en même temps que les onglets et les fenêtres, mais pas les é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 encourageons les applications Web à la définir explicitement, car elle peut changer à l'avenir.

Démo

Vous pouvez tester ces commandes de partage d'écran en exécutant la démonstration.

Prise en charge des navigateurs

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: not supported.
  • Safari: not supported.

  • systemAudio est disponible dans Chrome 105 sur ordinateur.

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: not supported.
  • Safari: not supported.

  • monitorTypeSurfaces est disponible dans Chrome 119 sur ordinateur.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent connaître votre avis sur ces commandes de partage d'écran.

Parlez-nous de la conception

Y a-t-il quelque chose dans ces commandes de partage d'écran qui ne fonctionne pas comme prévu ? Manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ?

  • Signalez un problème lié aux spécifications dans le dépôt GitHub ou ajoutez vos commentaires à un problème existant.

Vous rencontrez un problème d'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 ?

Montrer votre soutien

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

Remerciements

Merci à Rachel Andrew pour son examen.