Files

Marco Mooren ca6e2475fd first working commit just flipped

2025-11-04 18:30:55 +01:00

4.8 KiB

Raw Permalink Blame History

EveretPTZ Live Production UI

A professional web-based control interface for up to 3 EveretPTZ cameras, designed specifically for live production environments. Built with TypeScript, Vite, and the everetptz npm package.

Features

🎥 Multi-Camera Support

Support for up to 3 EveretPTZ cameras simultaneously
Independent control for each camera
Real-time connection status monitoring
Easy IP address configuration

🕹️ Intuitive PTZ Controls

NippleJS Joystick Interface: Smooth pan and tilt control with variable speed
Zoom Controls: Dedicated in/out buttons with hold-to-zoom functionality
Focus Controls: Manual near/far focus with auto-focus option
Real-time Movement: Responsive controls for live production scenarios

🎨 Comprehensive Image Settings

Exposure Control: Auto, manual, iris priority, shutter priority, brightness priority modes
White Balance: Auto, indoor, outdoor, manual, and temperature modes
Image Enhancement: Adjustable brightness, sharpness, contrast, and saturation
Live Updates: Changes apply in real-time during production

💻 Professional UI

Dark Theme: Optimized for studio lighting conditions
Responsive Design: Works on various screen sizes
Status Indicators: Visual feedback for camera connection states
Accessible Controls: Large, clearly labeled controls for easy operation

Supported Cameras

Everet EVP212N (Black) - EAN: 8719327137901
Everet EVP212N-W (White) - EAN: 8719327137956

Quick Start

Prerequisites

Node.js 18+ and npm
EveretPTZ cameras on your network
Modern web browser

Installation

Clone or download this project
Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
Open your browser to http://localhost:3000

Camera Setup

Configure Camera IPs: Enter the IP address for each camera (e.g., 192.168.1.100)
Click Connect: The status light will turn green when connected
Start Controlling: Use the joystick and controls to operate your cameras

Usage Guide

Connection

Enter the camera's IP address in the input field
Click "Connect" to establish connection
Status lights indicate: Red (disconnected), Orange (connecting), Green (connected)

PTZ Control

Joystick: Click and drag to pan and tilt the camera
Zoom: Hold the +/- buttons to zoom in or out
Focus: Use NEAR/FAR for manual focus, or AUTO for automatic focus

Image Settings

Exposure: Choose from various exposure modes and adjust brightness
White Balance: Select the appropriate white balance for your lighting
Enhancement: Fine-tune sharpness, contrast, and saturation in real-time

Development

Project Structure

src/
├── main.ts          # Main application logic
├── style.css        # Professional UI styling
├── nipplejs.d.ts    # TypeScript declarations
└── ...

index.html           # Main HTML structure
package.json         # Dependencies and scripts
vite.config.ts       # Vite configuration

Key Components

PTZController: Main application class managing all cameras
Camera Management: Connection handling and error management
Joystick Integration: NippleJS-based PTZ control
Settings Management: Real-time image parameter control

Build for Production

npm run build

Preview Production Build

npm run preview

API Integration

This application uses the everetptz npm package for camera communication. The package provides:

Zero Dependencies: Pure TypeScript implementation
Complete PTZ Control: Pan, tilt, zoom, and focus operations
Image Settings: Exposure, white balance, iris, shutter control
Advanced Features: WDR, noise reduction, gamma correction
Type Safety: Full TypeScript support

Troubleshooting

Connection Issues

Verify camera IP addresses are correct
Ensure cameras are on the same network
Check camera credentials (default: admin/admin)
Confirm cameras are powered on and responsive

Performance

Use Chrome or Firefox for best performance
Ensure stable network connection to cameras
Multiple simultaneous connections may impact responsiveness

Contributing

This is a production-ready interface. For customizations:

Modify camera settings in src/main.ts
Adjust styling in src/style.css
Update UI layout in index.html

License

ISC - See package.json for details.

Camera Documentation

For detailed camera specifications and setup, visit:

4.8 KiB Raw Permalink Blame History