Partage collaboratif de Photos HTML5/DropBox

Cet article fait suite à une question que j’avais posé sur Google+/Twitter Vendredi:

Il existe des tonnes d’applis pour partager en live les photos d’un événement sur Android ou iOS. G+ le fait aussi très bien. Dans Appload ils ont parlé de l’appli Cluster.

Je me demandais si il existait une solution HTML5 beaucoup plus simple avec le workflow suivant:

  1. Je scan un QRCode
  2. J’arrive sur une appli HTML5 utilisant les UserMedia
  3. Toutes les photos que je prends avec cette appli/page sont magiquement uploadées sur une DropBox.

L’idée est de virer

  • La nécessité d’avoir un compte, une app
  • La bataille avec l’ergonomie de G+
  • La bataille avec les menus DropBox sous iOS

En gros c’est une application éphémère pour un événement. Un truc que Mme Michu peut comprendre !

Et du coup j’ai décidé de le coder vite fait pour voir …

Application HTML5

Sur la partie HTML je me suis rendu compte qu’on pouvait enfin capturer simplement une photo depuis un formulaire:

Ca marche parfaitement sous Android / iOS ! En cliquant, l’utilisateur arrive sur l’appareil photo, prends une photo, puis la valide.

Ensuite, l’événement onChange permet la soumission automatique du formulaire.

DropNodeCam

Enfin, il suffit de maquiller l’application en changeant l'opacité du widget pour donner l’impression de cliquer sur un gros bouton.

Serveur Web: NodeJS

Deuxième étape: le serveur web ! Pour cette étape j’ai mis en place un petit serveur NodeJS sur Gandi:

gandi

J’ai développé l’application sous Eclipse en local. J’ai ensuite pu déposer l’archive sans passer par Git.

L’upload multipart est très bien géré par ExpressJS ce qui permet ensuite de passer à l’étape DropBox.

Hébergement sur DropBox

L’objectif est d’héberger toutes les photos dans un dossier DropBox. Pour cette étape il faut créer une application donnant accès à l’API.

dropbox

Authentification OAuth2

La mécanique est très moche, il faut jongler !

Mais en suivant la doc de DropBox on s’en sort …

Upload en ligne

Il suffit ensuite d’envoyer sur DropBox le fichier uploadé :

Bon je ne mets pas tout le code, il faut penser à bien nommer / nettoyer les fichiers.

Galeries et QRCode

Fonctionnellement je veux pouvoir créer une galerie en ajoutant un dossier dans ma DropBox. Côté NodeJS il suffit de tester la présence du dossier.

DropBox permet ensuite de partager ce dossier sous la forme d’une galerie photo. Il suffit de rajouter le lien dans l’interface web. Pour cela je lis un fichier index.html dans le dossier.

Lors de l’événement, il suffit de partager la page HTML5 aux invités via un QRCode généré à partir de goo.gl. L’URL étant http://{instance.gandi}/upload/{dossier.dropbox}.

Et hop en un touch les photos sont partagées !

Amélioration

Il y aurait plusieurs améliorations possibles:

  • Gérer l’upload offline
  • Générer automatiquement le liens goo.gl
  • Automatiser le partage de dossier
  • Virer la barre d’adresse du navigateur

>> Source Gandi <<

4 pensées sur “Partage collaboratif de Photos HTML5/DropBox

  • 27 décembre 2013 à 15 h 27 min
    Permalink

    Merci Jean-Philippe pour cette superbe idée !! J’aimerai pouvoir la mettre en place cet été dans le cadre d’un festival de musique actuelle. L’idée étant de pouvoir permettre à tous les festivaliers de prendre des photos qui seront partagées sur dropbox et diffuser en diaporama sur le site du festival ! Je vais donc m’y mettre d’ici peu !!

    Merci encore 😉

    Répondre
  • 27 décembre 2013 à 16 h 25 min
    Permalink

    @TChay mon objectif était de proposer le service dans le cadre de soirée privée. Dans le cadre d’un festival tu peux faire un événement G+ et partager les photos via l’appli de Google.

    Un point bloquant sur lequel je ne me suis pas penché est le offline. Lors d’un festival on perds souvent le réseau donc ce serait top d’avoir un upload « intelligent » mais a ma connaissance c’est compliqué en HTML5.

    Sinon attention au prix de la bande passante si tu l’héberges sur un serveur SaaS.

    Répondre
  • 10 janvier 2014 à 11 h 20 min
    Permalink

    Hello,
    Je suis en train de réaliser la même chose pour une soirée privée. Le serveur est hébergé sur un raspberry, les gens se connecte en adhoc dessus pour uploader les images. Les photos sont directement affiché en diaporama sur un écran. Est ce que tu a avancé dans ton projet ?

    Répondre
  • 10 janvier 2014 à 15 h 41 min
    Permalink

    J’ai juste mis en ligne les sources rien de plus. Pas trop compliqué la connexion AdHoc pour les gens ? et la portée du signal ?

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *