Interagir avec l’appareil utilisateur pour capturer des photos est une fonctionnalité devenue maintenant très commune. De nombreuse application Javascript demande de pouvoir accéder au ressources native de l’appareil sur lequel le code sera exécuté. Prendre une photo n’est qu’un exemple parmi tant d’autres. Et pourtant, il existe de nombreuses manières de mettre en place ce type de fonctionnalité.
Dans cet article, je vais expliquer comment accéder à la caméra de l’utilisateur et prendre une photo en utilisant la librairie CapacitorJS.
Prendre une photo en Javascript
Voilà qui le défi. Comment permettre à l’utilisateur de prendre une photo avec la caméra de son appareil ou ordinateur ? Et comment faire pour que cela fonctionne sur tous les navigateurs de manière unifié ? Sans produire une montagne de code indigeste ?
Il existe plusieurs solution pour palier à cette difficulté, pour ma part, j’ai fais mon choix c’est CapacitorJS que j’utilise!
CapacitorJS pour prendre des photos
Tout d’abord, c’est qui ce CapacitorJS? Et que permet cet outil?
En premier, il faut savoir que CapacitorJS n’est pas une librairie, mais Moteur D’exécution pour l’accès aux ressources natives (native runtime), et qu’il est développé par une équipe qui n’est autre que la team de Ionic. Oui! La team Ionic qui propose Ionicframwork.
Pas étonnant que j’utilise et préconise l’utilisation de Capacitor pour l’accès aux ressources natives…
En plus, CapacitorJS est conçu de manière à pouvoir s’intégrer à n’import quel projet javascript builder avec un utilitaire comme Webpack, Snowpack ou Parcel.
C’est entre autre ce qui le rend extremenent interesant. L’outil ne perturbe pas la logique métier de ton application.
Il s’utilise avec un système d’import qui permet de recourir uniquement aux divers plugin donc vous avec besoin sans avoir à intégrer les autres.
Ce module que l’on import donne directement l’accès aux ressources natives de l’appareil avec des méthodes unifié pour chaque plateforme..
À oui j’oubliais un autre des points forte de CapacitorJS, c’est qu’il propose tous ces plugin en « Cross-Platform »!! Incroyable non? Je ne sais pas si cela est bien clair…
Cela veut dire que Capacitor permet d’accéder au ressources native de n’import quel appareil de manière complètement unifiée! Rien à développé de spécifique pour fonctionner sur tel ou tel environnement..
Tout est « Cross-Platform » je dis! La magie !
Prendre des photos avec Capacitor?
Comme expliquer juste avant, CapacitorJS fonctionne dans n’import quel projet Javascript ou Typescript builder avec un outil comme Webpack.
Les possibilités de contexte d’utilisation de Capacitor sont donc enrorme!
Je vais dans cet article présenter comment intégrer CapacitorJS dans un framework très connu, et que la plupart des architectes software privilégie pour la conception de system reposant sur le langage de programmation Typescript… Angular
Comment installer Capacitor dans un projet Angular
Donc pour intégrer CapacitorJS à un projet Angular, il va falloir entrer dans le terminal uniquement deux petite ligne de commande qui vont s’occuper de toute l’installation. Cool non?
Voici les deux commandes à entrer pour installer Capacitor dans un projet Angular:
$ ng add @capacitor/angular
$ npx cap initPrendre une photo avec le plugin Camera de Capacitor
Maintenant que Capacitor est installer on va pouvoir utiliser un des plugin qu’il nous met à disposition. C’est le fameux plugin Camera.
L’utilisation de ce plugin est vraiment extrêmement simple. Avec moins de 20 lignes de code on peut déclencher la caméra de l’appareil et prendre une photo. Quand la photo est prise, l’utilisateur peut valider la prise ou recommencer jusqu’as ce que la photo lui convienne.
Voici le bout de code qui permet de prendre une photo:
Cet exemple de méthode à intégré dans l’une de tes class component pour déclencher Capacitor Camera et prendre une photo.
Le résultat du plugin natif est ensuite stocké dans une propriété de la class, ici this.imageURL.
Cette propriété peut ainsi être utilisée pour effectuer l’affichage de la photo prise par l’utilisateur.
Voilà, on a fait le tour du sujet. Il ne reste plus qu’as enregistrer cette image sur un service dédié et le travail sera complet.
Sauvegarder la photo prise avec Capacitor
Maintenant que la photo est prise et que l’on peut l’afficher dans l’application, il ne reste plus qu’a envoyer le fichier à un service dédié pour effectuer l’enregistrement définitif.
Ici, plusieurs choix se présents à nous. On peut imaginer envoyer le fichier via une requête HTTP sur un serveur web. Celui-ci qui prendra le relais et enregistra le fichier dans un répertoire du serveur avant de nous retourner l’adresse de sauvegarde. C’est cette adresse qui nous permettra de retrouver le fichier et l’afficher par la suite.
Personnellement, je travaille depuis plusieurs années avec des outils dans le cloud et je suis habitué à avoir la main mise sur la totalité de l’architecture du projet sur lequel je travaille.
Je privilégie donc l’utilisation de service décentralise dans le cloud comme Firebase Storage, AWS Bucket S3 et autres acteurs cloud.
J’ai spécialement conçu pour toi un article qui traite en détails de la sauvegarde des fichiers dans le cloud. Dans cet article, tu y apprendras comment sauvegarder un fichier dans le cloud AWS S3 et Firebase Storage.
En attendant, je te laisse consulter le code source de l’exemple que j’ai présenté pour prendre la photo. Et je te retrouve sur les prochains articles pour découvrir comment sauvegarder un fichier dans le cloud.
Code source: https://github.com/FazioNico/camera-capacitor
Vidéo youtube: https://youtu.be/ijhQ_haRYto
Conclusion
Nous avons vu comment utiliser Capacitor pour prendre une photo. C’est est vraiment super facile et ne prend pas beaucoup de temps à être mis en place. Dans les articles suivant, je te montre comment sauvegarder les photos prises avec Capacitor dans le cloud.
Tu as aimé cet article et tu veux en apprendre plus sur framework Angular? Tu peux consulter les autres articles qui traitent du même sujet sur mon blog, dans la catégorie Angular, mais je te propose aussi de jeter un oeil sur la formation Angular Entreprise que je propose.
On y abord le framework en profondeur. Cette formation est extrêmement complète et technique, ce qui te donnera un avantage concurrentiel indéniable par rapport à l’autre développeur Angular.
➡️ Formation Angular Entreprise
Tu peux aussi t’inscrire sur mon channel Slack pour y poser tes questions et discuter avec d’autres développeurs: Invitation à rejoindre mon Channel Slack (cette invitation expire le 2 mars 2021).
Et n’hésite pas à me laisser tes commentaires et remarque juste en dessous. C’est pour cela que j’ai activé la fonctionnalité dans mon wordpress 😉
Demande ta version numérique gratuite de mon livre Javascript Array Methods
Bonjour Nicolas, le lien du repo GitHub ne semble pas bon, ça doit être plutôt https://github.com/FazioNico/camera .
Merci pour l’article qui va bien aider pour le développement de mon site mobile.
Bonjour Sab.
Merci pour ta remarque. J’ai testé le lien et il semble fonctionner.
Le repository que tu mentionne est également un exemple que j’ai produit suite à une formation CapacitorJS que j’ai donné à mes étudiants 2021.
Le code est similaire et peut être utilisé comme référence.
Merci d’avoir pris le temps de lire cet article et d’avoir consulter les sources.
Au plaisir de te relire dans les commentaires.
J’aime prendre des photos j’ai eu du mal à adapter mon appareil avec mon navigateur. C’est en lisant cet article que j’ai pu prendre connaissance d’un outil qui peut m’être indispensable et qui peut me permettre de pouvoir réaliser des photos comme bon me semble. Un article très instructif !
Merci Sophie pour ta réponse. Heureux d’avoir pu t’aider.