Text Overlays: Add Timestamps, Branding & Live Data

Add professional text overlays to your webcam images — timestamps, branding, live weather data, sensor readings, and more. Text is burned into images and appears in time-lapse videos.

Overview

Text overlays let you add information directly onto your webcam images:

Text overlay types
Overlay Type Example Use Case
Static text “Mountain View Resort” Branding, location name
Timestamp “2025-01-15 14:30:25” Date/time documentation
Dynamic text “Temperature: 23°C” Live sensor data, weather
URL-fetched Data from external source Weather APIs, custom systems

Accessing Overlay Settings

  1. Log in to webcam.io Dashboard
  2. Go to Webcams → Select your camera → Edit
  3. Scroll to Text Overlays section
  4. Configure your overlays
  5. Click Image Preview to test
  6. Save when satisfied

Static Text Overlays

Add fixed text that appears on every image — perfect for branding and identification.

Adding Static Text

  1. In Text Overlays section, find the text input field
  2. Enter your text: Mountain View Resort
  3. Configure position, font size, and color
  4. Preview and save

Configuration Options

Overlay configuration options
Setting Options Description
Position Top-left, Top-right, Bottom-left, Bottom-right Corner placement
Font size Small, Medium, Large Text size
Text color Color picker Font color
Background None, Semi-transparent, Solid Background behind text

Best Practices for Static Text

  • Keep text short (fits on one line)
  • Place in corner that won’t obstruct the main view
  • Include your website URL for branding

Example static overlays:

Mountain View Resort - www.mountainview.com
Construction Site #42 - Phase 2
Ski Resort Webcam - Elevation 2,400m

Timestamp Overlay

Add the capture date and time to every image — essential for documentation and time-lapse videos.

Adding a Timestamp

Use the {timestamp} variable in your text field:

{timestamp}

This displays the capture time in your webcam’s configured timezone.

Timestamp Formats

The default format shows full date and time. For custom formatting, combine with static text:

Captured: {timestamp}

Output: Captured: 2025-01-15 14:30:25

Dynamic Text Overlays

Display changing information on your images — weather data, sensor readings, or any custom text that updates automatically.

Two Methods for Dynamic Text

  1. API Push — You send data to webcam.io (best for sensors, custom systems)
  2. URL Fetch — webcam.io pulls data from a URL (best for weather services)

Method 1: API Push (Recommended)

Send data to webcam.io via API, and it appears on the next captured image.

Step 1: Add Variables to Overlay

In your text overlay field, use these variables:

{dynamic_text1}
{dynamic_text2}
{dynamic_text3}

Example configuration:

Temperature: {dynamic_text1} | Humidity: {dynamic_text2}

Step 2: Update via API

Send data using the webcam.io API:

curl -X PUT "https://webcam.io/api/webcams/WEBCAM-ID" \
  -H "Content-Type: application/json" \
  -H "X-Auth-Email: your@email.com" \
  -H "X-Auth-Key: YOUR-API-KEY" \
  -d '{
    "dynamic_text1": "23°C",
    "dynamic_text2": "65%"
  }'

Result on image: Temperature: 23°C | Humidity: 65%

Getting Your API Credentials

API credential locations
Credential Where to Find
API Key Dashboard → Profile → API Key (click “Create” if none exists)
Webcam ID Dashboard → Webcams list

Code Examples

#!/bin/bash
# Update overlay with weather data

API_EMAIL="your@email.com"
API_KEY="your-api-key"
WEBCAM_ID="m7g61z"

# Get weather (example using wttr.in)
TEMP=$(curl -s "wttr.in/Berlin?format=%t")
HUMIDITY=$(curl -s "wttr.in/Berlin?format=%h")

# Update webcam
curl -X PUT "https://webcam.io/api/webcams/$WEBCAM_ID" \
  -H "Content-Type: application/json" \
  -H "X-Auth-Email: $API_EMAIL" \
  -H "X-Auth-Key: $API_KEY" \
  -d "{\"dynamic_text1\": \"$TEMP\", \"dynamic_text2\": \"$HUMIDITY\"}"
import requests

API_EMAIL = "your@email.com"
API_KEY = "your-api-key"
WEBCAM_ID = "m7g61z"

def update_overlay(text1, text2=None, text3=None):
    data = {"dynamic_text1": text1}
    if text2: data["dynamic_text2"] = text2
    if text3: data["dynamic_text3"] = text3
    
    response = requests.put(
        f"https://webcam.io/api/webcams/{WEBCAM_ID}",
        headers={
            "Content-Type": "application/json",
            "X-Auth-Email": API_EMAIL,
            "X-Auth-Key": API_KEY
        },
        json=data
    )
    return response.json()

# Example: Update with temperature
update_overlay("23°C", "65% humidity")
const API_EMAIL = 'your@email.com';
const API_KEY = 'your-api-key';
const WEBCAM_ID = 'm7g61z';

async function updateOverlay(text1, text2 = null, text3 = null) {
  const data = { dynamic_text1: text1 };
  if (text2) data.dynamic_text2 = text2;
  if (text3) data.dynamic_text3 = text3;

  const response = await fetch(
    `https://webcam.io/api/webcams/${WEBCAM_ID}`,
    {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-Auth-Email': API_EMAIL,
        'X-Auth-Key': API_KEY
      },
      body: JSON.stringify(data)
    }
  );
  return response.json();
}

// Example usage
updateOverlay('23°C', '65% humidity');
<?php
$api_email = 'your@email.com';
$api_key = 'your-api-key';
$webcam_id = 'm7g61z';

function updateOverlay($text1, $text2 = null, $text3 = null) {
    global $api_email, $api_key, $webcam_id;
    
    $data = ['dynamic_text1' => $text1];
    if ($text2) $data['dynamic_text2'] = $text2;
    if ($text3) $data['dynamic_text3'] = $text3;
    
    $ch = curl_init("https://webcam.io/api/webcams/$webcam_id");
    curl_setopt_array($ch, [
        CURLOPT_CUSTOMREQUEST => 'PUT',
        CURLOPT_POSTFIELDS => json_encode($data),
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_HTTPHEADER => [
            'Content-Type: application/json',
            "X-Auth-Email: $api_email",
            "X-Auth-Key: $api_key"
        ]
    ]);
    
    $response = curl_exec($ch);
    curl_close($ch);
    return json_decode($response, true);
}

// Example usage
updateOverlay('23°C', '65% humidity');
?>

Scheduling Updates

Use cron (Linux/Mac) or Task Scheduler (Windows) to update regularly:

# Update every 10 minutes
*/10 * * * * /path/to/update-overlay.sh

See: API Reference for complete documentation

Method 2: URL Fetch

webcam.io can fetch text from a URL and display it as an overlay.

Setup

Use this variable format in your overlay:

{url:http://your-server.com/data.txt}

Requirements

URL fetch requirements
Requirement Details
Format Plain text only (no HTML)
Length Maximum 240 characters
Speed Must respond within 6 seconds
Availability URL must be publicly accessible

Example: Simple Weather File

Server file (weather.txt):

Temp: 23°C | Wind: 12 km/h NE

Overlay configuration:

{url:http://your-server.com/weather.txt}

Example: PHP Weather Script

<?php
// weather.php - Returns current weather as plain text
header('Content-Type: text/plain');

// Your weather logic here
$temp = "23°C";
$humidity = "65%";

echo "Temp: $temp | Humidity: $humidity";
?>

Overlay configuration:

{url:http://your-server.com/weather.php}
URL Fetch Limitations
  • HTML tags are stripped (may cause strange results)
  • 6-second timeout — slow servers will fail
  • Fetched once per image capture
  • Errors result in empty text (no error shown)

Weather Data as a Text URL via Cloudflare Worker

If you only have a JSON data URL from your weatherstation, you can use this method to transform JSON to TXT as required above by setting up a Cloudflare Worker.

The worker fetches live data on every request – always up to date, no manual updates needed. The free Cloudflare plan allows 100,000 requests per day, which is more than enough.

This is only an example and needs adjustments and basic scripting knowledge.

What you need

  • A Cloudflare account (free plan is sufficient)
  • The JSON URL of your weather station

Step 1: Create a Worker

  1. Go to dash.cloudflare.com and log in
  2. Click Workers & Pages in the left menu
  3. Click Create → Create Worker
  4. Give the worker a name, e.g. weather-text
  5. Click Deploy

Step 2: Insert the code

  1. Click Edit Code
  2. Delete all existing code
  3. Paste the following code:
export default {
  async fetch(request) {
    const JSON_URL = "https://YOUR-WEATHER-STATION-URL/api/json"; // ← replace this

    const response = await fetch(JSON_URL);
    const d = await response.json();

    const text = [
      `Temperature: ${d.temperature.current}°C (min ${d.temperature.min}°C / max ${d.temperature.max}°C)`,
      `Humidity: ${d.humidity.current}%`,
      `Wind: ${d.wind.current} km/h from ${d.wind.currdir}, gusts ${d.wind.currgust} km/h`,
      `Rain today: ${d.rain.today ?? "0"} mm`,
    ].join("\n");

    return new Response(text, {
      headers: { "Content-Type": "text/plain; charset=utf-8" },
    });
  },
};
  1. Replace https://YOUR-WEATHER-STATION-URL/api/json with the actual URL
  2. Click Deploy in the top right corner

Step 3: Test it

  • Your worker is now available at a URL like: https://weather-text.YOUR-NAME.workers.dev
  • Open that URL in your browser – you will see the output:
Temperature: 20.0°C (min 10.3°C / max 20.8°C)
Humidity: 44%
Wind: 3.2 km/h from SW, gusts 9.7 km/h
Rain today: 0 mm

Use Cases & Examples

Weather Station

Display live weather data from a sensor:

Overlay config:

{dynamic_text1} | {dynamic_text2}
Wind: {dynamic_text3}

API update (every 5 min):

curl -X PUT "https://webcam.io/advanced/api/webcams/ID" \
  -d '{"dynamic_text1":"18°C","dynamic_text2":"72%","dynamic_text3":"SW 15km/h"}'

Result: 18°C | 72% / Wind: SW 15km/h

Construction Progress

Show project phase and date:

Construction Site A - Phase 2
{timestamp}
Day 127 of 365

Ski Resort

Display snow and lift status:

{dynamic_text1}
Lifts: {dynamic_text2}
{timestamp}

Update via API:

{
  "dynamic_text1": "Snow: 85cm | Fresh: 15cm",
  "dynamic_text2": "8/12 open"
}

Hotel/Resort

Simple branding with timestamp:

Grand Mountain Hotel
www.grandmountain.com
{timestamp}

Troubleshooting

Text not appearing

  1. Check preview — Click “Image Preview” to test
  2. Save settings — Changes only apply after saving
  3. Wait for next image — Dynamic text appears on the next capture

Dynamic text showing nothing

  • API call hasn’t been made yet
  • Check API credentials
  • Verify webcam ID

URL fetch returning empty

  • Check URL is accessible publicly
  • Verify response is plain text (not HTML)
  • Ensure response time < 6 seconds
  • Test URL directly in browser

Text hard to read

  • Increase font size
  • Add background to text
  • Reposition to less busy area of image

Variable Reference

Complete variable reference
Variable Description Update Method
{timestamp} Capture date/time Automatic
{dynamic_text1} Custom text line 1 API
{dynamic_text2} Custom text line 2 API
{dynamic_text3} Custom text line 3 API
{url:http://...} Text from URL URL fetch

Next Steps

Back to top