Angulaire $ sce bloquant mon blob src audio

Je suis en train d'utiliser angulaire ngRepeat avec la balise html5 audio.
J'ai le code html:

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

et le js:

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

Mais angulaire de la même origine, la vérification est à l'origine d'une erreur sur l'interpolation:

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

Cela semble tout simplement ridicule. Ce n'est pas l'interpolation d'une ressource locale. J'imagine qu'il y a une façon de le faire correctement - ou dois-je soumettre un rapport de bug?

source d'informationauteur Stevo

  1. 20

    J'ai le même problème quand j'essaie d'afficher une goutte src pour webrtc vidéo avant, et je l'ai corrigé en utilisant $sce service:

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

    Vous pouvez également de vérifier la doc ici.

  2. 4

    Pour moi qui suit a résolu le problème:

    $sce.trustAsResourceUrl

    voir DONC, la question, avec des explications plus détaillées ici

  3. 1

    Face à un problème similaire avec mon blob images... Essayez ceci:

    Fondamentalement, il permet tout de blob image 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. 0

    Meilleure façon de résoudre ce problème est de créer une confiance filtre.

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

    Et Utilisez ce filtre en ng-src.

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

  5. 0

    Lors de l'obtention de l'objet blob à partir d'un lecteur de fichier, vous pourriez avoir à ajouter $scope.$apply() pour déclencher l'horlogerie et de la lier en conséquence.

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