網絡攝像頭getUserMedia API - AngularJS錯誤？

我已經完成了一個在AngularJS中使用服務的webcam指令。我用這個例子：網絡攝像頭getUserMedia API - AngularJS錯誤？

https://simpl.info/getusermedia/sources/

當我嘗試在我的平板電腦，它工作正常，但是當我在平板電腦（谷歌瀏覽器）開始我的代碼，它給了我一對夫婦的錯誤的例子。

Bug＃1：我無法讓後置攝像頭工作。

錯誤＃2：當我啓動攝像機指令時，它只顯示流的第一幀，然後暫停。雖然，當我翻轉到後置攝像頭（不起作用），然後向後翻轉時，它會給我流。

任何人有任何想法，我可能做錯了什麼？我嘗試了很多東西。

網絡攝像頭指令：

link: function postLink($scope, element) { 

    var videoSources = []; 

    MediaStreamTrack.getSources(function(mediaSources) { 

     for (var i = 0; i < mediaSources.length; i++) 
     { 
     if (mediaSources[i].kind == 'video') 
     { 
      videoSources.push(mediaSources[i].id); 
     } 
     } 

     if (videoSources.length > 1){ $scope.$emit('multipleVideoSources'); } 

     initCamera(0); 

    }); 

    // Elements 
    var videoElement = element.find('video')[0]; 

    // Stream 
    function streaming(stream) { 
     $scope.$apply(function(){ 
     videoElement.src = stream; 
     videoElement.play(); 
     }); 
    } 

    // Check ready state 
    function checkReadyState(){ 
     if (videoElement.readyState == 4) 
     { 
     $interval.cancel(interval); 
     $scope.$emit('videoStreaming'); 
     } 
    } 
    var interval = $interval(checkReadyState, 1000); 

    // Init 
    $scope.$on('init', function(event, stream){ 
     streaming(stream); 
    }); 

    // Switch camera 
    $scope.$on('switchCamera', function(event, cameraIndex){ 
     initCamera(cameraIndex); 
    }); 

    // Init via Service 
    function initCamera(cameraIndex) 
    { 
     var constraints = { 
     audio: false, 
     video: { 
      optional: [{ sourceId: videoSources[cameraIndex] }] 
     } 
     }; 

     camera.setup(constraints, camera.onSuccess, camera.onError); 
    } 

    }

攝像機服務：

.service('camera', function($rootScope) { 

    // Setup of stream 
    this.init = false; 

    this.onError = function(error){ 
     console.log(error); 
     alert('Camera error'); 
    }; 

    this.onSuccess = function(stream){ 
     window.stream = stream; 
     stream = window.URL.createObjectURL(stream); 

     $rootScope.$broadcast('init', stream); 
    }; 

    this.setup = function(constraint){ 
     navigator.getMedia(constraint, this.onSuccess, this.onError); 
     this.init = true; 
    };

在我的筆記本電腦能正常工作，但我只能用一個視頻源測試（因爲它只有一個）。

來源

2014-09-03 Marc

錯誤＃2所解決不做videoStream.play（），直到它具有4.

錯誤＃1通過在該指令移動窗口，而不是使用該服務解決的readyState的。然後在initCamera函數內調用以下代碼：

if (!!window.stream) { 
    videoElement.src = null; 
    window.stream.stop(); 
}

來源

2014-09-05 15:15:35 Marc

網絡攝像頭getUserMedia API - AngularJS錯誤？

回答

相關問題