在React Native中访问摄像头

问题描述 投票：2回答：2

TL; DR：不适用于IOS10模拟器。然而，IOS9似乎很好。

我一直在尝试实施L Wansbrough的react-native-camera模块，每个人似乎都在推荐。经过10个小时的失败后，我真的需要一些帮助。

我放弃了尝试将其纳入我现有的项目，所以现在我只是想在一个全新的领域从头开始。这就是我正在做的事情：

react-native init cameraProject

好的，新项目制作完成。让我们确保版本是正确的：

react-native -v

我得到react-native-cli: 1.0.0 react-native: 0.36.0返回。只是为了完全检查要求：

java -version

返回：java版本“1.8.0_112”Java（TM）SE运行时环境（版本1.8.0_112-b16）Java HotSpot（TM）64位服务器VM（版本25.112-b16，混合模式）

因此要求看起来很稳固。现在：

react-native run-ios

成功 - 应用程序在模拟器中运行，一切正常。现在我尝试按照文档安装react-native-camera。首先，我的模拟器正在运行的iOS10有一个新的需求部分。您需要将有关摄像头的隐私密钥添加到Info.plist文件中。这似乎已从源代码的示例Info文件中省略，并且文档没有所需的代码。我挖了一下并将以下内容添加到cameraProject/ios/cameraProject/Info.plist：

<key>NSPhotoLibraryUsageDescription</key>
<string>Going to use some photos</string>

这是在列表中按字母顺序添加的，在第25行附近。刷新模拟器，这一切都很好。下一个：

npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save

其次是：

react-native link react-native-camera

完善;我得到了我期望的消息：

rnpm-install info Linking react-native-camera android dependency 
rnpm-install info Android module react-native-camera has been successfully linked 
rnpm-install info Linking react-native-camera ios dependency 
rnpm-install info iOS module react-native-camera has been successfully linked

一切仍然有效。在“使用”部分。我要将代码从GitHub复制并粘贴到一个名为BadInstagramCloneApp.js的模块中。然后我将它导入到带有基本import BadInstagramCloneApp from './BadInstagramCloneApp';的index.ios.js中，我们将它与<BadInstagramCloneApp />一起粘贴在主体中。

刷新模拟器：Error

好吧，所以退出模拟器，关闭终端并重新运行react-native run-ios因为我认为应该重建。它仍然不起作用，抛出：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.  Check the render method of 'cameraProject'.

我已经加载了Xcode并查看了链接文件的手册说明。我的库文件夹已经有了RCTCamera.xcodeproj文件。它也已经在cameraProject-> Build Phases-> Link Binary with Libraries部分得到了libRCTCamera.a。标题搜索路径中包含正确的项目，并且根据说明标记为“递归”。然后CMD + R来运行项目。新的模拟器加载，看起来它会工作，然后用相同的红色屏幕摔倒。退出Xcode，再次从终端运行react-native run-ios（说构建成功），它仍然给出与上面相同的错误。

我已经尝试了我能想到的每一种排列。我已经尝试从示例文件中复制代码，我已经尝试了该模块的旧版本，我已经在线阅读了几个应该启动react-native-camera的教程。除了红色屏幕或应用程序崩溃之外，我尝试过的任何事情都没有结束。

建议？我想要做的就是允许用户拍摄照片，然后将该照片作为Base64编码对象返回。

index.ios.js

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

import BadInstagramCloneApp from './BadInstagramCloneApp';

export default class cameraProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BadInstagramCloneApp />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

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

BadInstagramCloneApp.js

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';
import Camera from 'react-native-camera';

class BadInstagramCloneApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}>
          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
        </Camera>
      </View>
    );
  }

  takePicture() {
    this.camera.capture()
      .then((data) => console.log(data))
      .catch(err => console.error(err));
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  }
});

// AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
// AppRegistry.registerComponent('cameraProject', () => BadInstagramCloneApp);
module.exports = (BadInstagramCloneApp);

然后console.log抛出这个：

ExceptionsManager.js:62Cannot read property 'Aspect' of undefinedhandleException @ ExceptionsManager.js:62handleError @ InitializeJavaScriptAppEngine.js:120reportFatalError @ error-guard.js:30guardedLoadModule @ require.js:60_require @ require.js:49(anonymous function) @ require-0.js:1executeApplicationScript @ debuggerWorker.js:20onmessage @ debuggerWorker.js:38
RCTLog.js:38Running application cameraProject ({
    initialProps =     {
    };
    rootTag = 1;
})
ExceptionsManager.js:62Module AppRegistry is not a registered callable module (calling runApplication)handleException @ ExceptionsManager.js:62handleError @ InitializeJavaScriptAppEngine.js:120reportFatalError @ error-guard.js:30guard @ MessageQueue.js:48callFunctionReturnFlushedQueue @ MessageQueue.js:107onmessage @ debuggerWorker.js:44
ExceptionsManager.js:82Unhandled JS Exception: Cannot read property 'Aspect' of undefinedreactConsoleError @ ExceptionsManager.js:82logIfNoNativeHook @ RCTLog.js:38__callFunction @ MessageQueue.js:236(anonymous function) @ MessageQueue.js:108guard @ MessageQueue.js:46callFunctionReturnFlushedQueue @ MessageQueue.js:107onmessage @ debuggerWorker.js:44
ExceptionsManager.js:82Unhandled JS Exception: Module AppRegistry is not a registered callable module (calling runApplication)

如果我退出所有内容，重新加载，使用react-native run-ios重建，那么项目正确构建，但在显示初始屏幕后崩溃。控制台不会记录任何错误，但如果我从开发工具中选择“暂停所有捕获的异常”，则会在此处显示停止：

**_nodeUtil.js**
/** Used to access faster Node.js helpers. */
var nodeUtil = (function() {
  try {
    return freeProcess && freeProcess.binding('util');
  } catch (e) {}
}());

如果我尝试从Xcode而不是Terminal运行，那么它会正确构建，模拟器启动，但在Xcode中它会打开cameraProject-> Libraries-> RCTCamera.xcodeproj-> RCTCameraManager.m并突出显示第988行：

[self.session commitConfiguration]; <Thread 1: EXC_BAD_ACCESS (code=1, address=0x50)

有什么想法吗？

reactjs react-native react-native-camera
2个回答
0
投票

我正在处理一个与我正在进行的项目有同样的问题。根据this gitHub issue，问题是新的iOS 10相机权限的组合，也可能是模拟器相机支持本身的问题。我发现如果我直接在XCode中打开xcodeproj文件，模拟器打开就可以了。我仍然没有找到永久修复，但是从XCode而不是react-native run-ios运行构建绕过了我的问题。如果我找到更好的选择，我会跟进。

0
投票

如果我退出所有内容，使用react-native run-ios重新加载，重建，那么项目会正确构建，但在显示初始屏幕后会崩溃。控制台不会记录任何错误，但如果我从开发工具中选择“暂停所有捕获的异常”，则会在此处显示停止：

_nodeUtil.js

用于访问更快的Node.js帮助程序。

var nodeUtil = (function() {   
    try {
      return freeProcess && freeProcess.binding('util');   
    } catch (e) {} 
 }());

我可以告诉你，这与你的问题无关，它总会发生。看这里：React Native - debugging exception

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.