Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Record as Ogg using MediaRecorder in Chrome

Is there a way we could record ogg format in Chrome while working with MediaRecorder ? I believe, Chrome by default supports WebM. Following is what I do

    navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        rec = new MediaRecorder(stream);

        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive")
            {
                let blob = new Blob(audioChunks, { 'type': 'audio/ogg; codecs=opus' });
            }
        };

    })
    .catch(e => console.log(e));
like image 509
Anu Viswan Avatar asked Nov 16 '17 13:11

Anu Viswan


People also ask

How do I use Media Recorder API?

To start with the MediaRecorder API, you need a MediaStream. You can either get one from a <video> or <audio> element or by calling getUserMedia to capture the user's camera and microphone. Once you have a stream you can initialise the MediaRecorder with it and you are ready to record.


1 Answers

From the list of supported formats here, it appears it does not.

However, here are some libraries that help you record to alternative formats:

1) Opus Media Recorder: https://github.com/kbumsik/opus-media-recorder

Formats (Container.Codec): Ogg.Opus, WebM.Opus, WAV.PCM
Browsers: Chrome, Firefox, Safari, Edge

Note: Does not let you change the sampling rate for Opus recording from the default of 48000hz. (For example, this means its output can't directly be submitted to DialogFlow, since it requires Opus audio to have a sample rate of 16000hz.)

2) Opus Recorder: https://github.com/chris-rudmin/opus-recorder

Formats: Ogg.Opus, WAV.PCM
Browsers: Chrome, Firefox, Safari, Opera, Edge

3) LibFlac: https://github.com/mmig/libflac.js

Formats: FLAC.FLAC
Browsers: (unknown, but probably same as the above)

See the speech-to-flac example for how to use with microphone input.

4) WebAudioRecorder: https://github.com/higuma/web-audio-recorder-js

Formats: Ogg.Vorbis, MP3.MP3, WAV.PCM
Browsers: (unknown, but probably same as the above)

5) Libraries augmenting MediaRecorder with WAV/PCM support

A: https://github.com/muaz-khan/RecordRTC (recorderType: RecordRTC.StereoAudioRecorder)
B: https://github.com/streamproc/MediaStreamRecorder (mimeType: "audio/wav" or "audio/pcm")

6) Manual WAV.PCM encoding

For WAV.PCM, the format is simple enough you don't necessarily need a library. If you prefer a "lower level" approach, you can look through the examples here: https://stackoverflow.com/a/54213814/2441655

like image 191
Venryx Avatar answered Oct 19 '22 20:10

Venryx