Question

我已经完成了一个使用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;
    };

在我的笔记本电脑上工作正常，但我只能测试一个视频源（因为它只有一个）。

Answer 1

Bug＃2通过不执行videoStream.play（）解决，直到它的readyState为4。

通过将窗口移入指令并且不使用该服务来解决错误＃1。然后在initCamera函数中调用以下代码：

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

Answer 2

对于Bug＃1，您可以在调用getUserMedia

时通过在约束对象中指定它来使用后置摄像头

navigator.mediaDevices.getUserMedia({ 
    audio: true, 
    video: { 
        facingMode: { exact: "environment" }
    }
})

详情请见： https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

搜索“后置摄像头”

网络摄像头getUserMedia API - AngularJS错误？

2 个答案: