muaz-khan/recordrtc

★ 6,891JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((recordrtc))
    What it does
      Browser recording
      No plugins needed
      Multiple media types
    Media Types
      Audio
      Video
      Screen capture
      Canvas and GIF
    Browser Support
      Chrome
      Firefox
      Edge
      Safari
    Advanced Options
      Stereo audio
      Multi-stream combine
      Bitrate and frame rate
    Audience
      Web developers
      App builders

mindmap root((recordrtc)) What it does Browser recording No plugins needed Multiple media types Media Types Audio Video Screen capture Canvas and GIF Browser Support Chrome Firefox Edge Safari Advanced Options Stereo audio Multi-stream combine Bitrate and frame rate Audience Web developers App builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add in-browser video recording to a tutoring or coaching app so users can capture sessions without installing software.

USE CASE 2

Build a screen recording tool that lets users record their screen and download the file directly from the browser.

USE CASE 3

Capture high-quality stereo audio from a microphone for a voice note or podcast web app with configurable sample rates.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Supported formats vary by browser, VP8 and VP9 for Chrome, VP8 and H264 for Firefox, test in your target browser before shipping.

In plain English

RecordRTC is a JavaScript library that lets websites and web apps record audio, video, and screen activity directly inside a browser, without requiring the user to install any extra software. It works by tapping into browser-built-in recording capabilities, so a site can capture a user's microphone, camera, or screen with just a few lines of code. The library supports Chrome, Firefox, Opera, Edge, and Safari across Windows, macOS, Linux, and Android. Different browsers support different video and audio formats, and RecordRTC handles those differences behind the scenes. For example, Chrome can record using the VP8, VP9, H264, or MKV formats, while Firefox supports VP8 and H264. Audio can be captured in formats like OPUS or raw PCM depending on the browser. From a developer's perspective, you start a recording by passing a media stream (from the user's camera or microphone) into RecordRTC, setting the type to audio, video, canvas, or GIF, and then calling startRecording. When done, you call stopRecording and receive a recorded file as a blob, which you can save, upload, or play back. The library also supports pausing and resuming, setting recording durations, getting snapshots at intervals, and adjusting quality settings like bitrate and frame rate. There are options for more advanced scenarios too. You can record directly from an HTML canvas element, which covers animated graphics or drawings. The StereoAudioRecorder handles high-quality stereo audio with configurable sample rates. A multi-stream mode lets you combine several sources into one file. RecordRTC is open-source and available through npm, a content delivery network, or directly from GitHub. The project includes full API documentation at recordrtc.org and a large set of simple demo pages to illustrate specific use cases. It has been around long enough to accumulate wide browser support coverage and a substantial user base among developers building browser-based communication, tutoring, and screen-capture tools.

Copy-paste prompts

Prompt 1

Using RecordRTC, write JavaScript that starts recording the user's webcam when they click a button, stops after 30 seconds, and offers the video for download.

Prompt 2

Show me how to use RecordRTC to record screen and microphone audio together into a single file in Chrome.

Prompt 3

Using RecordRTC's StereoAudioRecorder, capture stereo audio at 44100Hz from a microphone and upload the file to a server when the user clicks Stop.

Prompt 4

Build a canvas animation recorder with RecordRTC that captures an HTML canvas element and saves the output as a GIF file.

Open on GitHub → Explain another repo

← muaz-khan on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.