How to Build an Interplanetary Photo Booth

Learn how to integrate a photo booth to IPFS and make your selfie go interplanetary with web3.storage.

During Web Summit 2022, the Filecoin events and creative team set up an amazing exhibition stand at the convention that attracted more than 3500 visitors wanting to learn more about Web3, the InterPlanetary File System (IPFS), and the Filecoin network’s distributed storage solutions.

Filecoin offers a wide range of solutions for storing and persisting files on Web3 via IPFS Protocol. One of the most popular and easy to use is web3.Storage, a “one API call to IPFS and Filecoin” solution for developers.

IPFS is a web protocol that allows sharing files in a peer-to-peer network and sharing data in a distributed computer network. Filecoin created an open-source protocol that enables a storage market to persist files on IPFS for a long time and with little cost. This solution solves the storage problem in Web3 and upgrades the internet as we know it to handle challenges like interplanetary communication.

Interplanetary communication has to include selfies! Learn how to use a lightweight node.js application to make a photo booth software called Sparkbooth to connect to web3.storage and upload your selfie to IPFS.

How does it work?

The main parts of the photo booths are: a digital camera, some lights, a computer with touch screen, some software that controls the camera to take photos and the ability to upload them to IPFS and Filecoin network.

A flow of events looks like this:

1. Touch screen receives commands from user to take a photo

2. Photo Booth software (called Sparkbooth) will talk to the camera to take action

3. Sparkbooth stores the photo locally on the computer

4. Sparkbooth asks user if they want to send to a server (via web3.storage)

5. Sparkbooth sends the photo, username, password, and success message in an API call to *fil-photo-booth-uploader *custom nodejs app

6. fil-photobooth-uploader app will:

   1. validate the username and password

   2. change the format of the photo to what web3.storage accepts

   3. retrieves API token/key from system and send to __web3.__Storage

   4. w__eb3.storage__ sends the photo to the IPFS network and back up on Filecoin

   5. w__eb3.storage__ will return the IPFS Content ID (CID) back to the fil-photo-booth-uploader

   6. fil-photo-booth-uploader will construct the http version of the CID url via web3.storage IPFS gateway

   7. fil-photo-booth-uploader returns a success message back to Sparkbooth 7

7. Sparkbooth receives a success message: “Your photo is sent to IPFS via web3.storage. :-)” along with the URL of the photo

8. Sparkbooth displays the QR code generated on the screen

The look? It’s just like a normal photo booth:

An example of the IPFS CID url:

An example:

The entire flow looks like this:

To learn more about IPFS and CIDs, please visit proto.school.

Step by Step Guide

Prerequisites

There are few things you might need to run through this tutorial:

• 📸 Camera - any modern Canon
• 💻 Computer - any all-in-one desktop with touch screen or a laptop with touch screen
• 👨🏻‍💻 Photo Booth Software - Sparkbooth 7
• 🤖 An app server - I am using Heroku for convenience
• 📦 IPFS Enabled Product - a web3.storage account
• 🌎 Internet connection - a way to talk to WWW either wired or wireless (wifi)\

Step 1, Web3.Storage Setup

1. Create a web3.storage account via your Github account or email

2. Go to Account > API Token

3. Create a new API Token, name it to anything you like (e.g. Filecoin Web Summit 2022)

4. Copy the API key by using the copy button

5. Save this for later You will need to put this in the fil-photo-booth-uploader application as an environment variable

Step 2: nodejs app deployment

For Sparkbooth 7 and web3.storage to talk nicely, we will need a little help to translate their languages. The nodejs app will help us achieve this. It will need to be hosted on a server, and we are using Heroku for it (If you know a Web3 native way to host it, please DM me. I would love to try).

1. First go to github.com (sign up for a new account if you don’t have one)

2. Visit the Filecoin Photo Booth Uploader and then click on Fork. This will allow you to copy the source code to your own account or repository and allow you to connect it to Heroku.

3. Sign up with a Heroku account. Heroku is like AWS, a centralized developer platform that helps run applications or servers almost for free.

4. Create a new app and put the event name in it.

5. We are likely going to need a new app for each event.

6. Under “Deployment method,” choose GitHub and then sign into your GitHub account. Authorize Heroku to pull code into itself to build the application and run the server.

7. Under “Connect to GitHub,” search for the repo name you just forked (ex. fil-photo) then connect the code repository.

8. Leave all the settings and  click on “Deploy Branch” to kick off the first build. Heroku is smart enough to be able to recognize the application type. Next:build and deploy it.

9. However, before the server is working,we will need to put the username, password, and the web3.storage API Token in the server environment. Heroku can access it securely without exposing them to the internet. Go to “Setting” then “Config Vars.”

10. Put in the following configurations, swap out the SPARKBOOTH_PASSWORD, SPARKBOOTH_USER, W3S_API_TOKEN with password, username and web3.storage api token respectively. The name has to be exactly as above.

11. The app should be running now! You can go to “Domains” under “Settings” to find the URL to put into sparkbooth 7 later.

Step 3: Sparkbooth 7 Setup

The final step is to prepare the software on the photo booth laptop to talk to our custom nodejs app to complete the setup flow. \

1. Head to Sparkbooth.com. Download Sparkbooth 7 DSLR, pay for license fee or use the trial.

2. Open Sparkbooth and confirm your purchase.

3. When you open the app, it will maximize, but you can press “ESC” to exit. Go to the settings on top left:

4. Configure “Send to Account” then enter the username and password you would like to use. The “Service URL” needs to be the Heroku app address + “/upload-w3s”. (e.g. http://fil-photo-booth-uploader.herokuapp.com:443/upload-w3s)

5. You can test the connection by using the test button. It will result in a failure message, but the API call will still go through to the Heroku app and place a test photo in your web3.storage account. You can check the test image in your web3.storage account. If you can see the “photo booth test” photo, the setup is successful! Click here to check.

w3up beta coming soon

This app was built in 2022 and uses the existing web3.storage APIs. At the time of this writing, there are new beta w3up APIs available from web3.storage, which include front end web components for multiple frameworks. This will make it even easier to get started writing apps that use IPFS.

Some improvement suggestions

The app is not perfect! There are a few areas that could be improved:

1. Security

Even though this is just a gimmick to show ground, the security of the nodejs app is not ideal. Validating the passwords and username in application logic is not preferred. I believe we should put the application behind a firewall or API gateway that validates the authorization in the header before passing the call to our app.

2. Experience

The Sparkbooth 7 is great, but the UI does seem quite limiting. It would be good if we could customize this a bit more. Perhaps an open-source photo booth software could help us achieve this?

3. Recent Photo Gallery

Potentially, we could use a separate computer to show the latest photos to visitors. They could select the photo they would like to choose to email to themselves, display QR code again, or share it on social media. This will involve building a frontend for the fil-photo-booth-uploader, which could be a very cool project for a front-end developer.

4. Use an decentralised app backend. Maybe someone like Fluence or IPVM is able to help.

Conclusion

During the three-day Web Summit, the Filecoin photo booth had an uptime of 99% and a1% outage due to the internet connectivity issues at the convention. In total, the photo booth published 934 photos to the Filecoin Network. That’s almost one thousand selfies that are ready to go interplanetary all thanks to the very handy service of web3.storage!

The photo booth is also famous. On the third day, a reporter from CNN also interviewed the booth, (yes, the booth is getting famous… not me).

CNN reporter interviewing the Filecoin Photo Booth at Web Summit, Lisbon, Portugal

Please feel free to use this guide to build your own interplanetary photo booth for your events, gatherings, meetups, parties or just for fun.

The Filecoin network now has 16EiB of storage capacity and over 300PiB of data has been stored on it. There are many ways to contribute or use this project. Learn more about getting involved here.