AngularJS + HTML5 录制音频文件答案

【问题标题】：AngularJS + HTML5 record audio fileAngularJS + HTML5 录制音频文件
【发布时间】：2014-11-02 23:29:01
【问题描述】：

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

我的网络搜索出现了：

WebRTC-Experiment 这是我能找到的最流行的解决方案。

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

我还发现了 ngCamRecorder，它还没有被 firefox 支持。

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

哪种解决方案最受 AngularJS 的欢迎？
如果您可以提供自己的示例或链接到我可以使用的工作示例。
如果您也使用过 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 is not a function on recordrtc.js line 641

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

显然 mediaStrem 为空。

谢谢。

【问题讨论】：

标签： javascript html angularjs amazon-s3 audio-recording

【解决方案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

【讨论】：

完全披露：我在这个插件上工作，是从另一个录音项目中分叉出来的。
我正在做的项目是使用带有 browserify 的 npm 而不是 bower。如何将此模块与我的应用程序集成？

【解决方案2】：

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

【讨论】：