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 Capture d'écran. En bref, getDisplayMedia() permet à l'utilisateur de sélectionner un écran ou une partie d'écran (une fenêtre, par exemple) à capturer comme flux multimédia. Cette diffusion peut ensuite être enregistrée ou partagée avec d'autres utilisateurs sur le réseau. Cet article présente des modifications récentes apportées à l'API afin de mieux préserver la confidentialité et d'éviter le partage accidentel d'informations personnelles.

Voici une liste de paramètres que vous pouvez utiliser pour partager l'écran en protégeant 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 permet d'empêcher l'utilisateur de partager un écran entier.
• L'option surfaceSwitching indique si Chrome doit permettre à l'utilisateur de passer d'un onglet partagé à un autre de manière dynamique.
• L'option selfBrowserSurface permet d'empêcher l'utilisateur de partager l'onglet actif. Cela permet d'éviter l'effet "hall des miroirs".
• L'option systemAudio permet de s'assurer 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 conviennent le mieux au partage d'une fenêtre ou d'un écran, peuvent toujours demander à Chrome d'afficher des fenêtres ou des écrans plus en évidence dans le sélecteur de fichiers multimédias. L'ordre de l'offre reste inchangé, mais le volet correspondant est présélectionné.

Les valeurs de l'option displaySurface sont les suivantes:

• "browser" pour les onglets.
• "window" pour Windows.
• "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 de présélection d'une fenêtre ou d'un écran spécifique. C'est par nature, car cela donnerait à l'application Web un trop grand pouvoir sur l'utilisateur.

L'option monitorTypeSurfaces

Pour protéger les entreprises des fuites d'informations privées résultant des erreurs des employés, les applications Web de visioconférence peuvent désormais définir monitorTypeSurfaces sur "exclude". Chrome exclura alors les écrans du sélecteur de fichiers multimédias. Pour l'inclure, définissez-la sur "include". Actuellement, la valeur par défaut de monitorTypeSurfaces est "include", mais nous vous recommandons de la définir explicitement pour les applications Web, 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 avec displaySurface: "monitor".

L'option surfaceSwitching

L'une des raisons les plus citées à l'origine du partage de l'intégralité de l'écran est le souhait de passer facilement d'une surface à l'autre au cours d'une session. Pour résoudre ce problème, Chrome propose désormais un bouton qui permet à l'utilisateur de basculer dynamiquement entre différents onglets partagés. Auparavant disponible pour les extensions Chrome, le bouton "Partager cet onglet à la place" était désormais disponible pour toutes les applications Web qui appellent getDisplayMedia().

Si surfaceSwitching est défini sur "include", le navigateur affiche ledit bouton. S'il est défini sur "exclude", l'utilisateur ne voit pas ce bouton. Les applications Web sont encouragé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"
});

L'option selfBrowserSurface

Dans les scénarios de visioconférence, les utilisateurs font souvent l'erreur de sélectionner l'onglet de visioconférence en lui-même, ce qui entraîne un effet "hall des miroirs", des hurlements 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 exclut alors l'onglet actif de la liste des onglets proposés à l'utilisateur. Pour l'inclure, définissez-la sur "include". Actuellement, la valeur par défaut de selfBrowserSurface est "exclude", mais nous vous recommandons de la définir explicitement pour les applications Web, car elle est susceptible de changer à l'avenir.

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

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

L'option systemAudio

getDisplayMedia() permet d'enregistrer le son en même temps que la vidéo. Cependant, 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 le son. - L'audio du système, en revanche, inclut l'audio des participants à distance et ne doit pas leur être retransmis

Par la suite, il sera possible d'exclure certaines sources audio de l'enregistrement. Mais pour l'instant, les applications Web de visioconférence préfèrent souvent éviter d'enregistrer l'audio du système. Auparavant, il était possible de vérifier la surface d'affichage choisie par l'utilisateur et d'arrêter la piste audio s'il choisissait de partager un écran. Cependant, cela pose un petit problème, car certains utilisateurs sont confus lorsqu'ils cochent explicitement la case pour partager l'audio du système, et des participants à distance les disent ensuite qu'aucun son n'est entrant.

En définissant systemAudio sur "exclude", une application Web peut éviter de déconcerter les utilisateurs en raison de signaux mixtes. Chrome propose d'enregistrer le son à 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 pour les applications Web, car elle est susceptible de changer à l'avenir.

Démonstration

Vous pouvez jouer avec ces commandes de partage d'écran en exécutant la démonstration sur Glitch. Pensez à 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 les commandes de partage d'écran.

Parlez-nous de la conception

Y a-t-il quelque chose dans les commandes de partage d'écran qui ne fonctionne pas comme prévu ? 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 du code.

Montrez 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 prendre en charge.

Envoyez un tweet à @ChromiumDev pour nous indiquer 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

Image principale de John Schnobrich.

Merci à Rachel Andrew d'avoir consulté cet article.