Skip to content

Latest commit

 

History

History
66 lines (49 loc) · 2.63 KB

README.md

File metadata and controls

66 lines (49 loc) · 2.63 KB

Mirror Mirror

An Inifinity Mirror App in pure HTML / Javascript

Live Demo here: Mirror Demo

Description

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.

Features

  • 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.

Setup and Running Locally

To run this application locally:

  1. 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

  2. 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

  1. 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.

Usage

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.

License

This project is licensed under the BSD 2-Clause "Simplified" License. See the LICENSE.txt file for more details.

Contributing

Contributions to this project are welcome. Please fork the repository and submit a pull request with your enhancements.

Support

For support and queries, please open an issue in the repository.

History

2024 started by deftio