getUserMedia MediaRecorder Data missing

Question

I am trying to record audio in my Angular project. For this I am using the MediaStream Recording API (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API).

It does record my audio input and I am able to download the audio file based on the type I am giving it. For this I am using this bit of code.

navigator.mediaDevices.getUserMedia({audio: true, video: false})
    .then(stream => {
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();

      mediaRecorder.ondataavailable = event => {
        audioChunks.push(event.data);
        this.translate(audioChunks);
      };

      this.stopRecording = setTimeout(async() => {
        await mediaRecorder.stop();
      }, 5000);
    });

    blob = new Blob(audio, { 'type' : 'audio/x-flac; rate=44100;  codecs=opus' });
    url = window.URL.createObjectURL(blob);

After that I am sending the data as byteArray to my REST API and send this to the Google Speech API v2 using (https://www.google.com/speech-api/v2/recognize?)

Now this works when I create an audio file myself, but when I use the MediaRecorder the response I get is empty. Now I checked the audio files properties and see that some properties are missing (audio length and bitrate). Besides the properties I do hear the audio of these files.

Is there some way I can add these properties or is there a better API I can use for this?

Answer 1

working on a similar case, and having the same empty response from the speech API

can you verify you do have something in the blob object you create? I use the onstop to create the blob then converting it to base64 and passing to the request. ( split and leave out the first part that is the header )

    mediaRecorder.onstop = (e) => {
                    const blob = chunks[0];//new Blob(chunks, { 'type': 'audio/webm;codec=opus' });
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onloadend = () => {
                        const base64data = reader.result;
                        console.info('sending request to gcloud');
                        expect(base64data).to.exist;

                        gCloudRequest(base64data.split(',')[1])

Answer 2

I encountered a similar issue.

First, add an error handler

mediaRecorder.onerror = console.warn.bind(console, 'mediaRecorder error');

When you get an actual error, it might be the same as mine: "Video encoding failed.".

Then try to pass whatever options.mimeType you like. One, different from a default one will hopefully work.