Le Chrome Web Store a décidé d'interdire l'installation en ligne d'extensions pour Chrome. Ceci est directement lié aux applications WebRTC, car vous avez maintenant besoin d'une extension pour les captures d'écran dans Chrome.
L'API getDisplayMedia viendra-t-elle à la rescousse?
Capture d'écran dans Chrome
Lorsque cette fonctionnalité
est apparue dans Chrome 33 , elle avait besoin d'une extension pour fonctionner - pour résoudre les problèmes de sécurité. Cette méthode est meilleure que la précédente, lorsque les captures d'écran étaient cachées sous un drapeau, à cause des sites qui demandaient aux utilisateurs d'activer ce drapeau ... Ce qui a conduit à
des messages de sécurité publique .
Chrome n'a pas beaucoup changé depuis 2013. Les exigences d'extension ont ajouté des difficultés au processus de partage, mais grâce à l'
installation en ligne , qui a simplifié la vie:
- l'utilisateur clique sur un bouton pour démarrer une capture d'écran;
- L'application Web détermine que Chrome est utilisé et que l'extension souhaitée n'est pas installée;
- l'application Web démarre l'installation en ligne, résout avec succès le rappel;
- dans Chrome, une fenêtre de choix apparaît exactement ce que l'utilisateur veut partager.
Les détails de la mise en œuvre peuvent être
trouvés ici .
La boîte de sélection est un élément clé ici. Est-il sûr de l'utiliser sans réseau Web Store?
Dans ce cas, le partage d'un onglet est particulièrement déroutant, car il viole le principe du bac à sable pour les scripts «d'origine croisée».
Capture d'écran de Firefox
Firefox a une approche différente - une liste blanche de sites autorisés à utiliser l'API. Pour figurer sur cette liste, le site doit faire une demande à Mozilla et prouver qu'il a les conditions d'utilisation et la politique de confidentialité. Vous pouvez modifier la liste blanche à l'aide de l'extension. La nécessité d'une telle liste a disparu avec la sortie de Firefox 52, quand toute source confirmée a été autorisée à utiliser des captures d'écran. La nouvelle
API getDisplayMedia n'est toujours pas utilisée
ici , dont nous parlerons bientôt, mais l'implémentation est presque la même:
| navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}}) |
| .then(stream => { |
| // , |
| videoElement.srcObject = stream; |
| }, error => { |
| console.log(" ", error); |
| }); |
Par conséquent, l'implémentation sera modifiée
pour répondre à la spécification .
API getDisplayMedia
Le consortium W3C travaille à normaliser l'API de
capture d'écran . C'est relativement simple et basé sur des promesses, comme
getUserMedia :
| // 1 Screen Capture API |
| navigator.getDisplayMedia({ video: true }) |
| .then(stream => { |
| // , |
| videoElement.srcObject = stream; |
| }, error => { |
| console.log(" ", error); |
| }); |
Microsoft EDGE a déjà déployé des captures d'écran cette année. Le scénario d'utilisation est très bien pensé, avec l'ajout d'un cadre jaune autour de la zone que partage l'utilisateur:
Capture d'écran de la fenêtre dans Edge. Faites attention au cadre jaune qui met en évidence ce qui est exactement partagé.Les temps changent et les extensions Chrome avec eux
En parlant d'expérience utilisateur, l'extension appear.in fonctionne comme décrit ci-dessus et compte plus d'un million d'installations. La grande majorité des utilisateurs sont passés par une installation en ligne, et il y en a tellement que les captures d'écran de l'extension dans le Chrome Web Store n'ont pas été mises à jour depuis ... probablement 2014.
Comme le
dit le blog du
Chrome Web Store , ils suppriment désormais une installation en ligne. Ce fut une grosse surprise, je l'ai d'abord appris grâce à l'ancien problème Chrome - pour rendre les captures d'écran plus accessibles (merci à
Wilhelm Wanecek pour l'astuce).
Si je comprends bien, cela entraînera l'ouverture du Chrome Web Store dans un onglet distinct. De la part de l'application web, il deviendra plus difficile de déterminer quand l'utilisateur a installé l'extension, il faudra utiliser des sondages ou un timeout. Les termes suivants sont indiqués dans la publication:
- Une installation en ligne ne sera pas disponible pour les nouvelles extensions à partir du 12 juin. Sans préavis;
- pour les extensions déjà publiées, l'installation en ligne sera disponible jusqu'au 12 septembre. Préavis - trois mois à l'avance.
Réclamations
Il y a certainement des problèmes ici. Et je ne parle même pas de Google Hangouts / Meet, qui évite complètement les difficultés UX auxquelles tout le monde doit faire face avec l'extension intégrée. Les gars de Chrome se
tordent déjà les mains .
Je souhaite recevoir à l'avance des nouvelles de l'équipe du Chrome Web Store (la lettre est arrivée environ 24 heures après la publication du blog). L'extension appear.in compte plus d'un million d'utilisateurs, ce qui en fait l'une des plus populaires pour les captures d'écran. Nos utilisateurs font confiance à notre site, c'est-à-dire qu'ils nous donnent accès à leurs microphones et caméras. L'utilisation d'une installation en ligne basée sur cette approbation est probablement plus sûre que l'installation à partir du Chrome Web Store. Nous nous sommes également tournés vers le support de la boutique en ligne pour supprimer les copies illégales de l'extension, que des centaines d'utilisateurs se sont fixées à plusieurs reprises.
Et ce serait formidable si les gars de Google nous avertissaient.
Le compte
@webrtc a mentionné l'intention de déployer
getDisplayMedia en réponse aux modifications de la politique d'installation en ligne.
Le chemin pour Chrome est la sortie de
getDisplayMedia . «Intention de déploiement» a été publié
peu de temps après les principales nouvelles . Cependant, compte tenu du cycle de sortie de Chrome, cela prendra plusieurs semaines. Il s'agit d'un changement non négligeable dans les dispositions de sécurité et les scénarios d'utilisation, il est donc peu probable qu'il se produise avant la date limite du 12 septembre. Le point de branchement pour Chrome 69, qui sera publié d'ici le 12 septembre, est dans un mois.
La situation avec Chrome est compliquée par le fait que le partage des onglets est désormais autorisé, mais avec une limitation du choix d'affichage pour l'utilisateur. Le partage de sortie audio est pris en charge dans Chrome, mais ce n'est même pas dans la spécification
getDisplayMedia .
Comment se préparer aux changements dans Chrome
Le code lié à la
prise en charge de
getDisplayMedia est relativement simple. En règle générale, un appel à cette API est identique à
getUserMedia avec l'argument
mediaSource est appelé dans Firefox. Il est facile de déterminer si cette fonctionnalité est disponible, vous devez vérifier si
getDisplayMedia existe et l'utiliser en priorité si elle est disponible:
On ne sait toujours pas comment indiquer la fréquence d'images. L'utilisation de
applyConstraints dans le
MediaStreamTrack retourné fonctionne pour
getUserMedia et fonctionnera probablement pour
getDisplayMedia :
| navigator.getDisplayMedia({video: true}) |
| .then(stream => { |
| stream.getTracks()[0].applyConstraints({frameRate: 5}); |
| return stream; |
| }) |
Les détails sont dans le
bugtracker de spécification .
Hélas,
adapter.js ne peut pas insérer
getDisplayMedia , car l'interaction avec chaque extension est implémentée un peu différemment.
Plus loin et plus haut
Je surveille attentivement si les développeurs WebRTC de Google peuvent influencer la date limite des installations en ligne ou déployer
getDisplayMedia à temps. Le développement sous le Web est parfois compliqué, oui, mais en règle générale, nous voyons un bon résultat. Nous attendons la fin de cette histoire et serons heureux de dire au revoir à nos extensions.
Capture d'écran dans Voximplant
Nous avons également une capture d'écran qui fonctionne correctement dans Chrome. Cependant, bien que personne n'ait dit au revoir aux extensions, vous devez procéder comme suit:
- Téléchargez l'extension depuis notre référentiel: github.com/voximplant/voximplant-chrome-extension
- Allez dans le dossier où l'extension est téléchargée, ouvrez manifest.json et ajoutez l'URL de votre site à la section des correspondances .
- Dans le nouvel onglet Chrome, entrez les extensions chrome: // , activez le mode développeur et chargez l'extension à partir du dossier.
Vous installez donc la version dev de l'extension. C'est plus pratique pour les utilisateurs finaux si vous publiez l'extension dans le Googe Web Store. À ce sujet, ainsi que sur la façon d'utiliser les captures d'écran sur notre plateforme, vous pouvez lire dans
notre guide pratique . Bon partage!