javascript - use window.URL.createObjectURL(stream) multible times -

i have spa build angularjs. ater login save streaming object in global variable future use (so have set permission once) use streamingobject @ 2 userstories (for now) story one: change profile image story 2 make selfie , post it. works fine until switch story 1 story two. breaks stream.

i wrote directive.

angular.module('myapp')     .controller('webcamctrl', function ($scope, globval) {          var width = 373;             var height = 0;                var streaming = false;           var video = null;         var canvas = null;         $scope.showpicture = false;          $scope.startup = function() {             video = document.getelementbyid('video');             canvas = document.getelementbyid('canvas');             $scope.$watch(function () {                     return globval.webcam;                  }, function() {                     if(globval.webcam !== null){                         video.src = globval.webcam;                         video.play();                     }             });                video.addeventlistener('canplay', function () {                 if (!streaming) {                     height = video.videoheight / (video.videowidth / width);                      if (isnan(height)) {                         height = width / (4 / 3);                     }                      video.setattribute('width', width);                     video.setattribute('height', height);                     canvas.setattribute('width', width);                     canvas.setattribute('height', height);                     streaming = true;                 }             }, false);               $scope.clearphoto();         };           $scope.clearphoto = function() {             var context = canvas.getcontext('2d');             context.fillstyle = '#aaa';             context.fillrect(0, 0, canvas.width, canvas.height);             $scope.showpicture = false;             globval.image = null;         };          $scope.takepicture = function() {             var context = canvas.getcontext('2d');             if(!$scope.showpicture){                 if (width && height) {                     canvas.width = width;                     canvas.height = height;                     context.drawimage(video, 0, 0, width, height);                     $scope.showpicture = true;                     $scope.acceptpicture();                 } else {                     $scope.clearphoto();                 }             }else {                 $scope.clearphoto();             }         };           $scope.acceptpicture = function() {             if($scope.showpicture){                 var data = canvas.todataurl('image/png');                 globval.image = data;             }else{                 globval.image = null;             }         };          $scope.startup();      }); 

any hints?

solved. add ng-if directive $scope of teh webcam can destroyed safely

<web-cam ng-if="showcam"></web-cam