Question

我正在尝试调整我在JS中编写的增强现实应用程序，该应用程序仅适用于Android上的Firefox，可以在Android或iOS中运行。由于我需要摄像头输入，我使用react-native-webrtc（而不是导入我一直在使用的html和js，因为我也试图减少帧速率滞后）。我一直在尝试解析这个演示：

https://github.com/oney/RCTWebRTCDemo/blob/master/main.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);

在尝试调用getLocalStream函数之前，一切正常。我得到该行的“未定义不是对象”错误。（我已经注释掉了回调中的线条，看它们是否导致问题，但它们不是。）

这是我在Android Studio中从控制台获得的内容：

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

我想我在错误的地方调用了这个函数。我希望视图在应用程序启动时加载相机流。我做错了什么？

在本地使用WebRTC的某个地方是否有一个更简单的例子？

Answer 1

关于undefined is not an object 可能是因为没有正确安装它。

我建议重新开始重新构建：

删除npm模块：rm -rf $YourProject/node_modules/react-native-webrtc
clean npm cache：npm cache clean
清除gradle构建中间文件或
Product清除xocde项目 - ＆gt; clean
（这取决于你的环境）
npm install react-native-webrtc
请仔细按照文档的步骤（Android / iOS）

确保在文档上提供所有权限，然后再试一次。

执行地点getLocalStream()

在您的情况下，您可以在ComponentDidMount中执行它否则，在某些情况下，应用可能会警告您setState()无法render()

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

<强>建议

我建议你不要在模拟器上对需要访问大量硬件功能的库进行测试。

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

1 个答案: