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

Get recorded audio when paused #834

Open cjambrosi opened 1 year ago

cjambrosi commented 1 year ago

Is it possible to pause and resume like WhatsApp Web? For example, when I click on the pause button, get the audio recorded so far?

If not, can someone give me an idea how to do it?

damiaanh commented 11 months ago

Yes this is possible using timeSlice to make data available on a certain interval. see this link for more info on this API.

  1. Create a recorder the following options:

    recorderType: MediaStreamRecorder, // need to set this recorderType to pass the timeSlice option.
    timeSlice: 1000, // or another value that you want to make the recording available on.

    i.e.:

    var myRecorder = new RecordRTC(stream, {
            type: "audio",
            recorderType: MediaStreamRecorder,
            mimeType: "audio/webm;codecs=opus",
            timeSlice: 1000,
        });
  2. Since a blob is now created for every second, we have to create one big blob when you pause the recorder:

myRecorder.pauseRecording();
var internal = myRecorder.getInternalRecorder();
if (internal && internal.getArrayOfBlobs) {
        var blob = new Blob(internal.getArrayOfBlobs(), {
            type: "audio",
        });
    }
  1. if needed, create an object url for the blob:
    const myUrl = URL.createObjectURL(blob));

    Based on this great example on handling onDataAvailable with recordRTC.

cjambrosi commented 11 months ago

Excellent! Thank you very much @damiaanh. I'll try here