first working commit just flipped
This commit is contained in:
Marco Mooren
151
README.md
Normal file
151
README.md
Normal file
@@ -0,0 +1,151 @@
|
||||
# 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/)
|
||||
Reference in New Issue
Block a user