React-Native [TypeError: null不是对象(计算'WebRTCModule.enumerateDevices')]

Question

我对webrtc使用了react native，并且我一直得到mediaDevices.enumerateDevices()是null对象。

这是代码的一部分：

          let vv = mediaDevices.enumerateDevices();

        console.log(vv);

        mediaDevices.enumerateDevices().then(sourceInfos => {
          console.log(sourceInfos);
          let videoSourceId;
          for (let i = 0; i < sourceInfos.length; i++) {
            const sourceInfo = sourceInfos[i];
            if(sourceInfo.kind == "videoinput" && sourceInfo.facing == (isFront ? "front" : "environment")) {
              videoSourceId = sourceInfo.deviceId;
            }
          }
          mediaDevices.getUserMedia({
            audio: true,
            video: {
              width: 640,
              height: 480,
              frameRate: 30,
              facingMode: (isFront ? "user" : "environment"),
              deviceId: videoSourceId
            }
          })
          .then(stream => {
            console.log(stream);
            // Got stream!
          })
          .catch(error => {
            // Log error
          });
        });
        
      }

这是变量"vv“中的输出

Promise {
   "_1": 0,
   "_U": 0,
   "_V": 2,
   "_W": [TypeError: null is not an object (evaluating 'WebRTCModule.enumerateDevices')],
   "_X": null,
}

这是完整的堆栈跟踪：

                [Unhandled promise rejection: TypeError: null is not an object (evaluating 'WebRTCModule.enumerateDevices')]
            at node_modules\react-native-webrtc\MediaDevices.js:24:27 in Promise$argument_0
            at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
            at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
            at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
            at node_modules\react-native-webrtc\MediaDevices.js:23:4 in enumerateDevices
            at http://192.168.1.107:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&minify=false:133898:65 
            in componentDidMount
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15688:12 in commitLifeCycles        
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl  
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback      
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18483:29 in commitRootImpl
            at [native code]:null in commitRootImpl
            at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18317:17 in commitRoot
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot   
            at [native code]:null in performSyncWorkOnRoot
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
            at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber   
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20527:14 in updateContainer
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21068:17 in render
            at node_modules\react-native\Libraries\ReactNative\renderApplication.js:54:4 in renderApplication
            at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
            at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:213:4 in runApplication
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
            at [native code]:null in callFunctionReturnFlushedQueue

            [Unhandled promise rejection: TypeError: null is not an object (evaluating 'WebRTCModule.enumerateDevices')]
            at node_modules\react-native-webrtc\MediaDevices.js:24:27 in Promise$argument_0
            at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
            at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
            at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
            at node_modules\react-native-webrtc\MediaDevices.js:23:4 in enumerateDevices
            at http://192.168.1.107:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&minify=false:133902:56 
            in componentDidMount
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15688:12 in commitLifeCycles        
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects     
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl  
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback      
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18483:29 in commitRootImpl
            at [native code]:null in commitRootImpl
            at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18317:17 in commitRoot
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot   
            at [native code]:null in performSyncWorkOnRoot
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
            at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue   
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20527:14 in updateContainer
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21068:17 in render
            at node_modules\react-native\Libraries\ReactNative\renderApplication.js:54:4 in renderApplication
            at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
            at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:213:4 in runApplication
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl  
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback      
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18483:29 in commitRootImpl
            at [native code]:null in commitRootImpl
            at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18317:17 in commitRoot
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot   
            at [native code]:null in performSyncWorkOnRoot
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
            at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue   
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber   
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20527:14 in updateContainer
            at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21068:17 in render
            at node_modules\react-native\Libraries\ReactNative\renderApplication.js:54:4 in renderApplication
            at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
            at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:213:4 in runApplication
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
            at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
            at [native code]:null in callFunctionReturnFlushedQueue

我甚至使用真实的设备来做这件事，那么为什么我一直收到这个错误呢？

Answer 1

您必须首先请求访问输入和输出设备的许可，然后运行enumerateDevices()

​

(async () => {   
  await navigator.mediaDevices.getUserMedia({
            audio: true,
            video: {
              width: 640,
              height: 480,
              frameRate: 30,
              facingMode: (isFront ? "user" : "environment"),
              deviceId: videoSourceId
            }
          });   
  let devices = await navigator.mediaDevices.enumerateDevices();   
  console.log(devices); 
})();

​