151 lines
4.8 KiB
Markdown
151 lines
4.8 KiB
Markdown
# 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
|
|
|
|
1. **Clone or download this project**
|
|
2. **Install dependencies**:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Start the development server**:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. **Open your browser** to `http://localhost:3000`
|
|
|
|
### Camera Setup
|
|
|
|
1. **Configure Camera IPs**: Enter the IP address for each camera (e.g., 192.168.1.100)
|
|
2. **Click Connect**: The status light will turn green when connected
|
|
3. **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
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### Preview Production Build
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
## API Integration
|
|
|
|
This application uses the [everetptz](https://www.npmjs.com/package/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:
|
|
|
|
1. Modify camera settings in `src/main.ts`
|
|
2. Adjust styling in `src/style.css`
|
|
3. Update UI layout in `index.html`
|
|
|
|
## License
|
|
|
|
ISC - See package.json for details.
|
|
|
|
## Camera Documentation
|
|
|
|
For detailed camera specifications and setup, visit:
|
|
- [EveretPTZ Package Documentation](https://www.npmjs.com/package/everetptz)
|
|
- [EVP212N Datasheet](https://www.everetimaging.com/support/kb/evp212-ndi/datasheet-evp212n/) |