Camera 在react native（Android）中通过WebRTC访问摄像头的简单示例

我正在尝试将我用JS编写的一个只在Android上的Firefox上运行的增强现实应用程序改编成一个可以在Android或iOS上运行的react原生应用程序。因为我需要摄像头输入，所以我使用react native webrtc（而不是导入我一直使用的html和js，因为我还试图减少帧率延迟）。我一直试图在这里解析演示：

但这个演示应用程序相当复杂，因为它是一个视频聊天室（据我推测）。我只需要访问摄像头并将其作为应用程序的背景。这就是我到目前为止所做的：

import React, { Component } from 'react';
import {
    AppRegistry,
    View,
} from 'react-native';

import {
   RTCPeerConnection,
   RTCMediaStream,
   RTCIceCandidate,
   RTCSessionDescription,
   RTCView,
   MediaStreamTrack,
   getUserMedia,
 } from 'react-native-webrtc';

 let localStream;

 function getLocalStream(isFront, callback) {
     MediaStreamTrack.getSources(sourceInfos => {
     let videoSourceId;
     for (const i = 0; i < sourceInfos.length; i++) {
         const sourceInfo = sourceInfos[i];
         if(sourceInfo.kind == "video" && sourceInfo.facing == (isFront ? "front" :  "back")) {
             videoSourceId = sourceInfo.id;
         }
     }
     getUserMedia({
         audio: false,
         video: {
             mandatory: {
                 minWidth: 500,
                 minHeight: 300,
                 minFrameRate: 30
             },
             facingMode: (isFront ? "user" : "environment"),
             optional: [{ sourceId: sourceInfos.id}]
         }
     }, function(stream) {
         console.log("dddd", stream);
         callback(stream);
         }, logError);
     });
 }

 function logError(error) {
    console.log("logError: ", error);
 }

 let container;

 var CanvasTest = React.createClass({
     getInitialState: function() {
         return {
         isFront: true,
         selfViewSrc: null};
     },
     componentDidMount: function() {
         container = this;
     },
     render() {
         return (
             <View>
                 <RTCView streamURL={this.state.selfViewSrc} />
                 {console.log("this.state: ", this.state)}
                 {getLocalStream(true, function(stream) {
                     //localStream = stream;
                     //container.setState({selfViewSrc: stream.toURL()});
                 })
               }
             </View>
         );
     }
 });

AppRegistry.registerComponent('CanvasTest', () => CanvasTest);

我想我调用函数的位置不对。我希望视图在应用程序启动时加载相机流。我做错了什么

---

在react native中是否有使用WebRTC的更简单示例？

关于

未定义不是对象
可能是因为安装不正确

我建议重新启动新的构建：

删除npm模块：
rm-rf$YourProject/node\u模块/react native webrtc
清理npm缓存：
npm缓存清理
清除渐变生成中间文件或

通过
产品
->
清洁


（这取决于您的环境）

npm安装react native webrtc
仔细地按照文件的步骤进行（/）
请确保对文档授予所有权限，然后重试

在何处执行
getLocalStream（）

在您的情况下，可以在
ComponentDidMount
否则，在某些情况下，应用程序可能会警告您不能在
render（）

（setState（）通常会触发render（），警告是为了防止无限循环。）

建议

我建议您尽可能不要在模拟器上对需要访问大量硬件功能的库进行测试。
Hmm。node_modules/react native中没有webrtc目录，但有一个node_modules/react native webrtc可以解释问题。我最初安装了“react-native-install react-native-webrtc”。我能够按照安卓指令清除原始问题，然后在安卓Studio中进行重建。但是，现在摄像头虽然可以访问，但仍然会出现故障（模拟器有时会崩溃）。因为它解决了最初的问题，所以我会把它标记为已接受。谢谢：-）将getLocalStream调用放入ComponentDidMount修复了崩溃问题（我猜render正在不断被调用）。我应该在第一次学习的时候，阅读并遵循所有的说明。再次感谢。对于需要访问大量硬件功能的库，我建议您尽可能不要在模拟器上测试它。在
node\u module
中错误键入路径的缺点应该是
react native webrtc
。对不起，已经修好了。根据你的反馈，我添加了一些注释，谢谢
E/ReactNativeJS: undefined is not an object (evaluating 'WebRTCModule.mediaStreamTrackGetSources')
E/EGL_emulation: tid 3106: eglSurfaceAttrib(1165): error 0x3009 (EGL_BAD_MATCH)
W/OpenGLRenderer: Failed to set EGL_SWAP_BEHAVIOR on surface 0xa0899300, error=EGL_BAD_MATCH