OBS Overlays

Stream real-time Tesla data to Open Broadcaster Software

Open Broadcaster Software (OBS) is popular streaming software that allows you to add custom browser sources as overlays. Teslemetry provides simple overlay pages that display real-time vehicle data, perfect for live streaming your Tesla experience.

Quick Start

Teslemetry provides pre-built overlay pages that display individual telemetry signals in real-time. The basic URL format is:

https://api.teslemetry.com/obs/[VIN]/[SIGNAL]?token=[ACCESS_TOKEN]&unit=[UNIT]

URL Parameters

[VIN] - Your vehicle's VIN (Vehicle Identification Number)
[SIGNAL] - The telemetry field name (see Telemetry Fields)
[ACCESS_TOKEN] - Your Teslemetry access token
[UNIT] - (Optional) Display unit label (e.g., mph, kmph, %, kW)

Example URLs

Display current speed in MPH:

https://api.teslemetry.com/obs/5YJSA1E55PF000000/VehicleSpeed?token=YOUR_TOKEN&unit=mph

Display battery level percentage:

https://api.teslemetry.com/obs/5YJSA1E55PF000000/BatteryLevel?token=YOUR_TOKEN&unit=%

Display charging power:

https://api.teslemetry.com/obs/5YJSA1E55PF000000/DCChargingPower?token=YOUR_TOKEN&unit=kW

Setting Up in OBS

Get Your Access Token
- Log into Teslemetry Console
- Navigate to Settings → Access Tokens
- Create or copy an existing access token
Find Your VIN
- Shown in the Teslemetry Console
- Make sure you have an active vehicle subscription for the vehicle
Choose Your Signal
- Browse the Telemetry Fields documentation
- Pick fields relevant to your stream (speed, battery, power, etc.)
- Ensure the field is enabled in your telemetry configuration
Add to OBS
- In OBS, create a new Browser Source
- Paste your formatted URL
- Set dimensions (recommended: 400x200 for single values)
- Check "Shutdown source when not visible" to save resources
- Adjust CSS styling if needed (see below)
Position and Style
- Position the overlay on your stream layout
- Add backgrounds, borders, or effects in OBS
- Use CSS filters for custom colors (Filters → User-defined shader)

Styling

The overlay pages use a simple, clean design with large text that's easy to read on stream. The default styling is:

Value: 4rem font size, bold, right-aligned
Unit: 2rem font size, bold, right-aligned
Transparent background (use OBS to add backgrounds)

You can apply custom CSS in OBS by adding a custom stylesheet to the Browser Source properties.

Common Use Cases

Racing/Track Overlays

VehicleSpeed - Current speed
BatteryLevel - Battery percentage
Odometer - Total miles driven
LateralAcceleration - G-forces (lateral)
LongitudinalAcceleration - G-forces (forward/back)

Road Trip Overlays

VehicleSpeed - Current speed
BatteryLevel - Battery remaining
RatedRange - Estimated range
OutsideTemp - Ambient temperature
DestinationName - Navigation destination
MinutesToArrival - ETA

Charging Overlays

DCChargingPower or ACChargingPower - Charging rate
BatteryLevel - Current charge level
TimeToFullCharge - Time remaining
ChargerVoltage - Charger voltage
ChargeAmps - Current amperage

Performance Monitoring

DiTorqueActualR - Rear motor torque
DiTorqueActualF - Front motor torque
PackCurrent - Battery current draw
PackVoltage - Battery voltage
DiHeatsinkTR - Motor heatsink temperature

Building Custom OBS Pages

While the built-in single-signal overlays are great for simple use cases, you might want to create a custom dashboard with multiple data points, custom layouts, or advanced visualizations.

Basic Custom Page Structure

Here's a minimal example of a custom OBS overlay page:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: transparent;
      color: white;
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .metric {
      font-size: 2rem;
      font-weight: bold;
      margin: 10px 0;
    }
    .label {
      font-size: 1rem;
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <div class="metric">
    <div class="label">Speed</div>
    <div id="speed">--</div>
  </div>
  <div class="metric">
    <div class="label">Battery</div>
    <div id="battery">--</div>
  </div>

  <script type="module">
    // Replace with your VIN and token
    const VIN = 'YOUR_VIN';
    const TOKEN = 'YOUR_TOKEN';

    // Connect to Teslemetry SSE stream
    const eventSource = new EventSource(
      `https://api.teslemetry.com/sse/${VIN}?token=${TOKEN}`
    );

    eventSource.addEventListener('data', (event) => {
      const { data } = JSON.parse(event.data);

      if (data.VehicleSpeed !== undefined) {
        document.getElementById('speed').textContent =
          Math.round(data.VehicleSpeed) + ' mph';
      }

      if (data.BatteryLevel !== undefined) {
        document.getElementById('battery').textContent =
          Math.round(data.BatteryLevel) + '%';
      }
    });
  </script>
</body>
</html>

Save this as an HTML file and use it as a Browser Source in OBS.

Using the Teslemetry SDK

The Teslemetry TypeScript SDK makes it easy to connect with Teslemetry in your favorite front end framework like React, Vue, Next, or Nuxt. Install it with:

npm install @teslemetry/api

Prompting an LLM to Build Custom Pages

When you want to create more complex OBS overlays, you can use AI assistants like Claude, ChatGPT, or others to help you build them. Here's how to effectively prompt an LLM:

Example Prompt Template

I want to create a custom OBS overlay for my Tesla that displays real-time data
during streams. Please help me build an HTML page that:

1. Connects to the Teslemetry Server-Sent Events (SSE) API
2. Displays the following metrics: [LIST YOUR METRICS]
3. Has this layout/style: [DESCRIBE YOUR DESIRED LAYOUT]

Technical details:
- My VIN: [YOUR_VIN]
- Access Token: [YOUR_TOKEN] (or use placeholder)

The page should:
- Use the Teslemetry SSE endpoint: https://api.teslemetry.com/sse/{VIN}?token={TOKEN}
- Listen for 'data' events that contain a JSON object with a 'data' property
- Have a transparent background for use in OBS
- Use large, easy-to-read fonts
- Update values in real-time as they arrive

Available telemetry fields can be found at: https://api.teslemetry.com/fields.json

Please provide a complete HTML file I can save and use as a Browser Source in OBS.

Sample Prompts for Different Use Cases

Racing Dashboard:

Create an OBS overlay showing VehicleSpeed (top, large), BatteryLevel (top right),
and motor torque values (DiTorqueActualR, DiTorqueActualF) at the bottom.
Use a motorsport-style layout with neon green accents on a dark background.

Minimalist Trip Info:

Create a clean, minimal OBS overlay in the top-right corner showing:
- Current speed (large)
- Battery percentage (medium)
- Estimated range (small)
Use white text with subtle drop shadows on transparent background.

Charging Station Display:

Create an OBS overlay for charging streams that shows:
- DCChargingPower as a large center value with "kW" unit
- BatteryLevel as a progress bar
- TimeToFullCharge below
- ChargerVoltage and ChargeAmps in smaller text at bottom
Make it look like a futuristic charging station display.

Advanced Features to Request

When prompting an LLM, you can ask for these advanced features:

Animations: Smooth transitions when values change
Conditional Styling: Change colors based on values (e.g., red when battery is low)
Charts/Graphs: Display historical data or trends
Custom Units: Convert values (km to miles, Celsius to Fahrenheit)
Error Handling: Display connection status and handle disconnections
Multiple Vehicles: Switch between different VINs
Theme Support: Light/dark themes that match your stream

Testing Your Custom Page

Save your HTML file locally
Open it in a web browser to test functionality
Check the browser console (F12) for any errors
Verify data is updating in real-time
Once working, add it as a Browser Source in OBS

API Reference

SSE Endpoint

The Server-Sent Events (SSE) endpoint provides real-time streaming data:

GET https://api.teslemetry.com/sse/{vin}?token={access_token}

Events arrive with this structure:

{
  "data": {
    "VehicleSpeed": 65.5,
    "BatteryLevel": 84.2,
    "...": "..."
  }
}

Field Configuration

If a field isn't enabled in your telemetry configuration, you can enable it via the API:

await fetch(`https://api.teslemetry.com/api/config/{vin}`, {
  method: 'PATCH',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    fields: {
      'VehicleSpeed': null,
      'BatteryLevel': null
    }
  })
});

Troubleshooting

Overlay Shows "Loading" or "Waiting"

Ensure your vehicle is awake and connected
Verify the telemetry field is enabled in your config
Check that your access token has the correct permissions

Data Not Updating

Confirm your vehicle is transmitting telemetry data
Check your telemetry subscription is active
Verify the field name matches exactly (case-sensitive)

Connection Errors

Verify your access token is valid and not expired
Ensure your VIN is correct

Performance Issues

Limit the number of browser sources in OBS
Enable "Shutdown source when not visible"
Reduce the update frequency of non-critical fields

Security Considerations

Never share your access token publicly or in screenshots/streams
Use URL parameters carefully - tokens are visible in OBS settings
Consider creating a dedicated access token just for OBS with minimal permissions
Rotate your tokens periodically
Use environment variables or config files for tokens when building custom pages

Resources

Telemetry Fields Reference - Complete list of available signals
Teslemetry TypeScript SDK - Official SDK
API Documentation - Full API reference
OBS Project - Download OBS Studio

Need Help?

Join the Teslemetry Discord community or contact support if you need assistance setting up your OBS overlays.

Known Issues

Limitations of Fleet Telemetry

Vehicle Sleep

Letting your Tesla vehicle sleep