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

Posted 2023-05-07

【中文标题】网络摄像头 getUserMedia API - AngularJS 错误？

【英文标题】：Webcam getUserMedia API - AngularJS bugs?

【发布时间】：2014-10-28 00:24:31

【问题描述】：

我已经完成了一个使用 AngularJS 中的服务的网络摄像头指令。我用过这个例子：

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

当我在平板电脑中尝试该示例时，它运行良好，但是当我在平板电脑（谷歌浏览器）中启动我的代码时，它给了我一些错误。

错误 #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;
    ;

在我的笔记本电脑上这很好用，虽然我只能用一个视频源进行测试（因为它只有一个）。

【参考方案1】：

通过在 readyState 为 4 之前不执行 videoStream.play() 解决了错误 #2。

Bug #1 通过将窗口移入指令而不使用服务来解决。然后在 initCamera 函数中调用如下代码：

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

【参考方案2】：

对于 Bug #1，您可以在调用 getUserMedia 时通过在约束对象中指定后置摄像头来使用它

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

在此处查看详细信息： https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

搜索“后置摄像头”