Question

我有一个使用AngularJS的SPA版本。登录我将Streaming Object保存在一个全局变量中供将来使用（所以我必须只设置一次权限）我在两个用户处使用此StreamingObject（暂时）故事一：更改个人资料图片故事二进行自拍并发布。一切正常，直到我从故事一切换到故事二。这打破了流。

我写了这个指令。

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到我的指令，所以teh网络摄像头的范围可以安全地销毁

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

使用window.URL.createObjectURL（流）多次

1 个答案: