recordRTC to PHP demo, strange audio file

[michelboudali]

Hi Muaz,

I have implemented RecordRTC about 1.5 years ago on a project (audio only) and it was working fine. Today I went back to this project and the recording was not working. I am recording Audio only. I came back to these demos you have online (https://www.webrtc-experiment.com/RecordRTC/PHP/) to see if they are working and to my surprise also the audio/wav only recording is not working. it is playing back some strange file!. I am using Chrome.

Thanks.

[muaz-khan]

Please force StereoAudioRecorder in your own demo:

var audioRecorder = RecordRTC(audioOnlyStream, {
    type: 'audio',
    recorderType: StereoAudioRecorder,
    numberOfAudioChannels: 1,
    bufferSize: 16384
});

[michelboudali]

Hi Muaz,

It looks like I do have that set up

button.recordRTC = RecordRTC(button.stream, { type: 'audio', recorderType: StereoAudioRecorder, bufferSize: typeof params.bufferSize == 'undefined' ? 0 : parseInt(params.bufferSize), sampleRate: typeof params.sampleRate == 'undefined' ? 44100 : parseInt(params.sampleRate), leftChannel: params.leftChannel || false, disableLogs: params.disableLogs || false, // recorderType: webrtcDetectedBrowser === 'edge' ? StereoAudioRecorder : null });

[michelboudali]

Hi Muaz,

I am desperately in need of a solution for this problem. I am not sure where to start since the web App was perfectly working last time I checked it (about 1/2 year ago). I build the App based on the "recordRTC to PHP demo". It only records audio. Where can I start? Should I send you the code that I am using? Should I do some console logging.

Thanks a lot.

[friksa]

I found that I had to use specify the audio codec to make it work:

      var options = {
        type: 'audio',
        mimeType: 'audio/webm',
        disableLogs: true
      };

      if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        options.mimeType = 'audio/ogg';
      }

Hope this helps.

[friksa]

Here is my entire Audio Tuning Wizard that works in Chrome and FireFox:

    atw: function(prefs, div, cbText, cbDone) {
      var me=this, duration=3000, el=null;

      var recorder = null;

      cbText('ATW_SPEAK');

      var onAudio=function() {
        recorder.stopRecording();
        cbText('ATW_PLAY');

        recorder.getDataURL(function(dataURL) {
          el = document.createElement('audio');
          el.autoplay = true;
          el.controls = true;
          el.src = dataURL;

          setTimeout(function() {
            cbDone();
          }, duration);

          if (prefs.selectedSpeaker) {
            el.setSinkId(prefs.selectedSpeaker);
          }
          el.play();
        });
      };

      var onError = function(err) {
        console.log(err);
        gwwebrtc.defaultPrefs.unTrackChannel(el);
        cbDone();
      };

      var mediaConstraints = {
        audio: {
          optional: [{
            sourceId: prefs.selectedMic
          }]
        },
        video: false
      };

      var options = {
        type: 'audio',
        mimeType: 'audio/webm',
        disableLogs: true
      };

      if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        options.mimeType = 'audio/ogg';
      }

      var onMediaSuccess=function(stream) {
        recorder = new RecordRTC(stream, options);
        recorder.setRecordingDuration(duration, onAudio);
        recorder.startRecording();
      };

      navigator.mediaDevices.getUserMedia(mediaConstraints).then(onMediaSuccess, onError);
    },

[michelboudali]

Hi Friska,

I have it set up. My code is below.

When I hit recording, and then listen to the file, it sounds like a very long sound file (i.e. I record 5 seconds), and it actually records almost 15 seconds as if the file was stretched.

recordingDIV.querySelector('button').onclick = function() { var button = this;

if(button.innerHTML === '<i class="fa fa-stop"></i> Stop Recording') {
    $("#OnAir").hide();
    button.disabled = true;
    button.disableStateWaiting = true;
    setTimeout(function() {
        button.disabled = false;
        button.disableStateWaiting = false;
    }, 2 * 1000);

    button.innerHTML = '<i class="fa fa-circle" style="color:red"></i> Start Recording';

    function stopStream() {
        if(button.stream && button.stream.stop) {
            button.stream.stop();
            button.stream = null;
        }
    }

    if(button.recordRTC) {
        if(button.recordRTC.length) {
            button.recordRTC[0].stopRecording(function(url) {
                if(!button.recordRTC[1]) {
                    button.recordingEndedCallback(url);
                    stopStream();
                    return;
                }

                button.recordRTC[1].stopRecording(function(url) {
                    button.recordingEndedCallback(url);
                    stopStream();
                });
            });
        }
        else {
            button.recordRTC.stopRecording(function(url) {
                button.recordingEndedCallback(url);
                stopStream();
            });
        }
    }

    button.recordRTC.getDataURL(function(dataURL) {
        $('<input>').attr({
            type: 'hidden',
            id: 'blobForm',
            name: 'blobForm',
            value: dataURL
        }).appendTo('form');
    });

    return;
} 

$('#recordingButton').tooltip('hide');
$("#myAudio").remove();
button.disabled = true;
$("#OnAir").show();

var commonConfig = {
    onMediaCaptured: function(stream) {
        button.stream = stream;
        if(button.mediaCapturedCallback) {
            button.mediaCapturedCallback();
        }

        button.innerHTML = '<i class="fa fa-stop"></i> Stop Recording';
        button.disabled = false;
    },
    onMediaStopped: function() {
        button.innerHTML = '<i class="fa fa-circle" style="color:red"></i> Start Recording';

        if(!button.disableStateWaiting) {
            button.disabled = false;
        }
    },
    onMediaCapturingFailed: function(error) {
        if(error.name === 'PermissionDeniedError' && !!navigator.mozGetUserMedia) {
            InstallTrigger.install({
                'Foo': {                        
                    URL: 'https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/',
                    toString: function () {
                        return this.URL; 
                    }
                }
            });
        }

        commonConfig.onMediaStopped();
    }
};

captureAudio(commonConfig);

button.mediaCapturedCallback = function() {
        button.recordRTC = RecordRTC(button.stream, {
            type: 'audio',
            mimeType: 'audio/webm',
            recorderType: StereoAudioRecorder,
            bufferSize: typeof params.bufferSize == 'undefined' ? 0 : parseInt(params.bufferSize),
            sampleRate: typeof params.sampleRate == 'undefined' ? 44100 : parseInt(params.sampleRate),
            leftChannel: params.leftChannel || false,
            disableLogs: params.disableLogs || false,
            // recorderType: webrtcDetectedBrowser === 'edge' ? StereoAudioRecorder : null
        });

        // callback fct when recording is done
        button.recordingEndedCallback = function(url) {
            $("#OnAir").hide();
            $("#myAudio").remove();
            $('#recording').append('<audio id="myAudio" src="'+url+'" autoplay controls></audio>');
        };

        button.recordRTC.setRecordingDuration(20 * 1000).onRecordingStopped(function(url) {
            if (button.innerHTML === '<i class="fa fa-stop"></i> Stop Recording' ){ // time elapsed and user did not stop 
                button.innerHTML = '<i class="fa fa-circle" style="color:red"></i> Start Recording'; // stop the recording
                if(!button.disableStateWaiting) {
                    button.disabled = false;
                }
                $('#recordingButton').tooltip('show');
                button.recordingEndedCallback(url);
                button.recordRTC.getDataURL(function(dataURL) {
                    $('<input>').attr({
                        type: 'hidden',
                        id: 'blobForm',
                        name: 'blobForm',
                        value: dataURL
                    }).appendTo('form');
                });                 
            }
        })

        button.recordRTC.startRecording();
 };

 $.ajax({ 
     type: 'POST', 
     url: 'newRecording.php',
     data: {newRecording: 1}, 
 });

};

[friksa]

Sounds like a sampling rate issue... either remove the sample rate or play with the number.

[michelboudali]

Ok friksa so u propose i remove the sample rate declaration when defining RecordRTC?

[friksa]

That's where I would start based on your description. You cannot always change the sampling rate based on the hardware you have. So if you capture at 3 times the rate than playback, a 5 second recording would take 15 seconds to playback.

Otherwise if you get it running in a codepen or something similar, I am happy to take a quick look at it for you.

[michelboudali]

Ok i ll get it running on codepen. The strange thing is it was perfectly working until a couple of days ago when i checked again the app it was not working anymore.

[michelboudali]

Hi Friska,

So I removed setting the sample rate. And now it seems to be working fine on Chrome :). That's already a good step. I am not sure though why it does not work on Firefox.

[friksa]

Use the ogg codec on FireFox

Sent from my iPhone

On Aug 27, 2016, at 4:50 PM, michelboudali notifications@github.com wrote:

Hi Friska,

So I removed setting the sample rate. And now it seems to be working fine on Chrome :). That's already a good step. I am not sure though why it does not work on Firefox.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[muaz-khan]

Maybe fixed.