AngularJS + HTML5录制音频文件

Question

我正在寻找一个简单的解决方案来录制音频文件并将其上传到s3.

我的网络搜索找到了:

WebRTC- 实验,这是我能找到的最流行的解决方案.

它在以下链接中也有一个工作示例:https://www.webrtc-experiment.com/RecordRTC/

我还发现了Firefox不支持的ngCamRecorder.

我正在寻找一个简单的解决方案+工作示例和建议.

1. 哪种解决方案最适合AngularJS使用？

2. 如果您可以提供自己的示例或链接到我可以使用的工作示例.

3. 如果您还使用了S3我想知道如何将文件推送到S3,并获得指向控制器的链接.

我找到的解决方案,抛出错误,并包含一个工作示例,而不解释代码本身.我也想知道如何将它推向s3.

这是我从示例中实现的代码:

$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();
    });
};

它只是抛出一个错误:undefined不是recordrtc.js第641行的函数

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

显然mediaStrem为null.

谢谢.

Answer 1

这里有一个AngularJS包装器,它是一个支持HTML5(RecorderJS),Cordova Media和Flash的简单指令.

用法很简单

<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>

您可以在此处查看完整用法:

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

Answer 2

我遇到了同样的问题并解决了。navigation.getUserMedia() 的 success 函数中的函数参数应该是“MediaStream”而不是“mediaStream”。