Stevo Stevo - 1 month ago 18
Javascript Question

Angular $sce blocking my audio blob src

I am trying to use angular ngRepeat with the html5 audio tag.
I have the html:

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


and the js:

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


But angular's same origin checking is causing an error to be thrown on 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


This just seems silly. It's not interpolating a local resource. I imagine there's a way to do this correctly - or should I file a bug report?

Answer

I have the same problem when trying to display a blob src for webrtc video before, and I fixed it by using $sce service:

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

You may also check the doc here. http://docs.angularjs.org/api/ng.$sce

Comments