Angular $sce, блокирующий мой звук blob src

Я пытаюсь использовать angular ngRepeat с тегом html5 audio. У меня есть html:

    <li ng-repeat="recordings in recordinglist">
        <audio controls ng-src="{{recordings}}"></audio>
   </li>

и js:

    $scope.$apply($scope.recordinglist.push("blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727"));

Но angular такая же проверка происхождения вызывает ошибку при интерполяции:

Error: [$interpolate:interr] Can't interpolate: {{recordings}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727

Это просто кажется глупым. Это не интерполирует локальный ресурс. Я предполагаю, что есть способ сделать это правильно - или я должен подать отчет об ошибке?

Ответ 1

У меня такая же проблема при попытке отобразить blob src для видео webrtc раньше, и я исправил его с помощью службы $sce:

angular.module('moduleName', ['ngSanitize'])
.controller('ctrName', ['$sce', function($sce) {
  $scope.recordings = $sce.trustAsResourceUrl(recordings);
}])

Вы также можете проверить документ здесь.

Ответ 2

Для меня следующее решение проблемы:

$sce.trustAsResourceUrl

см. вопрос SO с более подробным объяснением здесь

Ответ 3

Столкнувшись с аналогичной проблемой с моими изображениями blob... Попробуйте следующее:

В принципе, это позволяет любое изображение в блоке src

app.config( ['$compileProvider', function($compileProvider){   
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob):/);

  // another sample to allow diffrent kinds of url in <a>
  // $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto):/);
}]);

Ответ 4

Лучший способ решить эту проблему - создать надежный фильтр.

app.filter('trusted', ['$sce', function ($sce) {
return function(url) {
    return $sce.trustAsResourceUrl(url);
};}]);

И используйте этот фильтр в ng-src.

<li ng-repeat="recordings in recordinglist">
    <audio controls ng-src="{{recordings |trusted}}"></audio></li>

Ответ 5

При получении блоба из устройства чтения файлов вам может потребоваться добавить $scope.$apply(), чтобы вызвать часы и привязать их соответственно.

InitRecording = function() {
    var reader = new FileReader();
    reader.onload = function() {
        audioSRC = $sce.trustAsResourceUrl(reader.result);
        $scope.$apply();
    };
    reader.readAsDataURL(recordedBlob);
}