hxuanyu/obs-overlay-widget
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
obs-overlay-widget/README.md
hxuanyu d70b962ef5 基本功能实现
2025-06-25 23:53:40 +08:00

2.2 KiB
Raw Blame History

OBS Overlay Widget

A collection of highly customizable widgets for OBS Studio streaming and recording, built with Vue 3, TypeScript, and Vite.

Features

  • Time and Date Display: Customizable formats for showing current time and date
  • Text Display: Show fixed text or API-returned content with custom styling
  • Image Display: Display local or remote images with customization options
  • Split View Interface: Configuration panel on the left, real-time preview on the right
  • Transparent Background: All widgets have transparent backgrounds suitable for OBS overlay
  • URL Generation: Automatically generates sharable URLs with encoded configuration
  • Pure Preview Mode: Open generated URLs to display only the widget with transparent background

Widget Types

  1. Clock Widget: Display current time with customizable format, style, and effects
  2. Date Widget: Show current date with customizable format, style, and effects
  3. Text Widget: Display text with customizable styles including gradients, shadows, and fonts
  4. Image Widget: Show images with customizable size, effects, and positioning

Usage

  1. Select a widget type from the dropdown
  2. Configure the widget using the control panel on the left
  3. See real-time preview on the right
  4. Copy the generated URL to use in OBS Studio as a Browser Source

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Troubleshooting

If you encounter TypeScript errors related to undefined properties, make sure that:

  1. All widget components handle possible undefined configuration properties
  2. Default values are provided for all configuration options
  3. Use proper null checking (e.g., props.config.property || defaultValue)

Integration with OBS Studio

  1. Run this application on a web server or locally
  2. Configure your widget using the configuration interface
  3. Copy the generated URL
  4. In OBS Studio:
    • Add a "Browser Source" to your scene
    • Paste the URL into the Browser Source URL field
    • Set width and height according to your needs
    • Check "Shutdown source when not visible" for better performance