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

Posted 2023-03-11

【中文标题】如何使用 react-native 将图像放在相机视图的顶部

【英文标题】：How to put an image on top of the view of the camera with react-native

【发布时间】：2016-06-07 15:33:59

【问题描述】：

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

是否有插件或可行的方法来做到这一点？目前，我只对放置图像并识别房间中的某个人感兴趣？ （4个人在同一个房间，如果我指向一个，显示文字A，如果我指向另一个，显示文字B，依此类推）

【问题讨论】：

上次我检查了插件react-native-camera 能够显示实时图像，你可以（理论上）用你想要的任何东西覆盖它。虽然我无法让叠加层在 android 上运行。见github.com/lwansbrough/react-native-camera

@mitza Sisic 你成功了吗？

【参考方案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 并添加新的视图设计并显示在我在帖子顶部示例的视图上。

【讨论】：

这正是我要找的！