使用 $resource 发送音频数据（base64）

Question

我正在开发一个需要使用麦克风录制音频并将其发送到后端应用程序（tomcat 服务器）的应用程序。

似乎发送太大的流会使 angular 发疯并冻结我的浏览器。

为了录制我的音频文件，我使用了本机函数 RecorderWorkerFactory.getUserMedia()，它允许我获取 RecordBlob 对象。

之后，仍然在 Angular 中，我提取了 base64 编码中的音频内容，并使用 $resource 将其发送到后端应用程序。后端应用程序正确接收数据并处理它，但此调用的回调永远不会执行，因为 Firefox 检测到无限循环并冻结。

但是，如果我保留运行程序，很长时间后页面刷新将通过。

这是我将音频内容提取到 base64 字符串中并发送的代码：

var blob = $scope.audio.recordBlob;
if (blob) {
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
        $scope.audioContent = reader.result;
        $scope.sendMessage();
    }
}

$scope.sendMessage = function(){
    var outputStream = {
                      "audio": $scope.audioContent
                     };
    $scope.sendIM(outputStream);
}

这里我通过 POST 发送 outputStream 到后面，在回调中我启动 loadData() 函数重新加载我的看法。

services.FileCreation= $resource(URI_SERVICE_CREATION, {}, {
    'post' : urlEncodedFormPost
});


$scope.sendIM = function(fluxSortie) {
  $services.FileCreation.post(angular.toJson(outputStream)).$promise.then(function(result){ 
        $scope.loadData();
    });
}

这是创建音频文件的 Java 代码：

private void createAudioFile(File file, byte[] content) throws IOException {
    FileOutputStream stream = null;
    try {
        stream = new FileOutputStream(file.getPath());
        IOUtils.write(content, stream);
    } catch (IOException e) {
        LOGGER.debug("creation failed");
    } finally {
        if (stream != null) {
            stream.flush();
            stream.close();
        }
    }
}

其中content是发送的base64字符串的转换

经过研究，我发现无限循环在名为 shallowClearAndCopy() 的本机 Angular 函数中，该函数发生在 Java 执行之后但就在执行之前回调。在此函数中，代码显然将音频字符串（base64 编码）的每个字符转换为一个对象属性，并对它们进行循环以删除它们。但这导致了 Firefox 认为是无限循环的非常长的处理。

function shallowClearAndCopy(src, dst) {
  dst = dst || {};

  angular.forEach(dst, function(value, key) { // This is where it freezes, as dst contains all my base64 encoded data and iterate over each character of it (which is veeeeeery long !)
    delete dst[key];
  });

  for (var key in src) {
    if (src.hasOwnProperty(key) && !(key.charAt(0) === '$' && key.charAt(1) === '$')) {
      dst[key] = src[key];
    }
  }

  return dst;
}

是不是因为angularjs的性能问题（没别的办法了）？还是我遗漏了一些会造成无限循环的东西？还是我的回调定义有问题？

干杯！

Answer 1

找到了，问题！

是 angular.toJson(outputStream) 在不需要的情况下转换了对象。

使用 $resource 发送音频数据（base64）

Sending audio data (base64) using $resource

javascript

java

audio

angularjs

angular-resource