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
Comments
Post a Comment