App.js for react-ml5-p5

App.js

import React, { Component } from "react";
// import * as p5 from 'p5';
import * as ml5 from 'ml5';
import Sketch from "react-p5";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: {
        outputStride: 8, // 8, 16, or 32, default is 16
        segmentationThreshold: 0.3 // 0 - 1, defaults to 0.5
      },
      bp: null,
      p5: null
    }
    this.videoTag = React.createRef();
    // this.run = this.run.bind(this);
    // this.setup = this.setup.bind(this);
    this.canvas = React.createRef();
  }

  componentWillMount() {
    // getting access to webcam
    navigator.mediaDevices
      .getUserMedia({ video: { facingMode: "environment" } })
      .then(stream => {
        const video = this.videoTag.current;
        video.srcObject = stream;
        video.setAttribute("playsinline", true);
        video.play();
      });
      const bodyPix = ml5.bodyPix(this.state.options, () => {
        this.setState({bp: bodyPix});
        console.log('component mounted');
      //   const p5obj = new p5();
      //   this.setState({p5: p5obj});
      //   this.setup(p5obj, this.canvas);
      //   requestAnimationFrame(this.run);
      });

  }
/*
  setup = (p5, canvasParentRef) => {
    // use parent to render the canvas in this ref
    // (without that p5 will render the canvas outside of your component)
    p5.createCanvas(640, 480).parent(canvasParentRef);
  };

  async run() {
    const video = this.videoTag.current;
      if (video.readyState === video.HAVE_ENOUGH_DATA) {

        // console.log(this.videoTag.current);
        const bodyPix = this.state.bp;
        const p5 = this.state.p5;
        const segment = await bodyPix.segment(this.videoTag.current);
        // console.log(segment);
        // p5.createCanvas(640, 480);
        p5.background(0);
        p5.image(segment.backgroundMask, 0, 0, 640, 480);
        requestAnimationFrame(this.run);
      }
  }
*/
  render() {
    return (
      <div>
        <video ref={this.videoTag} width="640" height="480" autoPlay />
        <Sketch
          setup={(p5, parent) => {
            console.log('start setup');
            p5.createCanvas(640, 480).parent(parent);
          }}
          draw={async (p5) => {
            p5.background(0); //black bg
            const bodyPix = this.state.bp;
            const segment = await bodyPix.segment(this.videoTag.current);
            p5.image(segment.backgroundMask, 0, 0, 640, 480);
          }}
        />
      </div>
    );
  }
}

export default App;