标签: react-native-camera

在我的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 …

我正在尝试使用预先签名的网址将iOS设备上的jpeg图像上传到S3.这是我正在做的事情:

const file = {
  uri: imageURL,
  type: 'image/jpeg'
};

const formData = new FormData();
formData.append('photo', file);
formData.append('Content-Type', 'image/jpeg');

const response = await axios({
  method: 'PUT',
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  url: s3PreSignedURL,
  data: formData
});

(该应用程序是本机反应,我使用react-native-camera拍摄照片.)

问题是图像上传了.当我下载它并尝试在我的Mac上查看它说The file could not be opened.但如果我在Photoshop中打开它就可以了.知道发生了什么事吗？

您可以在此处找到示例图片:https://s3-ap-southeast-1.amazonaws.com/eyesnapdev/scans/1509856619481-7180​​9992-b818-4637-93f1-9a75b6588c2c.jpg

使用相机拍照，然后导航到另一个页面，其中有一个后退按钮，在单击事件时，我再次导航到相机，但这次相机冻结，但我可以单击另一张照片。

观察到，如果导航流是相机 => 其他组件（例如相机单击图片视图）=> 相机，则相机会冻结。

如果导航流是其他组件（例如，除相机之外的任何组件）=> 相机，则不会发生相机冻结。可能需要关闭相机，然后才应该进行导航。

包线程：react-native-camera-kit

我正在尝试 react-native-camera，我总是得到

未定义不是一个对象（评估'_reactNativeCamer.RNCamera.Constants'

作为错误。

旧相机工作正常，只是新相机无法启动。

我只是复制粘贴了示例代码，但它似乎不起作用！它有什么问题？

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  StyleSheet,
  TouchableOpacity
} from 'react-native';
import { RNCamera } from 'react-native-camera';

class Camera extends Component {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          type={RNCamera.Constants.Type.back}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={'We need your permission to use your camera phone'}
        />
        <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
          <TouchableOpacity
              onPress={this.takePicture.bind(this)}
              style={styles.capture}
          >
            <Text style={{ fontSize: 14 …

我正在使用React-Native-View-Shot 库来截取整个屏幕的屏幕截图。

文档中提到方法 captureScreen()：

captureScreen() 将捕获当前显示屏幕的内容作为本机硬件屏幕截图。它不需要 ref 输入，因为它在视图级别不起作用。这意味着 ScrollView 不会被完整捕获 - 仅捕获用户当前可见的部分。

但是，屏幕截图未捕获除相机预览之外的任何组件。所使用的所有组件均声称受文档互操作性表中的支持。

代码：

takeScreenshot() {
    captureScreen({
        format: "jpg",
        quality: 0.8
    }).then(
        uri => { savePath = uri; console.log("Image saved to", uri); CameraRoll.saveToCameraRoll(uri); ToastAndroid.show(uri + "", ToastAndroid.SHORT); },
        error => console.error("Oops, snapshot failed", error)
        );
}

render() {
    return (
        <View style={styles.container}>
            <Text style={{backgroundColor:"white"}}>Hello World</Text>
            <RNCamera style={styles.preview}
                ref={ref => {
                    this.camera = ref;
                }}
                type={RNCamera.Constants.Type.back}
                flashMode={RNCamera.Constants.FlashMode.on}
                permissionDialogTitle={'Permission to use camera'}
                permissionDialogMessage={'We need your permission to use your camera …

我正在尝试构建一个直播视频应用程序。我构建了一个rtmp 服务器，它准备好发布和播放流。我需要一种方法来捕获手机的用户相机并将在线流发送到我的 rtmp 服务器。

我在客户端使用 react-native。我发现react-native-camera非常适合处理相机，但我在他们的文档中找不到任何可用于访问相机流的事件/api。

另一个问题是我必须将流发送到 rtmp 服务器的方式。我对这方面一无所知，因此将不胜感激。

首先，当您第一次运行应用程序并转到相机时，它会在 android 或 ios 上启动权限模式，并带有不允许和允许选项。

使用的包是react-native-camera。它有一个名为 notAuthorizedView 的属性，您可以返回任何您想要的视图。我想要做的是启用相机或在不允许相机时出现的 notAuthorizedView 中授予对相机的访问权限。

export default class MyCamera extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            uri:''
        };
    }

      render() {
        return (
          <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          notAuthorizedView={
            <View>
              <Text>YOU ARE NOT AUTHORIZED TO USE THE CAMERA</Text>
              <Button onPress={()=>{Alert.alert('SET CAMERA STATUS TO READY')}}/>
            </View>
          }
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={'We need your permission to use your camera phone'}
          onGoogleVisionBarcodesDetected={({ barcodes }) => {
            console.log(barcodes); …

我使用的是旧版本的react-native-camera，它在iOS 上运行良好。但它在 Android 上不起作用。我正在创建一个功能，例如在 isBarcodeRead 逻辑完成后扫描代码与拍照相结合。然后我尝试将此库升级到并遇到与您相同的问题。

我已将react-native-camera 添加到我的应用程序中。创建使用 RNCamera 的组件后，每次我尝试运行我的应用程序（使用react-native run-android）时，它都会请求必要的权限（相机和音频），然后立即崩溃，而不输出任何错误消息。

这是我的 package.json：

{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.12.1",
    "@tensorflow-models/mobilenet": "^2.0.4",
    "@tensorflow/tfjs": "^3.3.0",
    "@tensorflow/tfjs-react-native": "^0.5.0",
    "expo": "~40.0.0",
    "expo-camera": "~9.1.0",
    "expo-constants": "^10.0.1",
    "expo-gl": "~9.2.0",
    "expo-gl-cpp": "~9.2.0",
    "expo-splash-screen": "~0.8.0",
    "expo-status-bar": "~1.0.3",
    "expo-updates": "~0.4.0",
    "mobx": "^6.1.8",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-camera": "^3.43.0",
    "react-native-fs": "^2.16.6",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "~2.15.0",
    "react-native-unimodules": "~0.12.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": …

我的应用程序中有一个相机视图，其中有一个可调整大小的边界框

现在，在拍摄图像后，我希望能够只拍摄图像中聚焦的部分，因此我使用了此反应本机库中的 ImageEditor

我遇到的问题是，我在裁剪方面没有获得一致的结果，目前我有以下值 boxX盯着边界框的 X 位置；boxY边界框的起始 Y 位置；boxWidth边界框的宽度；boxHeight边界框的高度。

我首先使用了以下代码

ImageEditor.cropImage(image.uri, 
                {
                    offset: {x: boxX, y: boxY},
                    size: {width: boxWidth, height: boxHeight},
                }
            )

这给出了非常像素化且非常错误的图像裁剪，我不知道为什么，然后我通过添加新变量（例如图像宽度和高度以及设备宽度和高度）来添加一些计算，并提出了以下代码：

ImageEditor.cropImage(data.uri, 
                {
                    offset: {x: ((boxX)/deviceWidth)*data.width, y:((boxY)/deviceHeight)*data.height},
                    size: {width: boxWidth/deviceWidth*imageWidth, height: boxHeight/deviceHeight*imageHeight},

                }
            )

这好多了，但在 Android 上裁剪仍然是错误的，但在 iOS 上这似乎工作得很好而且准确，我的问题是我怎样才能实现这一目标，请告诉我是否需要进行任何计算才能获得一致的结果。