Is there a way to use createCapture in React?

p5.js Coding Questions
1

I’m attempting to draw a video along with a few shapes using p5.js on a React app.
I’ve noticed that p5.dom.js is not available for React and probably for good reason. This stopped me from using createCapture(VIDEO) so I went ahead and used getUserMedia to get the camera working.

The issue is that p5 is expecting a p5.Image|p5.Element when I add sketch.image(video, 0,0, w, h), which I’m not quite sure how to get around that. Any thoughts would be appreciated!

class Stream extends Component {
  constructor() {
    super();
    this.video = React.createRef();
  }

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

     // Cannot import p5.dom.
    //  sketch.createCapture(p5.VIDEO)

    const video = this.video.current
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then((stream) => {
        video.srcObject = stream
        video.play()
    })
    .catch(function(err) {
        console.log("An error occurred! " + err)
    })
  }

[continues...]
2

Solved! I’ve imported p5.dom as follows:

import * as p5 from 'p5'
import "p5/lib/addons/p5.dom";

Then in componentDidMount:

  componentDidMount() {
    const sketch = new p5()
    sketch.createCanvas(640, 480)
    const video = sketch.createCapture(p5.VIDEO)
    video.size(sketch.width, sketch.height)
}
3

Glad it’s already solved. I wish “p5.js” & “p5.dom.js” would be just 1 unified file. :pleading_face:

But I believe it’d possible, if you had kept the getUserMedia() approach, to wrap a <video> element as a p5.MediaElement by passing the former as an argument for the latter’s constructor. :sunglasses:

At least it seems so according to its online reference: :tipping_hand_man:

1 Like
4

Thanks for sharing! That sounds like it could work, I’ll keep that in mind for the future! :slight_smile: