Not render on canvas

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

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

<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!

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

when i upload picture,i got an error above.

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

Also checkout this workaround to set the proper CDN:

Let me know if that helps! :slight_smile:

Thanks,
Tommy

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’, also it does not work.