我正在开发一个应用程序,需要使用麦克风录制音频并将其发送到后端应用程序(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的性能(没有其他事情可做)吗?还是我错过了创造无限循环的东西?或者我的回调定义有问题?
干杯!
我发现了问题!
那是棱角分明的到Json(outputStream),无需转换对象。