如何访问摄像机- React Native

inkz8wg9  于 2022-12-24  发布在  React
关注(0)|答案(4)|浏览(180)

这应该包含在react-native API中,但我似乎找不到任何开箱即用的API。
我想点击一个按钮就打开摄像头。我可以看到一些API只适用于iOS,但react-native应该可以跨平台使用。
有人知道如何使用react-native访问相机(而不是图库)吗?

2izufjch

2izufjch1#

为此,您可能需要使用react-native-camera模块。
下面是库的使用示例:

'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() {
    const options = {};
    //options.location = ...
    this.camera.capture({metadata: options})
      .then((data) => console.log(data))
      .catch(err => console.error(err));
  }
}

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

AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
vql8enpb

vql8enpb2#

在React Native中,您可以通过首先使用NPM安装摄像机来访问摄像机:npm安装React Native摄像机--保存React Native链接React Native摄像机
然后在您的组件中使用此命令:

takePicture() {
const options = {};
//options.location = ...
this.camera.capture({metadata: options})
  .then((data) => console.log(data))
  .catch(err => console.error(err));
}

完整的例子请看这个github repo:https://github.com/lwansbrough/react-native-camera

dgsult0t

dgsult0t3#

我发现react-native-picker图像拾取器handier为我的需要,它可以用于相机和画廊。对于下面的例子,你需要安装版本:“React Native图像选取器”:“^3.3.2”,
https://www.npmjs.com/package/react-native-image-picker

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import cameraImage from '../../../../assets/icons/camera.png';
import galleryImage from '../../../../assets/icons//gallery.png';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import * as ImagePicker from 'react-native-image-picker';
import {PermissionsAndroid} from 'react-native';
const ImagePicker = () => {
  const [responseCamera, setResponseCamera] = React.useState(null);
  const [responseGallery, setResponseGallery] = React.useState(null);

  const openCameraWithPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'App Camera Permission',
          message: 'App needs access to your camera ',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        ImagePicker.launchCamera(
          {
            mediaType: 'photo',
            includeBase64: false,
            maxHeight: 200,
            maxWidth: 200,
          },
          (response) => {
            console.log(response);
            setResponseCamera(response);
            setResponseGallery(null);
          },
        );
      } else {
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  return (
    <View
      style={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
        margin: 4,
      }}>
      <TouchableOpacity onPress={() => openCameraWithPermission()}>
        {responseCamera === null ? (
          <Image style={styles.icon} source={cameraImage} />
        ) : (
          <Image style={styles.icon} source={{uri: responseCamera.uri}} />
        )}
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          ImagePicker.launchImageLibrary(
            {
              mediaType: 'photo',
              includeBase64: false,
              maxHeight: 200,
              maxWidth: 200,
            },
            (response) => {
              setResponseGallery(response);
              setResponseCamera(null);
            },
          )
        }>
        {responseGallery === null ? (
          <Image style={styles.icon} source={galleryImage} />
        ) : (
          <Image style={styles.icon} source={{uri: responseGallery.uri}} />
        )}
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  icon: {
    height: 50,
    width: 50,
  },
});

export default ImagePicker;

Android的权限:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-feature android:name="android.hardware.camera" />

wooyq4lh

wooyq4lh4#

目前,react-native-camera已弃用,如果您希望实现本机性能并获得功能支持,https://github.com/mrousavy/react-native-vision-camera是不错的选择

    • 功能**:
  • 照片、视频和快照捕获
  • 可定制的设备和多摄像头(平滑缩小到"鱼眼"摄像头)
  • 可定制FPS
  • 帧处理器(JS worklet,用于运行QR码扫描、面部识别、AI对象检测、实时视频聊天等)
  • 平滑缩放(重新设置动画)
  • 快速暂停和恢复
  • HDR和夜间模式
    • 示例**:
function App() {
  const devices = useCameraDevices('wide-angle-camera')
  const device = devices.back

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}
    • 文件**:

https://mrousavy.com/react-native-vision-camera/docs/guides

相关问题