https://github.com/norgul/rtc
Real-time camera challenge
https://github.com/norgul/rtc
Last synced: 10 months ago
JSON representation
Real-time camera challenge
- Host: GitHub
- URL: https://github.com/norgul/rtc
- Owner: Norgul
- Created: 2025-06-10T05:22:44.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-12T09:32:55.000Z (about 1 year ago)
- Last Synced: 2025-09-06T15:41:22.468Z (11 months ago)
- Language: TypeScript
- Size: 3.06 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Frontend code challenge
This is a WebRTC showcase project which shows real-time video streaming & recording
with possibility of applying filters to the input stream.
## Setup
To run the project in dev mode, you need to execute these commands:
- ``npm i``
- ``npm run build``
- ``npm run dev``
Otherwise, just open ``dist/index.html`` in the browser.
## Technical decisions & architecture
Project is a vanilla TS/SCSS implementation with [Vite](https://vite.dev/) used for project
building and live reload.
Project structure:
- ``Camera`` is a class responsible for camera initialization
- ``FilterManager`` is a class responsible for loading filters and is called from within
``Camera`` to separate filtering logic. Manager subsequently calls upon filters from
``/filters`` directory to have a clear separation of concerns
Filters are implemented for the most part as a pixel manipulation algorithm due to its
simplicity. Only exception is ``Blur`` which has a horrible performance using such approach,
so that part is done using WebGL instead.
My initial idea was to have checkboxes for each of the filters, however those became obsolete
when sliders were implemented, so I got rid of them completely. To turn on a filter, it is
enough to increase the slider above 0.
## Known Limitations & Browser Compatibility Notes
Minimum browser versions required:
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+