An Inifinity Mirror App in pure HTML / Javascript
Live Demo here: Mirror Demo
This app creates an infinity mirror effect using the browser webcam. It includes functionalities such as flipping the video feed horizontally, applying an infinity mirror effect, rotating the image, and saving the current view as an image file. The project leverages HTML, CSS, and JavaScript with Bootstrap for styling, and it operates entirely in the browser using the WebRTC API for real-time video processing.
- Camera Control: Turn the webcam on or off.
- Flip Horizontal: Toggle the horizontal flipping of the video feed.
- Infinity Effect: Apply an infinity mirror effect to the video feed.
- Sobel Edge Detection: Show outlines of all the edges of the stream using a Sobel Detection Filter
- Canny Edge Detection: Show outlines of all the edges of the stream using a Canny Edge Detection Filter
- Rotate: Rotate the video feed by 90 degrees with each button press.
- Save Image: Save the current view as a PNG file.
To run this application locally:
-
Clone the Repository
- Use Git to clone the repository to your local machine:
git clone https://github.com/deftio/MirrorMirror
- Navigate into the repository directory:
cd MirrorMirror
- Use Git to clone the repository to your local machine:
-
Open in a Web Browser
-
Open the
index.html
file in a modern web browser that supports the HTML5 video element and canvas API. -
You can do this by right-clicking the file and selecting "Open with" and choosing your browser, or by dragging the file into an open browser window.
-
alternatively run a local server such as:
npx serve
open a browser and go to localhost:3000
or
python -m http.server 3000
open a browser and go to localhost:3000
- Grant Permissions
- When you run the application for the first time, your browser will ask for permissions to access the webcam. Make sure to allow this to enable the video functionalities.
Click the "Turn On" button to activate the webcam. Use the control buttons to manipulate the video feed as desired. Ensure you have proper permissions set in your browser to allow webcam access.
This project is licensed under the BSD 2-Clause "Simplified" License. See the LICENSE.txt
file for more details.
Contributions to this project are welcome. Please fork the repository and submit a pull request with your enhancements.
For support and queries, please open an issue in the repository.
2024 started by deftio