High-quality browser-based video player with real-time exposure correction, GPU acceleration, image enhancement controls, and professional luminance analysis.
Developed by Vinayak Patel
SafeView Video Player is an advanced browser-based video player designed for viewing videos with professional image enhancement tools and intelligent exposure correction.
Unlike traditional HTML5 video players, SafeView performs real-time video processing directly inside the browser using CPU and GPU rendering pipelines. It provides exposure planning, luminance analysis, image enhancement, noise reduction, adjustable output resolution, and numerous playback controls while keeping the original video file untouched.
The project is built using pure HTML, JavaScript, CSS, Canvas, WebGL, and Web Workers without requiring external frameworks.
SafeView can analyze an entire video before playback and automatically generate an exposure correction plan.
Features include:
- Automatic luminance analysis
- Dynamic exposure adjustment over time
- Frame-by-frame exposure planning
- Smooth exposure transitions
- Configurable target luminance
- Playback buffering until sufficient analysis is completed
- Background analysis while playback continues
- Exposure trajectory visualization
- Planned gain visualization
- Live exposure statistics
Professional image controls available during playback:
- Exposure adjustment
- Contrast
- Saturation
- Sharpness
- Blur
- Playback speed
All processing happens in real time without modifying the original video.
SafeView includes a native GPU rendering pipeline using WebGL.
Benefits include:
- High performance rendering
- Native resolution playback
- Real-time shader processing
- Exposure correction on GPU
- Noise reduction shaders
- Image enhancement shaders
- Large resolution support
A CPU rendering mode is also included.
Useful for:
- Browser compatibility
- Debugging
- Lower-end hardware
- Comparing CPU vs GPU processing
SafeView continuously analyzes video brightness and displays:
- Raw luminance
- Resulting luminance
- Planned gain
- Target luminance
- Samples analyzed
- Outliers excluded
- Planning progress
Visual graph displaying:
- Observed luminance
- Planned exposure gain
- Target luminance
- Playback planning frontier
This allows users to understand how exposure changes throughout the video.
SafeView contains a configurable real-time noise reduction system.
Controls include:
- Enable/disable noise reduction
- Spatial denoising
- Temporal denoising
- Sigma sensitivity adjustment
The implementation attempts to preserve edges while reducing visible image noise.
Optional animated grain generation helps reduce visible color banding.
Adjustable parameters:
- Grain amount
- Spatial scale
- Temporal speed
Render the video at different resolutions independent of the original source.
Supported presets include:
- Native source resolution
- Balanced quality mode
- Screen resolution
- 8K UHD
- 4K UHD
- 2K QHD
- 1080p
- 720p
- Custom resolution
Aspect ratio is preserved using letterboxing when necessary.
Complete playback interface including:
- Play / Pause
- Restart
- Skip backward
- Skip forward
- Seek bar
- Fullscreen
- Volume control
- Mute
- Playback speed adjustment
SafeView includes several performance-focused features:
- GPU rendering pipeline
- Web Workers for background analysis
- Incremental exposure planning
- Background planning while playing
- Reduced UI update mode
- Native resolution rendering
- Optimized CPU rendering mode
Modern dark interface featuring:
- Responsive layout
- Professional control panels
- Multiple configuration tabs
- Real-time statistics
- Interactive sliders
- Modern transport controls
- Exposure analysis overlay
- Status indicators
- HTML5
- CSS3
- JavaScript (Vanilla)
- HTML5 Canvas
- WebGL
- Web Workers
- Video API
- OffscreenCanvas
SafeView/
│
├── safeview.html
├── js/
│ └── safeview.js
├── README.md
├── screenshots/
│ ├── main-interface.png
│ ├── exposure-planning.png
│ ├── sample1.png
│ ├── sample2.png
│ └── sample3.png
└── LICENSE
Clone the repository:
git clone https://github.com/vbepipe/SafeView.gitEnter the project directory:
cd SafeViewStart a local web server:
python -m http.server 8000Open your browser and navigate to:
http://localhost:8000/safeview.html
- Launch the application.
- Click Load Video.
- Select any supported video file.
- Optionally enable Exposure Planning.
- Wait for analysis to complete or begin playback once the initial buffer is ready.
- Adjust image enhancement settings as desired.
- Switch between CPU and GPU rendering modes if required.
- Monitor luminance and exposure graphs during playback.
Screenshots will be added here.
SafeView is designed for modern browsers supporting:
- HTML5 Video
- WebGL
- Canvas
- Web Workers
- OffscreenCanvas
Recent versions of Chrome, Edge, and other Chromium-based browsers are recommended for the best performance.
////////////////////////////////////////////////////////
//
// SafeView Video Player
//
// Developer: Vinayak Patel
// Email: vinayak.chronicles@outlook.com
//
// Copyright © 2026 Vinayak Patel.
// All rights reserved.
//
// Permission is granted to individuals to use this
// software for personal, non-commercial purposes only.
//
// You may not:
//
// • Use this software commercially.
// • Modify, adapt, or create derivative works.
// • Redistribute the software or source code.
// • Sublicense or sell this software.
// • Claim authorship or remove copyright notices.
//
// Reverse engineering, decompiling, or disassembling
// this software is prohibited except where permitted
// by applicable law.
//
////////////////////////////////////////////////////////
Vinayak Patel
Developer of SafeView Video Player
GitHub: https://github.com/vbepipe/SafeView
Email: vinayak.chronicles@outlook.com
SafeView was built as an experimental browser-based video processing application demonstrating what modern web technologies such as WebGL, HTML5 Canvas, and Web Workers can achieve for real-time video enhancement without requiring native desktop software.