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

【问题标题】：Webcam getUserMedia API - AngularJS bugs?网络摄像头 getUserMedia API - AngularJS 错误？
【发布时间】：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;
    };

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

【问题讨论】：

标签： javascript android angularjs google-chrome webcam

【解决方案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

搜索“后置摄像头”

【讨论】：