ScreenREC

A really simple web screen recorder.

About

The project was initially developed by Sagnik Sahoo during the COVID-19 era to record the online classes.Later on it was made Open-Sourced.

V2

Demo

Here you can find the live deployed version:

• ScreenREC

Features

✔️ Export type selector (currently MP4/WebM)
✔️ Video preview
✔️ Video download
✔️ Dark/Light mode toggle
✔️ Current OS theme detection
✔️ Ad-free
✔️ Open-Source
✔️ No Time limits
❌ Doesn't support Mobile Devices yet.

Usage guide :

1. Choose your video format
   • WebM : Optimised for web
   • mp4 : Optimised for compatibility
2. Enter your desired file name
3. Click "I'm ready to record!"
4. Grant the required browser permissions to record your screen, if you are accessing the site for first time
5. Select the desired window you'd like to record through the popup.
6. Click the green button to pause/resume recording, and the red button to stop.
7. You can play your video in the browser, or click "Download now" to download.

ScreenREC.mp4

Developer's Guide :

For Cloud or Linux Users only :

1. Using this button open this project on Gitpod.

   

   Skip this if you are running on Linux

2. Then in terminal clone the repository.

   git clone https://github.com/heysagnik/screenREC

3. Move into the newly created screenREC project directory.

   cd screenREC

4. Install the required npm packages using the following command.

   npm install

5. Run the following command to use development mode .

   npm start

6. Build the final project.

    npm run build

7. Or you can deploy the static site on netlify or vercel or any other platform.

   

For Windows Users :

1. Fork this repo

2. Then in terminal clone the repository.

   git clone https://github.com/heysagnik/screenREC

3. Open the newly created screenREC folder in your desired Code Editor (eg: VS CODE)

4. Install the required npm packages

   npm install

5. Make sure you delete .parcel-cache & dist folder 📂 firstly.

6. To run the project and use in development mode.

   npx parcel src/index.pug

7. Build the final project.

   npm run build

8. Or you can deploy the static site on netlify or vercel or any other platform.

   

Technologies

• Pug
• Parcel
• SASS/SCSS

Special Thanks to all the Contributors

Maintained with Sagnik Sahoo