ML5 BodyPix无法与React JS和P5JS一起使用

Question

我正在尝试使用react 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;