You must pass a <video> element to start video capture for Chromium browser, Android browser, and Chrome without SharedArrayBuffer support

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

  1. reason: “You must pass a
  2. 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:

  1. 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)

Read this.
if you not have Chrome Origin Trials token u must use video element in chromium browser

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