# Why sometimes canvas is black while video is playing?

**URL:** <https://forum.deepar.ai/t/why-sometimes-canvas-is-black-while-video-is-playing/435>\
**Category:** SDK\
**Tags:** web-sdk\
**Created:** [September 29, 2023, 4:31am UTC](https://forum.deepar.ai/t/why-sometimes-canvas-is-black-while-video-is-playing/435 "2023-09-29T04:31:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [September 29, 2023, 4:31am UTC](https://forum.deepar.ai/t/why-sometimes-canvas-is-black-while-video-is-playing/435/1 "2023-09-29T04:31:05Z")

</div>

From time to time DeepAR doesn’t render video after `setVideoElement` (most frequently when effect is set).

It looks like this:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/deepar/original/1X/4edc169929a498d9304f1b00c02edc7af0a4af7a.png)

Here is a DOM for this component.

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/deepar/original/1X/f8905f8d7046e911a98a5b247268307b3967f297.png)

DeepAR is set to take video from this `<video>` element and draw it on canvas.  
The canvas is located directly above video. If I hide canvas, I can see that video is working.

Judging by the logs DeepAR successfully aquired this video element

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/deepar/original/1X/f23ae882f71923788f79edc779f60be9ff772a65.png)

What could be the reason?

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [September 29, 2023, 2:19pm UTC](https://forum.deepar.ai/t/why-sometimes-canvas-is-black-while-video-is-playing/435/2 "2023-09-29T14:19:04Z")

</div>

Could you share your source code perhaps?

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [September 29, 2023, 3:07pm UTC](https://forum.deepar.ai/t/why-sometimes-canvas-is-black-while-video-is-playing/435/3 "2023-09-29T15:07:29Z")

</div>

It’s deeply integrated into our logic. But the main parts are:

- Setting local stream to video:

```ts
useEffect(() => {
    if (videoRef.current && localStream) {
      videoRef.current.srcObject = localStream
    }
  }, [localStream, videoRef.current])

```

- DeepAR initialization and effects setup

```ts
  const [initialized, setInitialized] = useState(false)
  useEffect(() => {
    if (!(features.effects && canvasRef?.current)) { return }

    dispatch(setLocalStreamWithEffects(canvasRef.current.captureStream()))

    setInitialized(false)
    ARService.initialize(canvasRef.current).then(() => setInitialized(true))

    return () => ARService.shutdown()
  }, [features.effects, canvasRef?.current])

  const [ready, setReady] = useState(false)
  useEffect(() => {
    if (!(features.effects && initialized && videoRef.current)) { return }

    setReady(false)
    ARService.setVideoElement(videoRef.current)
    setReady(true)
  }, [
    features.effects,
    initialized,
    videoRef?.current
  ])

  const { appliedEffect } = useAppState("effects")
  useEffect(() => {
    if (!(features.effects && ready)) { return }

    ARService.setEffect(appliedEffect)

    return () => ARService.clearEffect()
  }, [
    features.effects,
    ready,
    appliedEffect
  ])

```

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [October 2, 2023, 3:39am UTC](https://forum.deepar.ai/t/why-sometimes-canvas-is-black-while-video-is-playing/435/4 "2023-10-02T03:39:28Z")

</div>

Looks like this is related to hooks being called multiple times in dev mode of React.

My guess is:  
There is a race condition between first and second hooks. `initialize` resolves faster than second hook detects change of `initialized`

To solve this, I’ve merged those two hooks into one

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [October 3, 2023, 3:56pm UTC](https://forum.deepar.ai/t/why-sometimes-canvas-is-black-while-video-is-playing/435/5 "2023-10-03T15:56:11Z")

</div>

Thank you very muh for sharing the solution