开发者

in react-native how to use body-pix

开发者 https://www.devze.com 2022-12-07 19:28 出处:网络
import { Camera, CameraType } from \'expo-camera\'; import React, { useRef } from "react"; // import logo from \'./logo.svg\';
import { Camera, CameraType } from 'expo-camera';
import React, { useRef } from "react";
// import logo from './logo.svg';
import * as tf from "@tensorflow/tfjs";
import * as bodyPix from "@tensorflow-models/body-pix";
import { useState } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
//AFTER IMPORT 
export default function App() {
  const [type, setType] = useState(CameraType.back);
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const canvasRef = useRef(null);
//next part
  const runBodysegment = async () => {
    const net = await bodyPix.load();
    console.log("BodyPix model loaded.");
    //  Loop and detect hands
    setInterval(() =开发者_运维百科> {
      detect(net);
    }, 100)
  };
//next part

  const detect = async (net) => {
    const person = await net.segmentPersonParts(video);
    console.log(person);

    const coloredPartImage = bodyPix.toColoredPartMask(person);
    bodyPix.drawMask(
      canvasRef.current,
      video,
      coloredPartImage,
      0.7,
      0,
      false
    );
    runBodysegment();

  if (!permission) {
    // Camera permissions are still loading
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: 'center' }}>We need your permission to show the camera</Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
  }

  function toggleCameraType() {
    setType(current => (current === CameraType.back ? CameraType.front : CameraType.back));
  }

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={type}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={toggleCameraType}>
            <Text style={styles.text}>Flip Camera</Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

//next part
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'transparent',
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
});
};

I want to use body-pix in my react-native app for android . can any one help me how to do it . I want my app to open a camera and in my camera there will be a body body-pix working in my android app I want my react-native app to work properly with body-pix I had try it many time time but I can't do it properly

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号