Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/heysagnik/screenrec

A really simple , ad-free & minimal web based screen recorder 📹
https://github.com/heysagnik/screenrec

collaborate design github good-first-issue hacktoberfest hacktoberfest-accepted hacktoberfest2022 opensource parcel productivity reactjs screen-recorder scss vercel webapp

Last synced: 6 days ago
JSON representation

A really simple , ad-free & minimal web based screen recorder 📹

Host: GitHub
URL: https://github.com/heysagnik/screenrec
Owner: heysagnik
License: mit
Created: 2021-12-10T06:35:14.000Z (about 3 years ago)
Default Branch: master
Last Pushed: 2024-05-03T14:15:48.000Z (9 months ago)
Last Synced: 2024-10-12T18:57:16.405Z (3 months ago)
Topics: collaborate, design, github, good-first-issue, hacktoberfest, hacktoberfest-accepted, hacktoberfest2022, opensource, parcel, productivity, reactjs, screen-recorder, scss, vercel, webapp
Language: SCSS
Homepage: https://screen-rec.vercel.app
Size: 700 KB
Stars: 168
Watchers: 3
Forks: 52
Open Issues: 8
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

README

# ScreenREC

A really simple web screen recorder.

## About

The project was initially developed by [Sagnik Sahoo](https://twitter.com/heysagnik) during the COVID-19 era to record the online classes.Later on it was made Open-Sourced.

[V2](https://dashboard-eight-henna.vercel.app/)

## Demo

Here you can find the live deployed version:

- [ScreenREC](https://screen-rec.vercel.app/)

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

https://user-images.githubusercontent.com/70798495/197354300-9ca7a871-cafa-4883-9926-678bc1c173a7.mp4

## Developer's Guide :

### For Cloud or Linux Users only :

1. Using this button open this project on Gitpod.

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/heysagnik/screenREC)

> Skip this if you are running on Linux

2. Then in terminal clone the repository.
```sh
git clone https://github.com/heysagnik/screenREC
```
3. Move into the newly created screenREC project directory.
```sh
cd screenREC
```
4. Install the required npm packages using the following command.
```sh
npm install
```
5. Run the following command to use development mode .
```sh
npm start
```
6. Build the final project.
```sh
npm run build
```
7. Or you can deploy the static site on netlify or vercel or any other platform.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fheysagnik%2FscreenREC) [![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/heysagnik/screenREC)

### For Windows Users :

1. Fork this repo

2. Then in terminal clone the repository.
```sh
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
```sh
npm install
```
5. Make sure you delete `.parcel-cache` & `dist` folder 📂 firstly.
6. To run the project and use in development mode.
```sh
npx parcel src/index.pug
```
7. Build the final project.
```sh
npm run build
```
8. Or you can deploy the static site on netlify or vercel or any other platform.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fheysagnik%2FscreenREC)
[![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/heysagnik/screenREC)

## Technologies

- [Pug](https://pugjs.org/)
- [Parcel](https://parceljs.org/)
- [SASS/SCSS](https://sass-lang.com/)

### Special Thanks to all the Contributors

Maintained with [Sagnik Sahoo](https://github.com/heysagnik)