Error with zoom SDK

###Error

{type: ‘JOIN_MEETING_FAILED’, reason: ‘connection error’}

import React, { useEffect, useState, useContext, useCallback } from ‘react’;
import ZoomContext from ‘…/…/…/context/zoomContext’;
import { generateSessionToken } from ‘…/…/…/signature/signature’;
import { Button, Tooltip } from “antd”;
import {
AudioOutlined,
AudioMutedOutlined,
VideoCameraAddOutlined,
VideoCameraOutlined,
WechatOutlined,
} from “@ant-design/icons”

export default function ZoomVideoCall(socket) {
console.log(“Video Call”, { socket });
const zmClient = useContext(ZoomContext);
const [videoStarted, setVideoStarted] = useState(false)
const [audioStarted, setAudioStarted] = useState(false)
const [isMuted, setIsMuted] = useState(false)
const [isChat, setIsChat] = useState(false)
const [isSAB, setIsSAB] = useState(false)
const [mediaStreamVideo, setMediaStreamVideo] = useState(‘’)

const sessionConfig = {
    sdkKey: '',
    sdkSecret: ',
    topic: 'Customer Calling',
    password: '123',
    name: 'Cynthia',
    sessionKey: '',
    user_identity: '',
    role: 0
};
let mediaStream

const sessionToken = generateSessionToken(
    sessionConfig.sdkKey,
    sessionConfig.sdkSecret,
    sessionConfig.topic,
    sessionConfig.password,
    sessionConfig.sessionKey,
    sessionConfig.user_identity,
    sessionConfig.role
);
const createZoomClient = () => {
    zmClient.init('US-en', 'CDN')

    zmClient.join(sessionConfig.topic, sessionToken, sessionConfig.name, sessionConfig.password).then(() => {
        mediaStream = zmClient.getMediaStream()
        if (typeof (window) !== 'undefined') {
            if (mediaStream.isRenderSelfViewWithVideoElement()) {
                mediaStream.startVideo({ videoElement: document.querySelector('#my-self-view-video') }).then(() => {
                    document.querySelector('#my-self-view-video').style.display = 'block'
                }).catch((error) => {
                    console.log(error)
                })
            } else {

                mediaStream.startVideo().then(() => {
                    mediaStream.renderVideo(document.querySelector('#my-self-view-canvas'), zmClient.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 2).then(() => {
                        document.querySelector('#my-self-view-canvas').style.display = 'block'
                    }).catch((error) => {
                        console.log(error)
                    })
                }).catch((error) => {
                    console.log(error)
                })
            }
        }
    }).catch((error) => {
        console.log(error)
    })
}
const isSupportWebCodecs = () => {
    return typeof window.MediaStreamTrackProcessor === "function"
}
const startVideoButton = useCallback(async () => {
    if (typeof (window) !== 'undefined') {
        if (videoStarted) {
            await mediaStreamVideo?.stopVideo()
            setVideoStarted(false)
        } else {
            if (mediaStreamVideo?.isRenderSelfViewWithVideoElement()) {
                const videoElement = document.querySelector(`#SELF_VIDEO_ID`)
                if (videoElement) {
                    await mediaStreamVideo?.startVideo({ videoElement })
                }
            } else {
                const startVideoOptions = {
                    hd: true,
                    ptz: mediaStreamVideo?.isBrowserSupportPTZ()
                }
                if (mediaStreamVideo?.isSupportVirtualBackground()) {
                    Object.assign(startVideoOptions, {
                        virtualBackground: { imageUrl: "blur" }
                    })
                }
                await mediaStreamVideo?.startVideo(startVideoOptions)
                if (!mediaStreamVideo?.isSupportMultipleVideos()) {
                    const canvasElement = document.querySelector(`#SELF_VIDEO_ID`);
                    mediaStreamVideo.renderVideo(canvasElement,zmClient.getSessionInfo().userId,254,143,0,0,3);
                }
            }

            setVideoStarted(true)
        }
    }

}, [mediaStreamVideo, videoStarted, zmClient])

const startAudioButton = useCallback(async () => {
    if (audioStarted) {
        if (isMuted) {
            await mediaStreamVideo.unmuteAudio()
            setIsMuted(false)
        } else {
            await mediaStreamVideo.muteAudio()
            setIsMuted(true)
        }
    } else {
        await mediaStreamVideo.startAudio()
        setAudioStarted(true)
    }
}, [mediaStreamVideo, audioStarted, isMuted])

// const startChatButton = useCallback(async () => {
//     // if (isChat) {
//     const chatClient = zmClient.getChatClient()
//     const userId = zmClient.getCurrentUserInfo().userId
//     chatClient?.send('Hey participant', userId)
//     chatClient?.sendToAll('Hey everyone')
//     zmClient?.on('chat-on-message', (payload) => {
//         console.log(payload)
//         console.log(`Message: ${payload.message}, from ${payload.sender.name} to ${payload.receiver.name}`)
//     })
//     // }
// }, [zmClient, setIsChat])

useEffect(() => {
    createZoomClient();
}, [socket]);
console.log({ zmClient }, { socket });
return (
    <div>
       <div style={{ height: "50px", width: "100px" }}>
            <video id="my-self-view-video" width="1920" height="1080"></video>
            <canvas id="my-self-view-canvas" width="1920" height="1080"></canvas>
        </div>
    </div>
)

}

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