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.52k stars 1.75k forks source link

How to return stream of 'audio/wav'? #726

Closed foprel closed 3 years ago

foprel commented 3 years ago

I'm trying to generate an 'audio/wav' stream and send it to a python backend. However, when I call ondataavailable, I'm not recieving a blob in 'audio/wav', but a blob with a byte array, which seems to be webm. Is there a way to chop the stream into chunks and receive a blob in wave format every time?

startRecording.onclick = function() {
    startRecording.disabled = true;

    //4)
    navigator.getUserMedia({
        audio: true
    }, function(stream) {

            //5)
            recordAudio = RecordRTC(stream, {
                type: 'audio',

            //6)
                mimeType: 'audio/wav',
                // used by StereoAudioRecorder
                // the range 22050 to 96000.
                // let us force 16khz recording:
                desiredSampRate: 16000,
                // Media  StreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
                // CanvasRecorder, GifRecorder, WhammyRecorder
                ondataavailable: (blob) => {
                    // submit the audio blob to the server
                    socketio.emit('stream_audio', files);
                    console.log("sent files")
                },
                recorderType: StereoAudioRecorder,
                numberOfAudioChannels: 1
        });
        recordAudio.startRecording();
        stopRecording.disabled = false;
    }, function(error) {
        console.error(JSON.stringify(error));
    });
};

I have tried calling getBlob() while streaming, but this returns the following error: RecordRTC.js:257 Blob encoder did not finish its job yet.

geravg commented 3 years ago

Hi @foprel, I am using this piece of code and it works well for me:

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(function (stream) {
        recorder = RecordRTC(stream, {
            type: 'audio',
            mimeType: 'audio/webm',
            sampleRate: 44100,
            recorderType: StereoAudioRecorder,
            numberOfAudioChannels: 1,
            timeSlice: 4000,
            desiredSampRate: 16000,         
            ondataavailable: function(blob) {
                var stream = ss.createStream();

                ss(socket).emit('stream-transcribe', stream, {
                    name: 'stream.wav', 
                    size: blob.size
                });

                ss.createBlobReadStream(blob).pipe(stream);
            }
        });

        recorder.startRecording();
    })
    .catch((err) => console.error('getUserMedia', err));
};

Per documentation, to use ondataavailable you need to include timeSlice as well.

foprel commented 3 years ago

Thanks for your response. You are right, every seems to work when I include timeSlice. It properly returns a blob in 'audio/wav' format too.

I should have read the documentation more carefully. Closing this issue now.