ML5 BodyPix не работает с react js и p5js - PullRequest
Новая
       59

ML5 BodyPix не работает с react js и p5js

1 голос
/ 09 мая 2020

Я пытаюсь создать приложение с зеленым экраном с реакцией js. Однако у приложения возникают проблемы с загрузкой функции сегментации из ml5.

Это ошибки в консоли

p5. js говорит: 

image() was expecting p5.Image|p5.Element for parameter #0 (zero-based index), received an empty variable instead

TypeError: Cannot read property 'width' of undefined

Это код ... 

import React, { Component } from "react";
import "./App.css";
import p5 from "p5";
import * as ml5 from "ml5";

const options = {
  outputStride: 8,
  segmentationThreshold: 0.3
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  Sketch = p => {
    let width = 858;
    let height = 480;
    let bodypix;
    let video;
    let segmentation;

    p.setup = () => {
      p.createCanvas(width, height);
      video = p.createCapture(p.VIDEO);
      video.hide();
      bodypix = ml5.bodyPix(video, p.modelReady);
    };

    p.modelReady = () => {
      bodypix.segment(p.gotResults, options);
    };

    p.gotResults = (err, result) => {
      if (err) {
        console.log(err);
        return;
      }

      segmentation = result;
      p.background(255, 0, 0);
      p.image(video, 0, 0, width, height);

      p.image(segmentation.maskBackground, 0, 0, width, height);
      bodypix.segment(p.gotResults, options);
    };
  };

  componentDidMount() {
    this.myP5 = new p5(this.Sketch, this.myRef.current);
  }

  render() {
    return (
      <div className="App">
        {"  Disko-App"}
        <div ref={this.myRef}></div>
      </div>
    );
  }
}

export default App;
...