如何使用react-native将图像放在摄像机视图的顶部

Question

我对使用React-Native在摄像机视图顶部放置视图感兴趣，类似于：

是否有插件或平易近人的方式来执行此操作？现在我只对放置图像并识别房间中的某个人感兴趣。 （4个人在同一个房间，如果我指向一个，显示文本A，如果我指向其他，则显示文本B等）

Answer 1

当然，最好的相机库是react-native-camera，您可以轻松使用它并设置其样式以包装所有视口，请参见以下代码：

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

const CameraView = () => {
  const cameraRef = useRef(null);
  const takePicture = async () => {
    if (cameraRef) {
      const options = { quality: 0.5, base64: true };
      const data = await cameraRef.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  return (
    <SafeAreaView style={styles.safeWrapper}>
      <View style={styles.container}>
        <RNCamera
          ref={cameraRef}
          style={styles.camera}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
        />
        <View style={styles.snapWrapper}>
          <TouchableOpacity onPress={takePicture} style={styles.capture}>
            <Text style={styles.snapText}>SNAP</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeWrapper: {
    flex: 1,
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
    position: 'relative',
  },
  camera: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
  snapWrapper: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    position: 'absolute',
    top: 50,
    left: 16,
    right: 16,
  },
  snapText: {
    fontSize: 14,
    color: 'red',
  },
});

export default CameraView;

上述代码的视图：

人脸检测

要进行人脸检测，您可以使用onFacesDetected，如下所示：

<RNCamera
  ref={cameraRef}
  style={styles.camera}
  type={RNCamera.Constants.Type.back}
  flashMode={RNCamera.Constants.FlashMode.on}
  onFacesDetected={({ faces }) => { // <===== this function
    console.log(faces); 
  }}
/>

faces类型为：

interface Size<T = number> {
  width: T;
  height: T;
}

interface Point<T = number> {
  x: T;
  y: T;
}

interface Face {
  faceID?: number;
  bounds: {
    size: Size;
    origin: Point;
  };
  smilingProbability?: number;
  leftEarPosition?: Point;
  rightEarPosition?: Point;
  leftEyePosition?: Point;
  leftEyeOpenProbability?: number;
  rightEyePosition?: Point;
  rightEyeOpenProbability?: number;
  leftCheekPosition?: Point;
  rightCheekPosition?: Point;
  leftMouthPosition?: Point;
  mouthPosition?: Point;
  rightMouthPosition?: Point;
  bottomMouthPosition?: Point;
  noseBasePosition?: Point;
  yawAngle?: number;
  rollAngle?: number;
}

面对检测并获得faces响应后，您可以使用state并添加新的视图设计并显示在我在文章顶部示例的视图上。