ESP32 Camera Management

This repository contains two projects for managing ESP32 timelapse cameras:

1. UI Website - A web application for documentation and file management
2. Chrome Extension - A browser extension with the same functionality

Both projects share the same React components and codebase, but build to different targets.

Project Structure

Esp32cam/
├── UI/                    # Website project
│   ├── src/              # React application source
│   ├── dist/             # Website build output
│   └── package.json      # Website dependencies
│
├── chrome-extension/      # Chrome extension project
│   ├── src/              # Extension-specific code
│   ├── dist/             # Extension build output
│   └── package.json      # Extension dependencies
│
└── Api/                   # .NET API (for consuming/intermediater between esp 32 end points and webui)

Quick Start Guide for ESP32 Camera Accessibility

To make your IoT device easily accessible over the internet, follow these steps:

1. Upload the firmware to the ESP32 camera from the .ino file
2. Identify the port on which the device is running
3. Update the .NET API appsettings.json file with the correct base URL:

  "Esp32": {
    "BaseUrl": "http://10.77.203.53"
  }

4. Run the .NET project
5. Test the endpoints via Swagger UI (accessible from the terminal output link)
6. Expose the local endpoints over the internet using one of the following options:
   • Microsoft Dev Tunnel (recommended)
   • Ngrok or alternative tunneling service

Setting Up Microsoft Dev Tunnel (Windows)

For Windows users, refer to the Dev Tunnel Documentation for additional guidance. Follow these steps:

1. Install Dev Tunnel using PowerShell 7+ (use the terminal, not Command Prompt):

winget install --id Microsoft.devtunnel

2. Verify the installation:

devtunnel --version

3. Log in with your Microsoft account:

devtunnel login

4. Start the tunnel (replace 6001 with your .NET API port):

devtunnel host -p 6001 -a

5. After running the command, you will receive two links. Use the first link or the one displaying Swagger UI. Copy this link and use it in your frontend application or our live website.

Note: Use HTTP ports only; HTTPS compatibility has not been tested with Dev Tunnel.

Quick Start

Building the Website

cd UI
npm install
npm run dev      # Development server
npm run build    # Production build

The website will be available at http://localhost:8080 in development mode.

Building the Chrome Extension

# First, ensure UI dependencies are installed
cd UI
npm install

# Then build the extension
cd ../chrome-extension
npm install
npm run build

Running the .NET API

Prerequisites

• .NET SDK (version 6.0 or later) - Download
• ESP32 Camera Device running with firmware and accessible on your network

Configuration

Before running the API, configure the ESP32 base URL in Api/appsettings.json:

{
  "Esp32": {
    "BaseUrl": "http://YOUR_ESP32_IP_ADDRESS"
  }
}

Replace YOUR_ESP32_IP_ADDRESS with the actual IP address of your ESP32 camera device.

Running the API

1. Navigate to the Api directory:

cd Api

2. Restore dependencies:

dotnet restore

3. Run the API in development mode:

dotnet run

The API will start and display the port in the terminal output (typically http://localhost:6001).

Accessing Swagger UI

Once the API is running, open the Swagger UI in your browser:

http://localhost:6001/swagger

From here, you can test all available endpoints and verify connectivity with your ESP32 device.

Deployment

Website

Build output is in UI/dist/ and can be deployed to any static hosting service.

Chrome Extension

Build output is in chrome-extension/dist/ and can be packaged for Chrome Web Store or loaded as an unpacked extension.

Versioning

To create and publish a version tag, use the following commands:

git tag v1.0.0
git push origin v1.0.0