带有p5的createCapture的React.js出错了

时间:2018-04-03 08:50:45

标签: reactjs p5.js

我正在尝试使用react-p5-wrapper并使用createCapture()进行视频捕获但却出错:

  

TypeError:无法读取未定义

的属性'push'

这是我的代码。我该怎么办?

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

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,并通过实例化p5而不是使用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