Aller au contenu principal
~/GiwiSoft
A79n2oa79n2oa79n

Photobooth : créez votre propre cabine photo web

Giwi 4 min de lecture Web, JavaScript, Réalisations, OpenSource

Photobooth est une application web open source qui transforme votre navigateur en véritable cabine photo. Simple, légère et entièrement personnalisable.

Fonctionnalités principales

  • Capture directement depuis votre webcam avec un retour vidéo en temps réel
  • Superposition de fonds PNG (ou JPG, WebP, SVG), vos overlays s’affichent en direct sur le flux vidéo
  • Mode miroir activé par défaut pour une expérience selfie naturelle
  • Mode photo strip : capturer 4 shots en séquence, assemblés en grille 2×2
  • Compteur à rebours personnalisable : 3s, 5s ou 10s avant chaque capture
  • Sélecteur de caméra : choisissez votre webcam parmi celles détectées
  • Watermark personnalisable affiché en bas de chaque photo
  • Taille de sortie optimisée pour l’impression : 10×15 cm paysage (1800×1200 px à 300 DPI)
  • Impression via CUPS (Linux) sur papier photo 4×6in glossy, un clic sur “Imprimer” et c’est envoyé
  • Raccourcis clavier configurables : personnalisez les touches via config.json
  • Manette de jeu : naviguez entre les fonds et déclenchez les actions avec une manette
  • Internationalisation : anglais, français, allemand, espagnol (paramètre lang dans config.json)
  • Notifications toast : retours visuels pour sauvegarde/impression et connexions d’appareils
  • Aide intégrée : popup de référence des raccourcis clavier accessible depuis la barre de paramètres

Comment ça marche ?

L’application utilise l’API Canvas 2D pour combiner le flux webcam avec les fonds sélectionnés. Les fonds sont redimensionnés pour tenir dans le canvas tout en préservant leur ratio d’aspect. Le serveur Express (Node.js + TypeScript) sert le tout sans étape de build, tsx gère l’exécution directe.

npm install
npm start
# Ouvrez http://localhost:3000

Ou utilisez le script ./start.sh qui lance le serveur et ouvre un navigateur en plein écran.

Personnalisation des fonds

Placez vos images dans le dossier backgrounds/, elles apparaissent automatiquement dans l’interface. Vous pouvez définir la position de chaque fond via config.json :

{
"lang": "fr",
"watermark": "© 2026 My Photobooth",
"backgrounds": {
"beach.png": { "position": "bottom right" },
"frame.png": { "position": "50% 25%" }
}
}

Format de position : [y] [x]top, bottom, left, right, ou un pourcentage. Sans position, les fonds sont centrés.

Raccourcis clavier configurables

Les raccourcis sont personnalisables dans config.json :

{
"keys": {
"capture": " ",
"save": "s",
"print": "Enter",
"cancel": "Escape",
"prevBg": "ArrowLeft",
"nextBg": "ArrowRight",
"mirror": "m",
"strip": "t"
}
}

Une popup d’aide accessible depuis la barre de paramètres affiche la liste des raccourcis.

Manette de jeu

Connectez une manette pour contrôler le photobooth. Les boutons et axes sont configurables :

{
"gamepad": {
"capture": 0,
"save": 2,
"print": 3,
"cancel": 1,
"prevBg": 14,
"nextBg": 15,
"mirror": 8,
"strip": 9,
"prevBgAxis": { "axis": 0, "dir": -1 },
"nextBgAxis": { "axis": 0, "dir": 1 }
}
}

Les valeurs sont un index de bouton (nombre) ou un lien d’axe ({ "axis": N, "dir": -1|1 }).

Internationalisation

Définissez la langue dans config.json :

{ "lang": "fr" }

Langues supportées : en (défaut), fr, de, es. Les fichiers de traduction sont dans le dossier i18n/.

Installation sur un Raspberry Pi

Le Raspberry Pi est l’usage parfait pour une cabine photo : compact, pas cher, branché à un écran tactile.

Prérequis

  • Raspberry Pi (3B+ ou supérieur recommandé) avec Raspberry Pi OS
  • Webcam USB (ou caméra officielle Raspberry Pi)
  • Écran (tactile si possible)

Étapes

1. Installer Node.js

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs

Vérifiez :

node -v  # v22.x
npm -v

2. Cloner et installer le projet

git clone https://github.com/Giwi/photobooth.git
cd photobooth
npm install

3. Lancer l’application

npm start

Ouvrez http://localhost:3000 depuis un navigateur sur le Pi.

Pour un lancement en plein écran automatique, utilisez le script fourni :

./start.sh

Le script inclut les flags --no-sandbox et --disable-gpu pour la compatibilité Chromium sur Raspberry Pi.

4. (Optionnel) Configurer l’impression via CUPS

sudo apt install -y cups
sudo usermod -aG lpadmin $USER

Puis définissez votre imprimante par défaut via l’interface web CUPS (http://localhost:631) ou en ligne de commande :

lpstat -p              # liste les imprimantes
lpoptions -d <printer> # définit l'imprimante par défaut

5. (Optionnel) Démarrage automatique au boot

Créez un service systemd :

sudo tee /etc/systemd/system/photobooth.service > /dev/null <<EOF
[Unit]
Description=Photobooth
After=network.target

[Service]
ExecStart=/usr/bin/node /home/pi/photobooth/src/server.ts
WorkingDirectory=/home/pi/photobooth
Restart=always
User=pi

[Install]
WantedBy=multi-user.target
EOF

sudo systemctl enable photobooth
sudo systemctl start photobooth

Note : Si vous utilisez tsx pour lancer le serveur, adaptez ExecStart en conséquence (/usr/bin/npx tsx src/server.ts).

6. (Optionnel) Écran non tactile avec clavier

Si votre écran n’est pas tactile, tout se fait au clavier (raccourcis configurables) :

Touche Action
Espace Capturer
S Sauvegarder
Entrée Sauvegarder et imprimer
Échap Annuler
Naviguer entre les fonds
M Activer/désactiver le miroir
T Activer/désactiver le mode photo strip

L’interface reste 100% utilisable sans tactile — le bouton de capture est juste un raccourci clavier.

Conclusion

Photobooth est le genre de projet parfait pour un événement, un mariage, ou simplement pour s’amuser. Pas de dépendances lourdes, pas de build complexe, juste Node.js, un navigateur, et une webcam.

Voir le projet sur GitHub