React bodypix not working in app

TensorFlow General Discussion
1

Hello Guys,
I want to made react component for image segmentation can anyone help me how to do this
I faced everytime with new issue

1 Like
3

I think bodypix works, what exactly is your problem, (if I can help you) but body-segmentation doesn’t work with npm i @tensorflow/body-segmentation . have you tried?
for body-pix you can try this code on your App.js script : (don’t forget to install by ‘npm i @’ all what you gonna need

import React, { useRef, useEffect, createRef, Component } from 'react';

import * as bodyPix from '@tensorflow-models/body-pix';

import * as tf from '@tensorflow/tfjs';

 

 

 

 

class App extends Component {

 

  constructor(props) {

    super(props);

    this.state = {

    };

    //this.loadAndBlur = this.loadAndBlur.bind(this);

    this.videoRef = createRef(null);

    this.canvasRef = createRef(null);

  }

 

  componentDidMount() {

    console.log("Did mount")

    this.startVideo();

    //let net = this.bodyPix.load();

  }

 

  startVideo = async () => {

    const stream = await navigator.mediaDevices.getUserMedia({ video: {width:640,height:480}, audio: false });

 

    if (this.videoRef.current) {

      this.videoRef.current.autoplay = true;

      this.videoRef.current.addEventListener('loadedmetadata', () => {

        //diali

        //this.videoRef.current.width = this.videoRef.current.videoWidth;

        //this.videoRef.current.height = this.videoRef.current.videoheight;

 

        this.loadAndBlur(this.videoRef.current,this.canvasRef.current);

       

        //test loadAndBlur prblm

        //this.loadAndBlur();

        console.log("spongbob-start-video")

      });

      this.videoRef.current.srcObject = stream;

      //essayer de l'appliquer?

      //videoRef.bodyPix.srcObject = stream;

      //videoRef.bodyPix.play();

      //appel de la fonction

 

    }

  };

  //il entre pas dans la fct

  //BodyPixMultiplier comment je peut modifier le nombre de layers pour etre plus rapide ?

  loadAndBlur = async (video, canvas) => {

 

    const net = await bodyPix.load({

      architecture: 'MobileNetV1',  

      //architecture: 'ResNet50',

      outputStride: 16,

      multiplier: 1.0,

      quantBytes: 2

    });

 

    async function blur(){

      const segmentation = await net.segmentPerson(video);

      //net.segmentPerson(video);

      console.log("segmentation : " + segmentation)

      console.dir(segmentation)

      //je peux modifier les params

      const backgroundBlurAmount = 5;

      const edgeBlurAmount = 20;

      const flipHorizontal = false;

      //const BodyPixMultiplier =

 

      //detectionde probleme ici !

      // console.dir( video.current)

      // console.log("Current cnv : ", canvas)

      // console.log("video width :" + video.current.width);

      // console.log("video height :" + video.current.height);

      console.log("spongbob-before")

      //voir si ce se fait une seule capture et execute sur cette capture

      bodyPix.drawBokehEffect(canvas, video, segmentation, backgroundBlurAmount, edgeBlurAmount, flipHorizontal);

      console.log("spongbob-after") //non trouvée sur la console !

 

      requestAnimationFrame(blur)

    }

 

    blur();

  }

  render(){

    return (

    <div>

      <video id="video" ref={this.videoRef} width={1280} height={720}></video>

      <canvas id="canvas" ref={this.canvasRef} ></canvas>

    </div>

    )

  };

}

export default App;