navigator.mediaDevices 仅在 AngularJs 控制器中未定义

Question

我正在尝试访问 AngularJs 控制器内的 javasctipt mediaDevices 这是我的控制器代码：

(function () {
    'use strict';

    angular.module('app')
        .controller('AssistenzaCtrl', ['$scope', 'largeTabController', 'readSelect', '$mdDialog', '$interval', '$http', '$window', AssistenzaCtrl])

    function AssistenzaCtrl($scope, largeTabController, readSelect, $mdDialog, $interval, $http, $window ) {

        $scope.init = function () {
            if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
              console.log("enumerateDevices() not supported.");
            } 
            navigator.mediaDevices.enumerateDevices()
            .then(function(devices) {
              devices.forEach(function(device) {
                console.log(device.kind + ": " + device.label +
                            " id = " + device.deviceId);
              });
            })
            .catch(function(err) {
              console.log(err.name + ": " + err.message);
            });             
        }   
    }
})();

如果我使用 F12 工具测试我的控制器 navigator.mediaDevices 是未定义的，但我的浏览器支持 mediaDevices 因为如果我运行在没有 AngularJs 的独立页面中使用相同的代码我可以成功枚举我的设备。

AngularJs 和 getUserMedia() 之间是否存在兼容性问题？

Answer 1

此问题与使用 http 协议而非 https 协议有关。浏览器仅为 https 或与本地主机的连接启用 getUserMedia。

希望这个回答能对大家有所帮助。

navigator.mediaDevices 仅在 AngularJs 控制器中未定义

navigator.mediaDevices is Undefined only In an AngularJs Contraller

angularjs

getusermedia