Is react-voice-recorder supposed to work with Safari?

[John DiFelice]

Is react-voice-recorder supposed to work with Safari? It works well in Chrome and Firefox, but it doesn't record in Safari. Whatever solution I choose must work in Safari.

Thanks,

• John

[John DiFelice]

Here are a couple of the errors:

[Thomas Binétruy-Pic]

Hi!

I ran in the same problem. So Safari does not support the MediaRecorder API: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder#browser_compatibility

I'm using the following polyfill: https://github.com/kbumsik/opus-media-recorder

And inheriting Recorder:

import OpusMediaRecorder from 'opus-media-recorder';
import Worker from 'opus-media-recorder/encoderWorker.js';
import OggOpusWasm from 'opus-media-recorder/OggOpusEncoder.wasm';
import WebMOpusWasm from 'opus-media-recorder/WebMOpusEncoder.wasm';

if (!window.MediaRecorder) {  // Use polyfill when `Media Recorder` does not exist
    const workerOptions = {
        encoderWorkerFactory: _ => new Worker(),
        OggOpusEncoderWasmPath: OggOpusWasm,
        WebMOpusEncoderWasmPath: WebMOpusWasm
    };

    // Preload options while keeping class syntax since react-voice-recorder passes only a single argument
    class MediaRecorder extends OpusMediaRecorder {
        constructor(stream) {
            super(stream, { mimeType: 'audio/wav' }, workerOptions);
        }
    }

    window.MediaRecorder = MediaRecorder;
}

class MyRecorder extends Recorder {
    async componentDidMount() {
        console.log(navigator.mediaDevices);
        navigator.getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia;
        if (navigator.mediaDevices) {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            this.mediaRecorder = new MediaRecorder(stream);
            this.chunks = [];
            this.mediaRecorder.ondataavailable = e => {
                if (e.data && e.data.size > 0) {
                    this.chunks.push(e.data);
                    this.saveAudio();  // Necessary
                }
            };
        } else {
            this.setState({ medianotFound: true });
            console.log("Media Decives will work only with SSL.....");
        }
    }
    startRecording(e) {
        e.preventDefault();
        this.chunks = [];
        this.mediaRecorder.start(60000);  // necessary, chunks time larger than needed (using 60s here)
        this.startTimer();
        this.setState({ recording: true });
    }
    saveAudio() {
        const blob = new Blob(this.chunks, { type: 'audio/ogg' });  // `audio/*` not working anymore, but `audio/ogg` works on all browsers
        const audioURL = window.URL.createObjectURL(blob);
        const audios = [audioURL];
        this.setState({ audios, audioBlob: blob });
        this.props.handleAudioStop({
            url: audioURL,
            blob: blob,
            chunks: this.chunks,
            duration: this.state.time
        });
    }
}

Hopes this helps ;)

[marknorrapscm]

@sivaprakashDesingu Is there any update on this? Will @tbinetruy's changes be incorporated into a new release?

[marknorrapscm]

I'm a bit confused here; caniuse.com reports that the MediaRecorder API is not supported by the following browsers:

• Safari on iOS
• Firefox for Android

...yet I've just ran the demo on Firefox for Android and Safari on an iPad and it worked fine. What am I missing here?

[Sivaprakash Desingu]

Hi @marknorrapscm

As per the analysis i did. MediaRecorder will supported by SSL, If you are supposed to work on localhost you should enable the media recorder setting on IOS browser after that will be supported in same browser.

Note:
The same issue will be available in PROD application if the respective application is Non-SSL.

[marknorrapscm]

Hi @sivaprakashDesingu and thankyou for your reply (and for opening a PR for my other issue).

Can you clarify your comment for me? I am not clear what you mean.

I went onto your demo page on my phone (Firefox for Android) and on an iPad (Safari on iOS) and the demo worked. But, according to CanIUse.com, both of these browsers do not support MediaRecorder. So why does the demo work for me? I have not enabled any developer options on either of these browsers.

[Sivaprakash Desingu]

1. In android there is by defaul mediaRecorder enabled for the browser.
2. For iPad i am not sure about that since i have not investigated on that.
3. For desktop Mac OS you should enble the mediaRecorder i guess.

Safari is currently not supporting MediaRecorder API by default, but you can enable them from Develop > Experimental Features > MediaRecorder.