###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>
)
}