muaz-khan / RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
https://www.webrtc-experiment.com/RecordRTC/
MIT License
6.54k stars 1.75k forks source link

Having trouble using RecordRTC on Safari #747

Open malleng opened 3 years ago

malleng commented 3 years ago

Hi! I am trying to record audio from microphone using RecordRTC library in javascript. My goal is to record the audio and send it to a nodeJS server threw websocket. I managed to make it works on google chrome but not on Safari.

The error I get on Safari is the following :

[Error] Cannot load blob:null/5f6b6c16-803c-49cc-b6c7-6fa294c25313. [Error] Failed to load resource: Cross origin requests are not allowed when using same-origin fetch mode. (5f6b6c16-803c-49cc-b6c7-6fa294c25313, line 0) [Error] NotReadableError: The I/O read operation failed. (7f332c2a-0091-44d5-93d5-8c57adcf5310, line 2)

I investigate and find that when I call stopRecording: function(blobURL) {}, blobURL is "blob:null/" and chrome seems to manage this but when I call getDataURL, Safari throw the error above.

Here is some code :

    const startRecording = document.getElementById('start-recording');
    const stopRecording = document.getElementById('stop-recording');
    let recordAudio;

    //3)
    startRecording.onclick = function() {
        startRecording.disabled = true;
        //4)
        navigator.mediaDevices.getUserMedia({
            audio: true
        }).then(async function(audio) {

        //5)
        recordAudio = RecordRTC(audio, {
            type: 'audio',
        //6)
            mimeType: 'audio/webm',
            sampleRate: 44100,
            // used by StereoAudioRecorder
            // the range 22050 to 96000.
            // let us force 16khz recording:
            desiredSampRate: 16000,

            // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
            // CanvasRecorder, GifRecorder, WhammyRecorder
            recorderType: StereoAudioRecorder,
            // Dialogflow / STT requires mono audio
            numberOfAudioChannels: 1
    });
    recordAudio.startRecording();
    stopRecording.disabled = false;
};
stopRecording.onclick = function() {
// recording stopped
startRecording.disabled = false;
stopRecording.disabled = true;

// stop audio recorder
recordAudio.stopRecording(function() {
    // after stopping the audio, get the audio data
    recordAudio.getDataURL(function(audioDataURL) {
        //2)
        var files = {
            audio: {
                type: recordAudio.getBlob().type || 'audio/wav',
                dataURL: audioDataURL
            }
        };
        // submit the audio file to the server
        // console.log(files.audio.dataURL);
        sendToServer('audio', [files]);
    });
    console.log("recorder stopped");
});
};

I search on internet and find nothing about this .. If you have a solution to make it works on safari, I would be grateful.

Thank you, gma

SandervanL commented 3 weeks ago

Were you able to find a solution to this?