ESP32-CAM: Display Pictures in Firebase Web App

In this guide, you’ll create a Firebase Web App to display the last picture taken with an ESP32-CAM saved in the Firebase Storage. The Web App also shows the date and time that the last photo was taken. The web app is freely hosted on Firebase servers, and you can access it from anywhere.

Updated July 2, 2025.

This article is Part 2 of this previous tutorial: ESP32-CAM Save Picture in Firebase Storage. Follow that tutorial first before proceeding.

Project Overview

In this tutorial (Part 2), you’ll create a web app to display the last picture taken with the ESP32-CAM and saved in the Firebase Storage (see this previous tutorial).

The following diagram shows a high-level overview of the project we’ll build—programming the ESP32-CAM and setting up the Firebase Project with Storage was done in Part 1.

• Firebase hosts your web app over a global CDN using Firebase Hosting and provides an SSL certificate. You can access your web app from anywhere using the Firebase-generated domain name.
• The web application displays the last picture saved on Firebase Storage in the data/photo.jpg path.
• It also displays info about when the picture was taken (date and time).
• If the web page is open, and meanwhile, there’s a new picture, you need to press the Refresh button, so that it gets the new picture from the storage path.
• Later, you can update the web app to do this automatically. For example, you can save the time the last picture was taken to Firebase Realtime Database (RTDB). You can then, detect changes on the database, and refresh the web page as needed to display the last picture (we may cover this in a future, more advanced tutorial).

Prerequisites

Before you start creating the Firebase Web App, you need to check the following prerequisites.

Creating a Firebase Project

You should have followed the following tutorial first:

• ESP32-CAM Save Picture in Firebase Storage

The ESP32-CAM must be running the code provided in that tutorial so that there’s a picture saved in Firebase Storage. The Firebase Storage must be set up as shown in the tutorial.

Installing Required Software

Before getting started, you need to install the required software to create the Firebase Web App. Here’s a list of the software you need to install (click on the links for instructions):

• Visual Studio Code
• Node.JS LTS version
• Install Firebase Tools

---

1) Add an App to Your Firebase Project

1) Go to your Firebase project Console and add an app to the project you created in the previous tutorial by clicking on the +Add app button.

2) Select the web app icon.

3) Give your app a name. Then, check the box next to √ Also set up Firebase Hosting for this App. Click Register app.

4) Then, copy the firebaseConfig object and save it because you’ll need it later.

After this, you can also access the firebaseConfig object if you go to your Project settings in your Firebase console.

5) Click Next on the proceeding steps, and finally on Continue to console.

---

2) Setting Up a Firebase Web App Project (VS Code)

Follow the next steps to create a Firebase Web App Project using VS Code.

1) Creating a Project Folder

1) Create a folder on your computer to save your Firebase project—for example, Firebase-Project on the Desktop.

2) Open VS Code. Go to File > Open Folder… and select the folder you’ve just created.

3) Go to Terminal > New Terminal. A new Terminal window should open on your project path.

2) Firebase Login

4) On the previous Terminal window, type the following:

firebase login

5) You’ll be asked to collect CLI usage and error reporting information. Enter “n” and press Enter to deny.

Note: If you are already logged in, it will show a message saying: “Already logged in as [email protected]”.

6) After this, it will pop up a new window on your browser to login into your Firebase account.

7) Allow Firebase CLI to access your Google account.

8) After this, Firebase CLI login should be successful. You can close the browser window.

3) Initializing Web App Firebase Project

9) After successfully login in, run the following command to start a Firebase project directory in the current folder.

firebase init

10) You’ll be asked if you want to initialize a Firebase project in the current directory. Enter Y and hit Enter.

11) Then, use up and down arrows and the Space key to select the options. Select the following options:

• Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
• Storage: Configure a security rules file for Cloud Storage

The selected options will show up with a green asterisk. Then, hit Enter.

12) Select the option “Use an existing project”—it should be the project created in Part 1 of this tutorial—then hit Enter.

13) Then, select the hosting options as shown below:

• What do you want to use as your public directory? Hit Enter to select public.
• Configure as a single-page app (rewrite urls to /index.html)? No
• Set up automatic builds and deploys with GitHub? No

14) Then, press Enter on the following question to select the default file for storage rules.

• What file should be used for Storage Rules?(storage.rules). Hit Enter.

15) The Firebase project should now be initialized successfully. Notice that VS code created some essential files under your project folder.

The index.html file contains some HTML text to build a web page. For now, leave the default HTML text. The idea is to replace that with your own HTML text to create a custom web page for your needs. We’ll do that later in this tutorial.

16) To check if everything went as expected, run the following command on the VS Code Terminal window.

firebase deploy

It will ask you if you want to set a new role. Hit Enter to accept.

You should get a Deploy complete! message and an URL to the Project Console and the Hosting URL.

17) Copy the hosting URL and paste it into a web browser window. You should see the following web page. You can access that web page from anywhere in the world.

The web page you’ve seen previously is built with the HTML file placed in the public folder of your Firebase project. By changing the content of that file, you can create your own web app. That’s what we’re going to do in the next section.

---

3) Creating the Firebase Web App

Now that you’ve created a Firebase project app successfully on VS Code, follow the next steps to customize the app to display the picture saved on Firebase Storage.

index.html

Copy the following to your index.html file. This HTML file creates a simple web page that displays the last picture saved on the Firebase Storage and the time it was taken (created in this previous project).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP Firebase App</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="module" src="app.js"></script>
</head>
<body>
    <div class="topnav">
        <h1>ESP32-CAM Web App <i class="fas fa-camera"></i></h1>
    </div>
    <p><img id="img" width="500px"></p> 
    <p>Last picture taken: <span id="date-time"></span></p>
    <button type="button" id="refreshBtn">Refresh</button>
</body>
</html>

View raw code

You need to modify the code with your own firebaseConfig object—the one you’ve got in this step.

How it Works

Let’s take a quick look at the HTML file, or skip to the next section.

In the <head> of the HTML file, we must add all the required metadata.

The web page’s title is ESP Firebase App, but you can change it in the following line.

<title>ESP Firebase App</title>

The following line allows us to use fontawesome icons:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Reference an external style.css file to format the HTML page.

<link rel="stylesheet" type="text/css" href="style.css">

Load the app.js JavaScript file

<script type="module" src="app.js"></script>

This line tells the browser to load and execute the JavaScript file app.js located in the same directory as the index.html file—we’ll create that file next.

We’re done with the metadata. Now, let’s go to the HTML parts that are visible to the user—go between the <body> and </body> tags.

We create a top “navigation” bar with the name of our app and a small icon from fontawesome.

<div class="topnav">
  <h1>ESP32-CAM Web App <i class="fas fa-camera"></i></h1>
</div>

The following line creates a paragraph with an image tag where we’ll display the picture later on. The image tag has a specific id (“img“) so that we can refer to that element in the JavaScript file by its id.

<p><img id="img" width="500px"></p>

Next, we create a paragraph to display the date and time that the picture was taken. There is a <span> tag with the date-time id where we’ll display that information later on.

<p>Last picture taken: <span id="date-time"></span></p>

Finally, there’s a button to refresh the web page (to display a new picture, if that’s the case).

<button onclick="window.location.reload();">Refresh</button>

Save the HTML file.

style.css

Inside the public folder, create a file called style.css. To create the file, select the public folder, and then click on the +file icon at the top of the File Explorer. Call it style.css.

Then, copy the following to the style.css file.

html {
    font-family: Arial, Helvetica, sans-serif; 
    display: inline-block; 
    text-align: center;
  }
  h1 {
    font-size: 1.8rem; 
    color: white;
  }
  p { 
    font-size: 1.2rem;
  }
  .topnav { 
    overflow: hidden; 
    background-color: #0A1128;
  }
  body {  
    margin: 0;
  }
  button{
    background-color: #034078;
    border: none;
    padding: 14px 20px;
    text-align: center;
    font-size: 20px;
    border-radius: 4px;
    transition-duration: 0.4s;
    width: 150px;
    color: white;
    cursor: pointer;
  }

View raw code

The CSS file includes some simple styles to make our webpage look better. We won’t discuss how CSS works in this tutorial.

JavaScript File

Create a new file inside the public folder called app.js.

The following image shows how your web app project folder structure should look.

app.js

Copy the following to the app.js file you created previously.

import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js';
import { getAuth, signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js';
import { getStorage, ref, getDownloadURL, getMetadata } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-storage.js';

// Firebase configuration
const firebaseConfig = {
  apiKey: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  authDomain: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  databaseURL: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  projectId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  storageBucket: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  messagingSenderId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  appId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION"
};

const email = 'AUTHORIZED_USER_EMAIL'; // Replace with your user email
const password = 'PASSWORD'; // Replace with your user password

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const storage = getStorage(app);

// Format date and time
const formatDateTime = (date) => {
  const pad = (num) => String(num).padStart(2, '0');
  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())} at ${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
};

// Authenticate user
const authenticate = async () => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    return userCredential.user;
  } catch (error) {
    document.getElementById('date-time').textContent = `Authentication error: ${error.message}`;
    throw error;
  }
};

// Load image and metadata
const loadImageData = async (user) => {
  try {
    const storageRef = ref(storage, 'data/photo.jp');
    const url = await getDownloadURL(storageRef);
    document.querySelector('#img').src = url;

    const metadata = await getMetadata(storageRef);
    document.getElementById('date-time').textContent = formatDateTime(new Date(metadata.timeCreated));
  } catch (error) {
    document.getElementById('date-time').textContent = `Error: ${error.message}`;
  }
};

// Initialize on page load
document.addEventListener('DOMContentLoaded', async () => {
  const user = await authenticate();
  await loadImageData(user);

  document.querySelector('#refreshBtn').addEventListener('click', async () => {
    const user = await authenticate();
    await loadImageData(user);
  });
});

View raw code

This file gets the picture saved on the Firebase Storage and the time it was taken, and displays that on the HTML page.

Firebase Modules

First, we load the necessary Firebase modules we’ll use.

import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js';
import { getAuth, signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js';
import { getStorage, ref, getDownloadURL, getMetadata } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-storage.js';

Firebase Configuration Object

Then, add your Firebase configuration object for this project. The one you’ve got in previous steps in this tutorial.

const firebaseConfig = {
  apiKey: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  authDomain: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  databaseURL: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  projectId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  storageBucket: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  messagingSenderId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
  appId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION"
};

User Email and Password

Insert the authorized user email and password. You should have set this up in part 1 of this tutorial.

const email = 'AUTHORIZED_USER_EMAIL'; // Replace with your user email
const password = 'PASSWORD'; // Replace with your user password

Initialize the Firebase App

The following lines initialize the Firebase App.

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const storage = getStorage(app);

Format Data and Time

The following lines format data and time to be displayed on the web page in a specified format. For example: 11:05:11 at 2025-07-02.

// Format date and time
const formatDateTime = (date) => {
  const pad = (num) => String(num).padStart(2, '0');
  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())} at ${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
};

Authentication

The following function will authenticate with the user and password we defined previously.

// Authenticate user
const authenticate = async () => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    return userCredential.user;
  } catch (error) {
    document.getElementById('date-time').textContent = `Authentication error: ${error.message}`;
    throw error;
  }
};

Load the Image and Metadata

The loadImageData function will get the image from Firebase storage and place it in the right place in the web page.

const loadImageData = async (user) => {
  try {
    const storageRef = ref(storage, 'data/photo.jp');
    const url = await getDownloadURL(storageRef);
    document.querySelector('#img').src = url;

This is the specific line that gets a reference to the image:

const storageRef = ref(storage, 'data/photo.jp');

Note: in my case, at the moment, there’s some sort of bug that truncates the name of the picture to data/photo.jp instead of data/photo.jpg. Adjust the name of the picture, if that’s not the case for you.

We can get the time the image was taken from its metadata. The following lines get the date and time the picture was taken and place them in the right place in the web page.

const metadata = await getMetadata(storageRef);
document.getElementById('date-time').textContent = formatDateTime(new Date(metadata.timeCreated));
} catch (error) {
  document.getElementById('date-time').textContent = `Error: ${error.message}`;
}

Initialize App on Page Load

The following lines will run every time you open or refresh the webpage.

// Initialize on page load
document.addEventListener('DOMContentLoaded', async () => {
  const user = await authenticate();
  await loadImageData(user);

  document.querySelector('#refreshBtn').addEventListener('click', async () => {
    const user = await authenticate();
    await loadImageData(user);
  });
});

When that happens, we authenticate with the user and password.

const user = await authenticate();

Then, we load the image.

await loadImageData(user);

We also add an event listener to the Refresh Button. When we click that button, it will authenticate with the user and password and also load the image.

document.querySelector('#refreshBtn').addEventListener('click', async () => {
  const user = await authenticate();
  await loadImageData(user);
});

Storage Rules

At the left sidebar of your Firebase Project, you should have a file called storage.rules.

Open that file and copy the following rules. These rules allow any authenticated user to read and write to Firebase Storage. Save the file.

rules_version = '2';

// Craft rules based on data in your Firestore database
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Deploy your App

After saving the HTML and JavaScript files, deploy your app on VS Code by running the following command.

firebase deploy

Firebase offers a free hosting service to serve your assets and web apps. Then, you can access your web app from anywhere.

The Terminal should display something as follows:

You can use the Hosting URL provided to access your web app from anywhere.

Demonstration

Congratulations! You successfully deployed your app. It is now hosted on a global CDN using Firebase hosting. You can access your web app from anywhere on the Hosting URL provided. In my case, it is https://esp-firebase-demo.web.app.

The web app is responsive, and you can access it using your smartphone, computer, or tablet.

Reset your ESP32-CAM board, and it should take a new picture when it first starts. Then, click on the web app Refresh button so that it retrieves the latest picture taken.

Wrapping Up

In this tutorial, you learned how to create a Firebase Web App that interacts with Firebase Storage to display the last image taken with the ESP32-CAM.

You can apply what you learned here to display any other type of file (not just jpeg), and you can change the files in the public folder to add different functionalities and features to your project. For example, add an authentication form, display multiple pictures, etc.

If you want to learn more about Firebase, we recommend taking a look at our new eBook:

• Firebase Web App with ESP32 and ESP8266

We have other resources related to ESP32 and ESP8266 that you may like:

• Learn ESP32 with Arduino IDE
• Home Automation using ESP8266
• Build Web Servers with ESP32 and ESP8266

Thanks for reading.