A high-quality web-based video player that implements AMD's FidelityFX Super Resolution (FSR) technology in WebGL to upscale and enhance video playback in real-time. This implementation allows you to view local video files with advanced upscaling and sharpening techniques previously only available in desktop applications.
- Real-time FSR Upscaling: Enhance video quality using AMD's FSR algorithms
- Local Video Playback: Play videos directly from your device with no uploading required
- Playlist Support: Load multiple videos and navigate between them
- Aspect Ratio Preservation: Videos display correctly regardless of dimensions
- Dynamic Controls: Intuitive UI that fades when not in use
- Fullscreen Mode: Immersive viewing experience
- CMAA2-inspired Edge Detection: Improved edge detection for better visual quality
- Intuitive UI: Media controls inspired by classic media players
Try the online demo: FSR Enhanced Video Player Demo
| Browser | Video Support | Notes |
|---|---|---|
| Chrome | ✅ | Full support for all features |
| Firefox | ✅ | Full support for all features |
| Edge | ✅ | Includes H.265/HEVC support |
| Safari | ✅ | Includes H.265/HEVC support |
| Opera | ✅ | Based on Chromium, full support |
- A modern web browser
- Local video files to play
-
Clone the repository:
git clone https://github.com/Benjamin-Wegener/VideoPlayerFSR
-
Navigate to the project directory:
cd VideoPlayerFSR -
Open
index.htmlin your preferred browser or serve it with a local web server.
- Click the eject (⏏) button to select video file(s) from your device
- Use the playback controls to play/pause and navigate between videos
- Toggle the enhance button (✨) to enable/disable FSR enhancement
- Use the fullscreen button for a more immersive experience
- WebGL: Hardware-accelerated graphics rendering
- AMD FSR 1.0.2: High-quality upscaling algorithm
- JavaScript: Dynamic UI and playback control
- HTML5 Video API: For video playback capabilities
- CMAA2-inspired Edge Detection: For improved visual quality
The player uses the following shader-based pipeline to enhance video:
- Edge Detection: Identifies edges in the video frame
- Upscaling: Uses FSR EASU (Edge-Adaptive Spatial Upsampling) to intelligently upscale content
- Sharpening: Applies dynamic sharpening with configurable intensity
- Color Processing: Maintains proper color space transformations
Controls allow you to toggle the enhancement effects to compare the original and enhanced video quality in real-time.
You can adjust several parameters in the shader.js file:
// Parameter tuning
#define SHARPENING 2.0 // Sharpening intensity (0.0 to 2.0 recommended)
#define CONTRAST 2.0 // High contrast adaptation range
#define EDGE_THRESHOLD 0.15 // Threshold for edge detection
#define EDGE_WEIGHT 1.2 // Weight applied to detected edgesContributions, issues, and feature requests are welcome! Feel free to check the issues page.
To contribute:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
MIT License
Copyright (c) 2023 Benjamin Wegener
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Benjamin Wegener
- GitHub: @Benjamin-Wegener
- AMD for the FidelityFX Super Resolution technology
- agyild for the initial mpv port
- goingdigital for the WebGL port
- All contributors who have helped improve this project
Made with ❤️ by Benjamin Wegener