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

François Beaufort

Elad Alon

Il est déjà possible de partager des onglets, des fenêtres et des écrans sur la plate-forme Web grâce à 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 du réseau. Cet article présente quelques 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 commandes que vous pouvez utiliser pour le partage d'écran 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 l'intégralité d'un écran.
• 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 le "hall des miroirs" l'effet.
• L'option systemAudio garantit que Chrome ne propose que la capture audio pertinente à l'utilisateur.

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 d'afficher des fenêtres ou des écrans plus clairement 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" },
});

</ph>

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.

L'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 exclut alors des écrans dans le sélecteur de fichiers multimédias. Pour l'inclure, définissez-le sur "include". Actuellement, la valeur par défaut de monitorTypeSurfaces est "include", mais nous vous encourageons à la définir explicitement, car la valeur par défaut 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",
});

</ph>

Notez qu'un élément monitorTypeSurfaces: "exclude" explicite et displaySurface: "monitor" s'exclue mutuellement.

L'option surfaceSwitching

L'une des raisons les plus citées pour partager l'intégralité de l'écran est la volonté de basculer facilement entre les différentes surfaces au cours d'une session. Pour résoudre ce problème, Chrome affiche désormais un bouton qui permet à l'utilisateur de basculer dynamiquement entre différents onglets partagés. L'option "Partager cet onglet à la place" était auparavant disponible pour les extensions Chrome et peut désormais être utilisé par toute application Web qui appelle getDisplayMedia().

</ph> <ph type="x-smartling-placeholder">

Si surfaceSwitching est défini sur "include", le navigateur affiche ledit bouton. Si elle est définie sur "exclude", le bouton n'est pas présenté à l'utilisateur. Il est recommandé 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"
});

L'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 conduit à une « salle des miroirs ». l'effet, les hurlements et la 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 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 encourageons à la définir explicitement, car la valeur par défaut est susceptible de changer à l'avenir.

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

</ph>

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

L'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 judicieux d'enregistrer également l'audio. - L'audio du système, en revanche, inclut les enregistrements des participants à distance vos propres données audio et ne doivent pas leur être retransmis.

À l'avenir, il sera peut-être 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. 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. Cependant, cela pose un petit problème, dans la mesure où certains utilisateurs sont confus lorsqu'ils cochent explicitement la case permettant de partager l'audio du système, et les participants à distance sont ensuite informés qu'aucun son n'est entrant.

</ph> <ph type="x-smartling-placeholder">

En définissant systemAudio sur "exclude", une application Web peut éviter de déconcerter les utilisateurs par des signaux mixtes. Chrome proposera de capturer l'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 encourageons à la définir explicitement, car la valeur par défaut est susceptible de changer à l'avenir.

Démo

Vous pouvez jouer avec ces commandes de partage d'écran en exécutant la démonstration 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 un aspect des commandes de partage d'écran 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 fonctionne bien 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 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 TAG

Remerciements

Image héros de John Schnobrich.

Merci à Rachel Andrew d'avoir lu cet article.