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
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;