我如何列出使用angularJS安装在计算机上的所有网络摄像头？

Question

到目前为止，我可以访问我的webcan并显示流式传输并拍摄快照。最后，我要更改另一个摄像头的来源，因此首先我需要列出所有已安装的摄像头，如果可能，请选择另一个来源。关于如何使用angularJS访问和列出所有网络摄像头的任何想法？

到目前为止的代码：

<script>

    /////////////////////////////////////////////

    var getUserMedia = function() {
      if (navigator.getUserMedia) return navigator.getUserMedia;
      else if (navigator.webkitGetUserMedia) return navigator.webkitGetUserMedia;
      else if (navigator.mozGetUserMedia) return navigator.mozGetUserMedia;
      else if (navigator.msGetUserMedia) return navigator.msGetUserMedia;
      else return undefined;
    }

    //console.log(getUserMedia());

    /////////////////////////////////////////////

    angular.module('app')
    .factory('CameraService', function($window) {
      var hasUserMedia = function() {
        return !!getUserMedia();
      }

      var getUserMedia = function() {
        navigator.getUserMedia = ($window.navigator.getUserMedia || 
                                  $window.navigator.webkitGetUserMedia ||
                                  $window.navigator.mozGetUserMedia || 
                                  $window.navigator.msGetUserMedia);
        return navigator.getUserMedia;
      }

      return {
        hasUserMedia: hasUserMedia(),
        getUserMedia: getUserMedia
      }
    })

    ////////////////////////////////////////////

    angular.module('app')
    .controller('CameraController', function($scope, CameraService) {
      $scope.hasUserMedia = CameraService.hasUserMedia;
    })

    ////////////////////////////////////////////

    angular.module('app')
    .directive('camera', function(CameraService) {
      return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: {},
        controller: function($scope, $q, $timeout) {
            this.takeSnapshot = function() {
                var canvas  = document.querySelector('canvas'),
                    ctx     = canvas.getContext('2d'),
                    videoElement = document.querySelector('video'),
                    d       = $q.defer();

                canvas.width = $scope.w;
                canvas.height = $scope.h;

                $timeout(function() {
                  ctx.fillRect(0, 0, $scope.w, $scope.h);
                  ctx.drawImage(videoElement, 0, 0, $scope.w, $scope.h);
                  d.resolve(canvas.toDataURL());
                }, 0);
                return d.promise;
            }
        },

        template: '<div class="camera"><video class="camera" my-stream config="config" autoplay="" /><div ng-transclude></div><canvas></div>',
        link: function(scope, ele, attrs) {
          var w = attrs.width || 640,
              h = attrs.height || 480;

          if (!CameraService.hasUserMedia) return;
          var userMedia = CameraService.getUserMedia(),
              videoElement = document.querySelector('video');
          var onSuccess = function(stream) {
          if (navigator.mozGetUserMedia) {
            videoElement.mozSrcObject = stream;
          } else {
            var vendorURL = window.URL || window.webkitURL;
            videoElement.src = window.URL.createObjectURL(stream);
          }
          // Just to make sure it autoplays
          videoElement.play();
        }
        // If there is an error
        var onFailure = function(err) {
          console.error(err);
        }
        // Make the request for the media
        navigator.getUserMedia({
          video: {
            mandatory: {
              maxHeight: h,
              maxWidth: w
            }
          }, 
          audio: true
        }, onSuccess, onFailure);

        scope.w = w;
        scope.h = h;
        }
      }
    });

    angular.module('app').directive('cameraControlSnapshot', function() {
        return {
        restrict: 'EA',
        require: '^camera',
        scope: true,
        template: '<a class="btn btn-info" ng-click="takeSnapshot()">Take snapshot</a>',
        link: function(scope, ele, attrs, cameraCtrl) {
          scope.takeSnapshot = function() {
            cameraCtrl.takeSnapshot()
            .then(function(image) {
              // data image here
            });
          }
        }
      }
    })

</script>

在HTML中

<body ng-app="app">

<a class="btn btn-info" ng-click="enabled=!enabled">Camera</a>
<!-- ngIf: enabled -->
<div class="camera ng-scope ng-isolate-scope" ng-if="enabled">
<!--camera></camera-->
    <camera>
        <camera-control-snapshot></camera-control-snapshot>
    </camera>
</div><!-- end ngIf: enabled --><!-- end ngIf: enabled --><!-- end ngIf: enabled -->

</body>

Answer 1

您使用的API错误。使用Google，我发现了MDN documentation for Navigator.enumerateDevices。该文档适用于较新的mediaDevices对象，但是暂时可能在Navigator对象上可用。您必须检查该属性是否存在。根据文档，您应该能够过滤函数调用返回的数组。

对于Angular，一旦获得此信息，就如同ng-repeat一样简单。