# Is there a way to use createCapture in React?

**URL:** <https://discourse.processing.org/t/is-there-a-way-to-use-createcapture-in-react/5955>\
**Category:** Coding Questions\
**Created:** [November 26, 2018, 1:44pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-createcapture-in-react/5955 "2018-11-26T13:44:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cristiano](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cristiano/32/2523_2.png) [@cristiano](https://discourse.processing.org/u/cristiano)\
**Post date:** [November 26, 2018, 1:44pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-createcapture-in-react/5955/1 "2018-11-26T13:44:50Z")

</div>

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!

```auto
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...]

```

---

<div class="post-metadata">

**Author:** ![cristiano](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cristiano/32/2523_2.png) [@cristiano](https://discourse.processing.org/u/cristiano)\
**Post date:** [November 26, 2018, 2:00pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-createcapture-in-react/5955/2 "2018-11-26T14:00:10Z")

</div>

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

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

```

Then in `componentDidMount`:

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 26, 2018, 2:11pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-createcapture-in-react/5955/3 "2018-11-26T14:11:36Z")

</div>

> [@cristiano](#):
>
> … so I went ahead and used **getUserMedia()** to get the camera working.

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

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. 🕶

At least it seems so according to its online reference: 💁‍♂️

> **[reference | p5.js](https://p5js.org/reference/#/p5.MediaElement)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![cristiano](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cristiano/32/2523_2.png) [@cristiano](https://discourse.processing.org/u/cristiano)\
**Post date:** [November 26, 2018, 3:58pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-createcapture-in-react/5955/4 "2018-11-26T15:58:07Z")

</div>

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