DOCSEARCHbyAlgolia
Submit Docs

RecordRTC Documentation

repository·master·Indexed 27 days ago

https://github.com/muaz-khan/recordrtc

RecordRTC is a server-less, client-side JavaScript library (version 5.6.3) for recording WebRTC audio/video media streams, screen content, and canvas animations (2D/3D). It provides Promise-based and callback-based APIs and supports cross-browser recording. The library includes specialized tools like MRecordRTC for synchronized multi-stream recording and IndexedDB persistence, as well as integration options for PHP and FFmpeg to merge long-duration recordings.

Tokens
14.6K
Snippets
38
Records
60
Agent score
92%

What's inside RecordRTC

  1. Understand the recordrtc-nodejs workflow

    master

    The recordrtc-nodejs experiment follows this workflow:

    1. Records audio and video separately as .wav and .webm files.
    2. Sends both files in a single FormData via an HttpPost-Request to the Node.js server.
    3. The Node.js server saves both files to the disk.
    4. The Node.js server invokes ffmpeg to merge the .wav and .webm files into a single .webm file.
    5. The server returns the URL of the merged .webm file via the same HTTP callback for playback.

  2. Use RecordRTC with PHP and FFmpeg for media merging

    master

    You can use the RecordRTC PHP and FFmpeg integration to handle long-duration recordings by recording audio and video separately and then merging them. This approach allows for the longest possible recordings by leveraging FFmpeg to merge the streams and ensure audio is synced with the video in a single WebM file.

    # This demo can:
1. record both audio/video
2. merge in single WebM using ffmpeg
3. audio is synced with video using ffmpeg commands!
4. it supports longest possible recordings!

  3. Install and run recordrtc-nodejs

    master

    To use the recordrtc-nodejs package, install it via npm. To run the provided demonstration server, you must navigate into the package directory, install its specific prerequisites, and execute the server script.

    Important: Ensure that your project directory path does not contain any spaces (e.g., use C:\My-Project instead of C:\My Project), as this may cause issues with the execution.

    # Install the package
mkdir node_modules
npm install recordrtc-nodejs

# To run the demo server
cd node_modules/recordrtc-nodejs/
mkdir node_modules
npm install
node server.js

  4. Use MRecordRTC for multi-stream recording

    master

    MRecordRTC (Multi-RecordRTC) is an extension of RecordRTC designed to simplify recording multiple synchronized streams (audio, video, and GIF) simultaneously. It automatically synchronizes streams and provides built-in support for persisting blobs to IndexedDB.

    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
<script>
var recorder = new MRecordRTC();
recorder.addStream(MediaStream);
recorder.mediaType = {
   audio: true,
   video: true,
   gif: true
};
recorder.startRecording();

recorder.stopRecording(function(url, type) {
    document.querySelector(type).src = url;
});

// Accessing blobs
var blobs = recorder.getBlob();
var audioBlob = blobs.audio;
var videoBlob = blobs.video;
var gifBlob = blobs.gif;
</script>

  5. Install RecordRTC.js via CDN or NPM

    master

    You can include RecordRTC in your project using several methods:

    CDN (Recommended):

    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>

    NPM:

    npm install recordrtc

    Then include it in your HTML:

    <script src="node_modules/recordrtc/RecordRTC.js"></script>

    Bower:

    <script src="bower_components/recordrtc/RecordRTC.js"></script>
    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>

  6. Upload RecordRTC Blobs to a PHP Server

    master

    To upload recorded audio or video files to a PHP server, capture the recording as a Blob and use FormData to POST it via an XMLHttpRequest. The server expects two pieces of data for each type (e.g., 'video' or 'audio'):

    1. A filename string sent with the key {type}-filename (e.g., video-filename).
    2. The actual Blob file sent with the key {type}-blob (e.g., video-blob).

    This approach works in Chrome, Firefox, Opera, Microsoft Edge, and on Android devices.

    var fileType = 'video'; // or "audio"
var fileName = 'ABCDEF.webm';  // or "wav"

var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);

xhr('save.php', formData, function (fName) {
    window.open(location.href + fName);
});

function xhr(url, data, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            callback(location.href + request.responseText);
        }
    };
    request.open('POST', url);
    request.send(data);
}

  7. Explore RecordRTC.js simple demos

    master

    The simple-demos directory contains various implementation examples for RecordRTC.js, covering audio, video, screen recording, and advanced configurations. You can use these source files as templates for specific features such as:

    • Audio Recording: 16khz audio, MP3/WAV selection, stereo audio, and raw PCM.
    • Video & Screen Recording: Video recording, GIF recording, multi-camera recording, and recording cropped screens.
    • Advanced Logic: Auto-stop on silence, calculating recording duration, and handling ondataavailable events.
    • Media Constraints: Passing getUserMedia constraints and handling multiple audio/video streams.
    • UI & Integration: Showing logos on recorded video, uploading via PHP (jQuery or vanilla JS), and previewing blob sizes during recording.

  8. Implement RecordRTC over Socket.io workflow

    master

    This experiment follows a specific workflow for recording and merging media:

    1. Client-side: Record audio (.wav) and video (.webm) separately.
    2. Client-side: Emit both files as a single object via the message event using Socket.io.
    3. Server-side: Receive the data, write the files to disk, and invoke ffmpeg to merge the audio and video into a single .webm file.
    4. Server-side: Emit a merged event containing the URL of the merged file.
    5. Client-side: Listen for the merged event to update the media player with the new file URL.
    // 1. Client-side: Emit files
var socketio = io();
var files = {
    audio: {
        name: fileName + '.wav',
        type: 'audio/wav',
        dataURL: dataURL.audio
    },
    video: {
        name: fileName + '.webm',
        type: 'video/webm',
        dataURL: dataURL.video
    }
};
socketio.emit('message', files);

// 2. Server-side: Capture and merge
io.sockets.on('connection', function(socket) {
    socket.on('message', function(data) {
        console.log('writing to disk');
        writeToDisk(data.audio.dataURL, data.audio.name);
        writeToDisk(data.video.dataURL, data.video.name);

        merge(socket, data.audio.name, data.video.name);
    });
});

// 3. Server-side: Emit merged event
// (Inside the merge logic)
socket.emit('merged', audioName.split('.')[0] + '-merged.webm');

// 4. Client-side: Receive merged file
socketio.on('merged', function (fileName) {
    cameraPreview.src = location.href + '/uploads/' + fileName;
    cameraPreview.play();
});

  9. Post recorded audio/video to ASP.NET MVC

    master

    To upload recorded media from the browser to an ASP.NET MVC (IIS) server, you must capture the media as a Blob and transmit it using FormData via an XMLHttpRequest (XHR2).

    Client-side (JavaScript) Implementation

    1. Create a FormData object.
    2. Append the filename using a key pattern: {fileType}-filename (e.g., video-filename).
    3. Append the media blob using a key pattern: {fileType}-blob (e.g., video-blob).
    4. Send the FormData via a POST request to your controller action.

    Server-side (C#) Implementation

    In your ASP.NET MVC controller, iterate through Request.Files to retrieve the uploaded files. Use file.SaveAs() to persist the file to a directory on the server (e.g., an uploads/ folder).

    var fileType = 'video'; // or "audio"
var fileName = 'ABCDEF.webm';  // or "wav"

var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);

xhr('/RecordRTC/PostRecordedAudioVideo', formData, function (fName) {
    window.open(location.href + 'uploads/' + fName);
});

function xhr(url, data, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            callback(location.href + request.responseText);
        }
    };
    request.open('POST', url);
    request.send(data);
}

  11. Set up the RecordRTC development environment

    master

    To contribute to RecordRTC, you need to set up the development environment by installing the necessary dependencies and Grunt tools for code style verification and distribution compilation.

    1. Initialize the project and install dev dependencies:
    mkdir node_modules
npm install --save-dev
    1. Install the Grunt CLI globally:
    npm install grunt-cli@0.1.13 -g
    1. Install the required Grunt plugins:
    npm install grunt@0.4.5
npm install grunt-bump@0.7.0
npm install grunt-cli@0.1.13
npm install grunt-contrib-clean@0.6.0
npm install grunt-contrib-concat@0.5.1
npm install grunt-contrib-copy@0.8.2
npm install grunt-contrib-uglify@0.11.0
npm install grunt-contrib-watch@1.1.0
npm install grunt-jsbeautifier@0.2.10
npm install grunt-replace@0.11.0
npm install load-grunt-tasks@3.4.0
    mkdir node_modules
npm install --save-dev

# install grunt for code style verifications
npm install grunt-cli@0.1.13 -g

npm install grunt@0.4.5
npm install grunt-bump@0.7.0
npm install grunt-cli@0.1.13
npm install grunt-contrib-clean@0.6.0
npm install grunt-contrib-concat@0.5.1
npm install grunt-contrib-copy@0.8.2
npm install grunt-contrib-uglify@0.11.0
npm install grunt-contrib-watch@1.1.0
npm install grunt-jsbeautifier@0.2.10
npm install grunt-replace@0.11.0
npm install load-grunt-tasks@3.4.0

  12. Install ffmpeg on Windows

    master

    To use the merging functionality on Windows, you must install ffmpeg and add it to your system's PATH:

    1. Download and extract the ffmpeg ZIP file.
    2. Rename the extracted directory to ffmpeg.
    3. Open Advanced system settings via the Properties of My Computer.
    4. Click Environment Variables... in the Advanced tab.
    5. Under System variables, click New... and set the Variable name to Path (or edit the existing Path variable).
    6. Add the full URI of your extracted directory (e.g., C:\ffmpeg) to the Variable value.
    7. Click OK to save.