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:
- Go to ‘…’
- Click on ‘…’
- Scroll down to ‘…’
- 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!
