openclassroom - Utilisation de HTML5/Canvas/JavaScript pour prendre des captures d'écran dans le navigateur




lecteur video javascript (2)

Votre application Web peut maintenant prendre une capture d'écran «native» de l'ensemble du bureau du client en utilisant getUserMedia() :

Jetez un oeil à cet exemple:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

Le client devra utiliser chrome (pour l'instant) et devra activer la prise en charge de capture d'écran sous chrome: // flags.

"Signaler un bug" ou "Outil de rétroaction" de Google vous permet de sélectionner une zone de la fenêtre de votre navigateur pour créer une capture d'écran soumise avec vos commentaires sur un bogue.

Capture d'écran par Jason Small, posté dans une question en double .

Comment font-ils cela? L'API de retour de JavaScript de Google est chargée à partir d' here et leur aperçu du module de rétroaction montrera la capacité de capture d'écran.


JavaScript peut lire le DOM et en rendre une représentation assez précise en utilisant canvas . J'ai travaillé sur un script qui convertit html dans une image de toile. Décidé aujourd'hui d'en faire une implémentation en envoyant des retours comme vous l'avez décrit.

Le script vous permet de créer des formulaires de commentaires qui incluent une capture d'écran, créée sur le navigateur des clients, avec le formulaire. La capture d'écran est basée sur le DOM et, en tant que telle, peut ne pas être exacte à 100% pour la représentation réelle car elle ne fait pas une capture d'écran réelle, mais construit la capture d'écran basée sur les informations disponibles sur la page.

Il ne nécessite aucun rendu du serveur , car l'image entière est créée sur le navigateur des clients. Le script HTML2Canvas lui-même est toujours dans un état très expérimental, car il n'analyse pas presque autant d'attributs CSS3 que je le voudrais, et il n'a aucun support pour charger les images CORS même si un proxy était disponible.

Compatibilité navigateur encore assez limitée (pas parce que plus ne pouvait pas être pris en charge, juste n'ont pas eu le temps de le rendre plus cross navigateur pris en charge).

Pour plus d'informations, regardez les exemples ici:

http://hertzen.com/experiments/jsfeedback/

edit Le script html2canvas est maintenant disponible séparément here et quelques exemples ici .

edit 2 Une autre confirmation que Google utilise une méthode très similaire (en fait basée sur la documentation, la seule différence majeure est leur méthode de traversée / dessin asynchrone) peut être trouvée dans cette présentation par Elliott Sprehn de l'équipe Google Feedback: http://www.elliottsprehn.com/preso/fluentconf/





screenshot