Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/khamisilawrence/jsrecorder

Screen Recorder built using HTML, CSS, JavaScript, and the Screen Capture API.
https://github.com/khamisilawrence/jsrecorder

javascript screen-capture-api screen-recorder

Last synced: 24 days ago
JSON representation

Screen Recorder built using HTML, CSS, JavaScript, and the Screen Capture API.

Host: GitHub
URL: https://github.com/khamisilawrence/jsrecorder
Owner: khamisilawrence
Created: 2024-01-17T20:55:17.000Z (12 months ago)
Default Branch: main
Last Pushed: 2024-05-06T13:36:00.000Z (8 months ago)
Last Synced: 2024-05-07T15:11:11.371Z (8 months ago)
Topics: javascript, screen-capture-api, screen-recorder
Language: CSS
Homepage: https://jsrecorder.netlify.app
Size: 318 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # [**JSRecorder: Simple JavaScript Screen Recorder**](https://jsrecorder.netlify.app/)

![Screenshot of JSRecorder Live Demo](assets/screenshots/screenshot-of-jsrecorder-live-demo.png)

Screen Recorder built using HTML, CSS, and JavaScript.

## Table of Contents

- [Summary](#summary)

- [Usage](#usage)

- [Installation](#installation)

- [Screenshots](#screenshots)

- [Credits](#credits)

## Summary

A simple screen recorder built using the Screen Capture API that allows users to capture their screen activity as a video file and provides users with that file in WebM format immediately upon ending the recording which they can save to their local device.

## Usage

To record your screen:

1. Navigate to the [live demo](https://jsrecorder.netlify.app/)

2. Click the `Start Recording` button

3. Select which browser tab you wish to capture

4. Select the `Share` option

5. Save the recording on your local machine after you stop the recording

## Installation

1. Clone this repository to your local machine:

   ```bash

    git clone https://github.com/khamisilawrence/jsrecorder.git

   ```

2. Navigate to repository:

   ```bash

    cd jsrecorder

   ```

## Screenshots

**Select browser tab to capture**

![Screenshot of QR Code Generator](assets/screenshots/screenshot-of-jsrecorder-browser-tab-selection-prompt.png)

**Save recording file**

![Screenshot of QR Code Generator](assets/screenshots/screenshot-of-jsrecorder-file-save-prompt.png)

## Credits

- This project was inspired by a [CodePen demo](https://codepen.io/impressivewebs/pen/oNVbwdO) by [Louis Lazaris](https://codepen.io/impressivewebs).

- The API used in the project is the [Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API).