Git Product home page Git Product logo

heysagnik / screenrec Goto Github PK

View Code? Open in Web Editor NEW
155.0 3.0 52.0 717 KB

A really simple , ad-free & minimal web based screen recorder ๐Ÿ“น

Home Page: https://screen-rec.vercel.app

License: MIT License

Shell 2.32% Pug 12.66% JavaScript 28.47% SCSS 56.56%
reactjs scss webapp opensource screen-recorder hacktoberfest good-first-issue vercel productivity design parcel hacktoberfest-accepted hacktoberfest2022 collaborate github

screenrec's Introduction

ScreenREC

A really simple web screen recorder.

ScreenREC - A really simple ad-free minimial web screen recorder | Product Hunt ScreenREC - A really simple ad-free minimial web screen recorder | Product Hunt

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:

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.

    Open in 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.

    Deploy with Vercel Deploy with Netlify

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.

    Deploy with Vercel Deploy with Netlify

Technologies

Special Thanks to all the Contributors

Maintained with Sagnik Sahoo

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.