AngularJS + HTML5 record audio file

Question

I'm looking for a simple solution to record audio file and upload it to s3.

My web searches come up to find:

WebRTC-Experiment which is the most popuplar solution i could find.

it also have a working example in the following link : https://www.webrtc-experiment.com/RecordRTC/

I also found ngCamRecorder which wasn't supported by firefox yet.

I'm looking for a simple solution + working example, and suggestion.

Which solution is most popuplar to use with AngularJS?
if you can provide your own example or link to a working example that i can use.
if you also used S3 i would like to know how you can push the file to S3, and get the link to the controller.

The solution i found, throw error, and include a working example without the code itself explained. I also would like to know how to push it to s3.

This is the code i implemented from the example:

$scope.start_recording = function()
{
    navigator.getUserMedia(session, function (mediaStream) {
        window.recordRTC = RecordRTC(MediaStream);
        recordRTC.startRecording();
    }, function(error){console.log(error)});
};

$scope.stop_recording = function()
{
    navigator.getUserMedia({audio: true}, function(mediaStream) {
        window.recordRTC = RecordRTC(MediaStream);
        recordRTC.startRecording();
    });
};

It simply throw an error: undefined is not a function on recordrtc.js line 641

  if(!mediaStream.getAudioTracks().length) throw 'Your stream has no audio tracks.';

obviously mediaStrem is null.

Thanks.

tlogbon · Accepted Answer · 2015-10-20 17:34:37Z

6

There's an AngularJS wrapper for this, it's a simple directive that supports HTML5 (RecorderJS), Cordova Media and Flash.

Usage is straightforward

<ng-audio-recorder audio-model="someModel" auto-start="false">
   <!-- controls -->
   <button ng-click='recorder.startRecording()'>Start</button>
   <button ng-click='recorder.stopRecording()'>Stop</button>
</ng-audio-recorder>

You can see the full usage here:

https://github.com/logbon72/angular-recorder

answered Oct 20, 2015 at 17:34

tlogbon

1,31213 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tlogbon Over a year ago

Full Disclosure: I worked on this plugin, I forked it from another recording project.

Mandeep Singh Over a year ago

The project I am working on is using npm with browserify instead of bower. How can I integrate this module with my app ?

ranjithnori · Accepted Answer · 2015-04-14 00:24:18Z

0

I got the same issue and figured it out. The function argument in the success function of navigation.getUserMedia() is supposed to be "MediaStream" instead of "mediaStream".

answered Apr 14, 2015 at 0:24

ranjithnori

1813 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS + HTML5 record audio file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related