# Not render on canvas

**URL:** <https://devforum.zoom.us/t/not-render-on-canvas/58846>\
**Category:** Web\
**Tags:** faq\
**Created:** [October 14, 2021, 3:49am UTC](https://devforum.zoom.us/t/not-render-on-canvas/58846 "2021-10-14T03:49:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wuxyman](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/wuxyman/32/31886_2.png) [@wuxyman](https://devforum.zoom.us/u/wuxyman)\
**Post date:** [October 14, 2021, 3:49am UTC](https://devforum.zoom.us/t/not-render-on-canvas/58846/1 "2021-10-14T03:49:30Z")

</div>

**Description**  
no video is render on canvas.There is no error on browser console.

**Browser Console Error**  
There is no error on browser console.

**Which Web Video SDK version?**  
1.1.4

**Video SDK Code Snippets**

```auto
import { useEffect, useState, useRef } from 'react';
import './App.css';
import { KJUR } from 'jsrsasign';
import ZoomVideo from '@zoom/videosdk';

function generateVideoToken(
  sdkKey = '',
  sdkSecret = '',
  topic = '',
  passWord = '',
  sessionKey = '',
  userIdentity = '',
) {
  let signature = '';
  try {
    const iat = Math.round(new Date().getTime() / 1000);
    const exp = iat + 60 * 60 * 2;

    // Header
    const oHeader = { alg: 'HS256', typ: 'JWT' };
    // Payload
    const oPayload = {
      app_key: sdkKey,
      iat,
      exp,
      tpc: topic,
      pwd: passWord,
      user_identity: userIdentity,
      session_key: sessionKey,
      // topic
    };
    // Sign JWT, password=616161
    const sHeader = JSON.stringify(oHeader);
    const sPayload = JSON.stringify(oPayload);
    signature = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, sdkSecret);
  } catch (e) {
    console.error(e);
  }
  return signature;
}

let client = ZoomVideo.createClient();

let token = generateVideoToken(
  '',
  '',
  '1001',
  ''
);

function App() {
  const [stream, setStream] = useState(null)
  const [videoActive, setVideoActive] = useState(false);
  const videoRef = useRef(null);

  useEffect(() => {
    const fn1 = async (payload) => {
      console.log('connection-change', payload);
    }
    client.on('connection-change', fn1);

    const fn2 = async (payload) => {
      console.log('video-active-change', payload);
      const { state, userId } = payload;
      if(state === 'Active'){
        setVideoActive(true);
      }else{
        setVideoActive(false);
      }
    }
    client.on('video-active-change', fn2)

    const fn3 = async (payload)=>{
      console.log('media-sdk-change', payload)
    }

    client.on('media-sdk-change', fn3);

    const fn4 = async (payload) => {
      console.log('video-capturing-change', payload)
    }

    client.on('video-capturing-change', fn4)

    return () => {
      client.off('connection-change', fn1)
      client.off('video-active-change', fn2)
      client.off('media-sdk-change', fn3);
      client.off('video-capturing-change', fn4)
    }
  }, [])

  useEffect(() => {
      if(videoActive && stream ){
        let { userId } = client.getCurrentUserInfo();
        let canvas = document.getElementById('canvas-video');
        console.log('before-renderVideo','userId=', userId);
        stream.renderVideo(canvas, userId, 160, 90, 0, 0, 1);
        console.log('after-renderVideo');
      }
  }, [videoActive, stream])
  

  useEffect(() => {
    const fn = async () => {
      await client.init('en-US', `${window.location.origin}/lib`);
      await client.join('1001', token, 'test');
      
      let mediaStream = client.getMediaStream();
      setStream(mediaStream);
      await mediaStream.startVideo();
    }

    fn();
    
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <canvas ref={videoRef} id='canvas-video' width='1000' height='800' style={{ border: '1px solid red'}}></canvas>
      </header>
    </div>
  );
}

export default App;

```

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

**Screenshots**

**Device (please complete the following information):**

- Device: Macbook Pro
- OS: macOS Big Sur
- Browser: Chrome
- Browser Version: 94.0.4606.61 (Official Build) (x86\_64)

**Additional context**  
I register a origin-trial, and add

```auto
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">

```

into index.html ,typeof SharedArrayBuffer ===‘function’ is true, but not working.  
where am i wrong? Hope your response. Thank you!

---

<div class="post-metadata">

**Author:** ![wuxyman](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/wuxyman/32/31886_2.png) [@wuxyman](https://devforum.zoom.us/u/wuxyman)\
**Post date:** [October 14, 2021, 3:53am UTC](https://devforum.zoom.us/t/not-render-on-canvas/58846/2 "2021-10-14T03:53:26Z")

</div>

“Sorry, you can’t embed media items in a post.”

when i upload picture,i got an error above.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [October 14, 2021, 3:47pm UTC](https://devforum.zoom.us/t/not-render-on-canvas/58846/4 "2021-10-14T15:47:00Z")

</div>

Hey @wuxyman ,

Can you try upgrading to version Video SDK version 1.1.5? We had a bug fix in that version for videos.

[https://marketplace.zoom.us/docs/changelog#publications/video-sdk-web-v1-1-5](https://marketplace.zoom.us/docs/changelog#publications/video-sdk-web-v1-1-5)

Also checkout this workaround to set the proper CDN:

> [@Web Video SDK 1.1.5 Dependency Work Around](https://devforum.zoom.us/t/web-video-sdk-1-1-5-dependency-work-around/57969):
>
> Hey Web Video SDK developers, In version 1.1.5 there is an issue where the SDK points to version 1.1.4 dependencies. We will fix this issue in version 1.1.6. In the meantime, there are two workarounds to point to the 1.1.5 dependencies: Pass in the 1.1.5 CDN path to the dependentAssets parameter: https://source.zoom.us/videosdk/1.1.5/lib [620596F2-C2D8-4DE4-8A88-1B0DFA38B051] zmClient.init('en-US', 'https://source.zoom.us/videosdk/1.1.5/lib'); OR Search and replace 1.1.4 to 1.1.5 i…

Let me know if that helps! 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![wuxyman](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/wuxyman/32/31886_2.png) [@wuxyman](https://devforum.zoom.us/u/wuxyman)\
**Post date:** [October 15, 2021, 2:34am UTC](https://devforum.zoom.us/t/not-render-on-canvas/58846/5 "2021-10-15T02:34:04Z")

</div>

Thanks for your response.  
Firstly, I upgrade to version 1.1.5, and set client.init’s resource proper ‘CDN’,but it points to version 1.1.4 dependencies. That does not work.  
So, I set client.init’s resource proper ‘[https://source.zoom.us/videosdk/1.1.5/lib](https://source.zoom.us/videosdk/1.1.5/lib)’, also it does not work.

---

<div class="post-metadata">

**Author:** ![wuxyman](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/wuxyman/32/31886_2.png) [@wuxyman](https://devforum.zoom.us/u/wuxyman)\
**Post date:** [October 22, 2021, 10:44am UTC](https://devforum.zoom.us/t/not-render-on-canvas/58846/6 "2021-10-22T10:44:57Z")

</div>

The Video SDK does not support turning on the video programmatically due to privacy features. A user has to click a button on the page that triggers the stream.startVideo() function.

I resolve my problem by the above message. I hope it can help others.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [October 29, 2021, 9:29pm UTC](https://devforum.zoom.us/t/not-render-on-canvas/58846/7 "2021-10-29T21:29:57Z")

</div>

Thanks for sharing the solution @wuxyman ! 🙂

-Tommy

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [November 29, 2021, 7:30am UTC](https://devforum.zoom.us/t/not-render-on-canvas/58846/8 "2021-11-29T07:30:30Z")

</div>

Closed on November 29, 2021, 7:30am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.