标签: react-native-camera

我有兴趣使用 React-Native 在相机视图顶部放置一个视图，类似于以下内容：

是否有插件或易于使用的方法来执行此操作？目前，我只对放置图像并识别房间中的某个人感兴趣？（4个人在同一个房间，如果我指向一个，显示文字A，如果我指向另一个，显示文字B，以此类推）

我正在尝试使用react-native-camera@0.4.1(with react-native@0.39.2)来创建QR码扫描程序.我的render()方法的相关要点是:

<Camera 
  aspect={Camera.constants.Aspect.fill}
  onBarCodeRead={(data) => console.log(data)} 
  barCodeTypes={['qr']}>
</Camera>

没有barCodeTypes道具,一切都按预期工作.但是一旦我包含它,视图就不会呈现,我收到以下错误消息:

*** -[AVCaptureMetadataOutput setMetadataObjectTypes:] Unsupported type found
    - use -availableMetadataObjectTypes

我猜我只需要以['qr']其他正确的方式编写我的论点,但我无法在文档中找到任何信息.

我试图在用户拍照后调用一个函数。我尝试通过以下方式这样做：

export default class LA extends Component {
    constructor(props) {
      super(props);
      this.doSomething = this.doSomething.bind(this);
    }


    takePicture() {
      this.camera.capture()
      .then(function(data) {
        doSomething(data.path); //THIS CAUSES THE RUNTIME ERROR
      })
     .catch(err => console.error("error: " + err));
    }

    doSomething(imgPath) {
      console.log(imgPath);
    }


}

拍照时出现以下错误：

错误：参考错误：doSomething 未定义

但是，如果我将 takePicture() 替换为：

takePicture() {
  this.camera.capture()
  .then(function(data) {
    console.log(data.path);
  })
 .catch(err => console.error("error: " + err));
}

记录了图像路径，并且没有发生错误。

我尝试了很多尝试来启动 react-native-image-picker 并使用我的 RN 应用程序。我正在使用 Expo 和 VS Code，并且没有使用 Xcode 或 Android Studio 运行该应用程序。在应用程序中获取相机胶卷的方法似乎有很多，我不确定哪条路是最好的。似乎没有人为我工作，所以我想选择最佳路径并专注于使那条路径有效。

我正在关注文档：https : //github.com/react-native-community/react-native-image-picker

我尝试过的事情：

• 反应原生相机胶卷
• 世博图像选择器
• 博览会图片选择器
• react-native-image-picker
• 反应图像上传
• 反应原生照片上传

我的代码：

import React, {useState, useEffect} from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, CameraRoll } from 'react-native'
import ImagePicker from 'react-native-image-picker';
// import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';

const PicturesScreen = ({navigation}) => {
    const [pictures, setPictures] = useState([]);

getPermissionAsync = async () => {
    if (Constants.platform.ios) {
      const { status …

默认情况下，react-native-camera以手机的标准纵横比拍摄照片并以Base64 png输出它们，如果Camera.constants.CaptureTarget.memory设置目标。

我正在寻找一种创建方形照片的方法 - 直接使用相机，或通过转换捕获的imagedata. 不确定 React Native 是否可以实现类似的功能，或者我应该完全使用本机代码。

这 aspect道具仅更改相机图像在取景器中的显示方式。

这是我的代码：

<Camera
  ref={(cam) => {
    this.cam = cam;
  }}
  captureAudio={false}
  captureTarget={Camera.constants.CaptureTarget.memory}
  aspect={Camera.constants.Aspect.fill}>
</Camera>;

async takePicture() {
  var imagedata;
  try {
    var imagedata = await this.cam.capture();// Base64 png, not square
  } catch (err) {
    throw err;
  }
  return imagedata;
}

我react-native-camera在我的iOS应用程序上使用,现在尝试添加焦点,亮度和缩放控件.到目前为止,我无法提出解决方案.知道怎么做吗？

我试图在不同的反应原生相机包中找到一个选项.还张贴在他们的git repos中寻求帮助.最后尝试了这篇文章:https://medium.com/react-native-development/react-native-camera-app-with-live-preview-saturation-and-brightness-filters-d34535cc6d14他们从相机拍摄照片每隔5毫秒调整一下它看起来非常不稳定的亮度,这会让应用程序崩溃.

我在Android上遇到了react-native-camera的问题.它现在正常工作大约一个星期,突然间,Gradle不会构建出现以下错误:

Error:Execution failed for task ':react-native-camera:processReleaseResources'.
> Error: more than one library with package name 'com.google.android.gms.license'

从我收集的内容来看,这是由com.google.android.gms多次加载引起的.我按照RNCamera文档进行操作,确保我的Gradle文件匹配.

Android设备/应用/的build.gradle:

android {
  compileSdkVersion 23
  buildToolsVersion "23.0.1"

  defaultConfig {
    applicationId "com.phase1"
    minSdkVersion 16
    targetSdkVersion 22
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
  }
  splits {
    abi {
        reset()
        enable enableSeparateBuildPerCPUArchitecture
        universalApk false  // If true, also generate a universal APK
        include "armeabi-v7a", "x86"
    }
  }
  buildTypes {
    release {
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
  }
  // applicationVariants are e.g. …

我正在使用react-native-camera的条形码扫描仪，目前如果我使用它并且有多个 QR 码彼此紧密重叠，我将我的相机指向一个，它会读取它上面的代码，它在显示在屏幕上，但在摄像机视图内。但是，如果我要扫描的上面没有二维码，那么它会扫描正确的二维码，因此它似乎总是扫描相机视图中的顶部二维码。

这是我的问题：有没有办法将“扫描区域”限制为与显示器上的相机视图相同的大小和区域？

<View style={styles.container}>
  <Camera
    style={styles.preview}
    onBarCodeRead={this.onBarCodeRead}
    ref={cam => this.camera = cam}
    aspect={Camera.constants.Aspect.fill}>
  </Camera>
  <Button
    style={styles.buttonStyle}
    <Text>{this.state.qrcode}</Text>
  </Button>
</View>

const styles = {
  container: {
    height: 300,
    flex: 1
  },
  preview: {
    flex: 1
  },
  buttonStyle: {
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 20,
    alignSelf: 'center'
  }
}

版本，如果需要：

"react-native": "0.42.3",
"react-native-camera": "0.6.0",

在我的react-native应用程序中，我需要拍照并将其保存到新的自定义相册中。不能通过菜单上的照片访问相册，因此我需要将相册设为私有，因此只能通过应用程序本身访问捕获的照片。我在网上搜索过，我猜可以用react-native-fs或来实现react-native-fetch-blob，但似乎只能在上使用Android。但这不是我真正需要的。您能提供任何文档，示例，代码或其他任何内容来帮助我吗？

这是我当前Camera已经创建的组件，用户可以在其中拍照，将其保存到相机胶卷中，并在需要时访问照片。

import React, { Component } from 'react';
import {CardItem, Content, Container, Body, Left, Icon,  Header, Right, Footer, FooterTab, Button } from 'native-base';
import {
    Platform,
    StyleSheet,
    Dimensions,
    Text,
    ListView,
    View,
    Alert,
    TouchableOpacity,
    Image,
    CameraRoll,
    ScrollView
} from 'react-native';
import {Actions} from 'react-native-router-flux';

import { RNCamera } from 'react-native-camera';
const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R …

我正在使用 react-native-camera RNCamera 组件来录制视频。主要任务是在聊天窗口录制上传和预览，但是我无法获取视频。RNCamerarecordAsync(options)命令将其作为缓存保存到本地缓存文件夹中，我无法从文件夹中获取它。我尝试使用 fetch-blob 但它返回的文件大小为 0。我做错了什么？

import {RNCamera} from 'react-native-camera';
import RNFetchBlob from 'react-native-fetch-blob';
constructor(props) {
    super(props);
     this.state = {
      path: "",
      recorded: false,
      isRecording: false,
    }
}

takeVideo() { 
    this.state.isRecording ?  this.stopRecord() : this.saveVideo();
    this.state.isRecording ? this.setState({isRecording: false}) : this.setState({isRecording: true})
  }

  async stopRecord(){
    this.camera.stopRecording();
    const { config, fs, android } = RNFetchBlob;
    const str = this.state.path;
    const fileName = str.substr(str.indexOf("Camera")+7, str.indexOf(".mp4"));
    const path = fs.dirs.CacheDir + '/Camera/'+fileName;

    const res = await fetch(str);
    const blob = …