use window.URL.createObjectURL(stream) multible times

Question

I have a SPA build with AngularJS. ater Login i save the Streaming Object in a global variable for Future use (so i have to set the permission just once) I use this StreamingObject at two userstories (for now) Story one: change profile image Story two make a selfie and post it. Everything works fine until i switch from Story one to Story Two. This breaks the Stream.

I wrote this 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?

Answer 1

Solved. i add a ng-if to my directive so the $scope of teh webcam can destroyed safely

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