React.js with createCapture with p5 got Error

Question

I'm trying to use react-p5-wrapper and use createCapture() for video capture but got errors:

TypeError: Cannot read property 'push' of undefined

Here is my code. What should I do?

import p5 from "p5";
import "p5/lib/addons/p5.dom";

export default function sketch(p) {
  p.setup = function() {
    p5.prototype.createCapture();
    p.createCanvas(400, 300, p.WEBGL);
  };

  p.draw = function() {
    p.background(100);
    p.stroke("rgb(0,255,0)");
    p.strokeWeight(4);
    p.line(-400, -50, 0, 400, -50); 
    p.stroke(200);
  };
}

Answer 1

I've ran into the same issue and solved it by instantiating p5 instead of using setup.

import React, { Component, Fragment } from 'react'
import * as p5 from 'p5'
import "p5/lib/addons/p5.dom";

class Stream extends Component {
  constructor() {
    super();
    // Reference to video element in your JSX.
    this.video = React.createRef();
  }

  componentDidMount() {
    const sketch = new p5()
    sketch.createCanvas(640, 480)
    sketch.createCapture(p5.VIDEO)
  }

  render() {
    return(
      <Fragment>
          <video
            ref={this.video}
            width="500"
            height="500"
          >Video stream is not available.</video>
      </Fragment>
    )
  }
}

export default Stream