Description
Hi. I have seen questions posted related to this error already but wasn’t able to solve my issue after reading through those. I have just started working with the Video SDK and am unable to simply start a video session because of this error. I am following the documentation exactly, and have copied the exact code from step three [here] in order to render the video, so I’m not sure why there is an error.
Browser Console Error
- reason: “You must pass a
- type: “INVALID_PARAMETERS”
Which Web Video SDK version?
1.3.0
Video SDK Code Snippets
import React from 'react';
import ZoomVideo from '@zoom/videosdk'
import { generateVideoToken } from '../../utils/util';
interface Props {
setLoading: any;
}
const ActiveSession: React.FC<Props> = (props: any) => {
const [activeSession, setActiveSession] = React.useState<boolean>(false);
const client = ZoomVideo.createClient();
client.init('en-US', 'CDN');
let stream:any;
const endActiveSession = () => {
if(client){
client.leave();
setActiveSession(false);
}
}
const startVideo = async (stream:any) => {
if(!!window.chrome && !(typeof SharedArrayBuffer === 'function')) {
// if desktop Chrome or Edge (Chromium) with SharedArrayBuffer not enabled
stream.startVideo({ videoElement: document.querySelector('#self-view-video') })
} else {
// all other browsers and desktop Chrome or Edge (Chromium) with SharedArrayBuffer enabled
stream.startVideo(() => {
stream.renderVideo(document.querySelector('#self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 3)
})
}
}
const openActiveSession = async () => {
props.setLoading(true);
const sdkKey = ;
const sdkSecret = ;
const topic = "My First Session"
const token = generateVideoToken(
sdkKey, sdkSecret, topic
);
const userName = "jamieson";
const password = "Jumb0tr0n!";
await client.join(topic, token, userName, password).then(() => {
stream = client.getMediaStream();
setActiveSession(true);
startVideo(stream);
}).catch((error) => {
console.log(error)
props.setLoading(false)
})
}
return (
<div className="w-[100%]">
{activeSession ? (
<div className="w-[100%] flex flex-col items-center">
<video id='self-view-video' />
<canvas id='self-view-canvas'></canvas>
<button className="btn-primary btn-blue" onClick={endActiveSession}>End Session</button>
</div>
) : (
<>
<div
className="w-[100%] h-[336px] border border-1 border-vibrantBlue bg-vibrantBlue/[0.04]
rounded-[14px] flex items-center justify-center text-vibrantBlue"
>
<div className="flex flex-col items-center">
<h5 className='font-bold text-[22px] mb-[12px]'>No Active Session</h5>
<p className="text-[16px] mb-[24px]">Click below to start a new session.</p>
<button className="btn-primary btn-blue mx-auto" onClick={openActiveSession}>
New
</button>
</div>
</div>
</>
)}
</div>
);
}
export default ActiveSession;
To Reproduce(If applicable)
Steps to reproduce the behavior:
- Click the “New” button to generate token and call the client.getMediaStream() method. After this succeeds, the startVideo() function is called, which tries to call stream.startVideo or stream.renderVideo. This is when the error is triggered.
Device (please complete the following information):
- Device: Macbook Pro
- OS: macOS 12.2.1
- Browser: Chrome
- Browser Version: Chrome Version 99.0.4844.74 (Official Build) (arm64)