多次使用 window.URL.createObjectURL(stream)

Question

我有一个 SPA 版本 AngularJS。 ater Login 我将 Streaming Object 保存在一个全局变量中以备将来使用（所以我只需要设置一次权限）我在两个用户故事中使用这个 StreamingObject（目前）故事一：更改个人资料图片故事二自拍 post。一切正常，直到我从故事一切换到故事二。这打破了流。

我写了这个指令。

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();

    });

有什么提示吗？

Answer 1

已解决。我在我的指令中添加了一个 ng-if，这样网络摄像头的 $scope 就可以安全销毁

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

多次使用 window.URL.createObjectURL(stream)

use window.URL.createObjectURL(stream) multible times

javascript

webcam

angularjs