Get Synced WAV WebM

Muaz Khan edited this page Sep 9, 2015 · 1 revision

This wiki page explains how to get synced audio/video.

Here "synced" means, both audio/video will be having equal recording length.

Recording size of WAV/WebM can vary but length will be same.

There will be NO-video-blank frames in the WebM file.

There will be NO-audio-silent buffers in the WAV file.

Here is how to get synced WAV/WebM:

// link both script:
// https://cdn.webrtc-experiment.com/RecordRTC.js
// https://cdn.rawgit.com/webrtc/adapter/master/adapter.js

var webmRecorder, wavRecorder;

document.getElementById('start-recording').onclick = function() {
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    }).then(function(mediaStream) {
        webmRecorder = RecordRTC(mediaStream, {
            type: 'video',
            // recorderType: WhammyRecorder // force Whammy.js
        });

        wavRecorder = RecordRTC(mediaStream, {
            type: 'audio',
            recorderType: StereoAudioRecorder // force WebAudio for MS-Edge/Firefox/Chrome
        });

        webmRecorder.initRecorder(function() {
            wavRecorder.initRecorder(function() {
                webmRecorder.startRecording();
                wavRecorder.startRecording();
            });
        });
    }).catch(function(error) {
        console.error(error);
    });
};

document.getElementById('stop-recording').onclick = function() {
    webmRecorder.stopRecording(function() {
        wavRecorder.stopRecording(function() {
            var video = document.createElement('video');
            var audio = document.createElement('audio');

            video.controls = audio.controls = true;
            video.src = URL.createObjectURL(webmRecorder.blob);
            audio.src = URL.createObjectURL(wavRecorder.blob);

            var container = document.body || document.documentElement;
            container.insertBefore(video, container.firstChild);
            container.insertBefore(audio, container.firstChild);

            audio.play();
            video.play();
        });
    });
};

API Reference

Demo

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.