I am trying to setup the call between 2 two different users where in the call to be initiated by the host user only and i am not getting any idea how to initiate the call.
Technologies used
FrondEnd ReactJS
Socket.io for the same session to create
will be using the ZoomVideo SDK
same session is created but the initiating of the call is bit confusing
Please help me out here with the call initiating.
I want to make sure I’m understanding your needs correctly; you’re able to initiate a session, but unable to join the session (initiate the call). Is this correct?
Thanks,
Rehema
Hi @rehema.zoom
I able to join the call but the problem here is i am not able to put functional video button(the video is not switching on even after starting the button)
Code
import ZoomVideo from “@zoom1234/videosdk”;
import { generateSessionToken } from “…/config/signature”;
import { Button, Tooltip } from “antd”
import React, { useEffect, useState, useCallback } from ‘react’;
import {
AudioOutlined,
AudioMutedOutlined,
VideoCameraAddOutlined,
VideoCameraOutlined,
WechatOutlined,
} from “@ant-design/icons”
// window.ZoomVideo = ZoomVideo
export default function ZoomVideoSample(socket) {
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(‘’)
console.log(socket);
const zmClient = ZoomVideo.createClient();
const sessionConfig = {
sdkKey: 'redacted',
sdkSecret: 'redacted',
topic: 'Call handle',
password: '123',
name: 'XYZ',
sessionKey: '',
user_identity: '',
role: 0
};
// console.log('zmClient1:', zmClient);
let mediaStream
const sessionToken = generateSessionToken(
sessionConfig.sdkKey,
sessionConfig.sdkSecret,
sessionConfig.topic,
sessionConfig.password,
sessionConfig.sessionKey,
sessionConfig.user_identity,
sessionConfig.role
);
const createOne = () => {
// const zmClient = ZoomVideo.createClient();
zmClient.init('US-en', 'CDN')
zmClient.join(sessionConfig.topic, sessionToken, sessionConfig.name, sessionConfig.password).then(() => {
mediaStream = zmClient.getMediaStream()
// mediaStream.startVideo()
setMediaStreamVideo(mediaStream = zmClient.getMediaStream())
console.log('YES', mediaStream);
}).catch((error) => {
console.log(error)
})
}
const isSupportWebCodecs = () => {
return typeof window.MediaStreamTrackProcessor === "function"
}
const startVideoButton = useCallback(async () => {
console.log("MEDIASTREAM", mediaStreamVideo);
if (!videoStarted) {
// if (typeof (window) !== 'undefined') {
if (mediaStreamVideo.isRenderSelfViewWithVideoElement()) {
setIsSAB(false)
mediaStreamVideo.startVideo({ videoElement: document.querySelector('#my-self-view-video') }).then(() => {
document.querySelector('#my-self-view-video').style.display = 'block'
}).catch((error) => {
console.log(error)
})
} else {
setIsSAB(true)
mediaStreamVideo.startVideo().then(() => {
mediaStreamVideo.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)
})
}
// }
setVideoStarted(true)
}
else {
setVideoStarted(false)
console.log("MEDIASTREAM", zmClient.getCurrentUserInfo());
await mediaStreamVideo.stopVideo()
if (isSAB) {
mediaStreamVideo.stopRenderVideo(
document.querySelector("#self-view-canvas"),
zmClient.getCurrentUserInfo().userId
)
}
}
}, [mediaStreamVideo, videoStarted, zmClient, isSAB])
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 chat = client.getChatClient()
}
}, [zmClient, setIsChat])
useEffect(() => {
createOne();
}, [socket]);
return <div>
{isSAB ? (
<canvas id="self-view-canvas" width="1920" height="1080"></canvas>
) : (
<video id="self-view-video" width="1920" height="1080"></video>
)}
{!isSupportWebCodecs() ? (
<canvas id="share-canvas" width="1920" height="1080"></canvas>
) : (
<video id="share-video" width="1920" height="1080"></video>
)}
{/* <canvas id="participant-videos-canvas" height="1080" width="1920"></canvas> */}
<div className="video-footer">
<Tooltip title={`${videoStarted ? "Stop Camera" : "Start Camera"}`}>
<Button
className="camera-button"
icon={
videoStarted ? (
<VideoCameraOutlined />
) : (
<VideoCameraAddOutlined />
)
}
shape="circle"
size="large"
onClick={startVideoButton}
/>
</Tooltip>
<Tooltip
title={`${audioStarted ? (isMuted ? "unmute" : "mute") : "Start Audio"
}`}
>
<Button
className="camera-button"
icon={
// audioStarted ? (
isMuted ? (
<AudioMutedOutlined />
) : (
<AudioOutlined />
)
// ) : (
// <input type="icon-headset" />
// )
}
shape="circle"
size="large"
onClick={startAudioButton}
/>
</Tooltip>
<Tooltip
title={`${isChat ? "Chat" :""
}`}
>
<Button
className="camera-button"
icon={
<WechatOutlined />
}
shape="circle"
size="large"
onClick={startChatButton}
/>
</Tooltip>
</div>
</div>
}
Hi @rehema.zoom
Hoping you could help me with an issue I’m facing in the turning on the video. I have tried putting the video component in the separate file … still i could not find any solution.
When trying to start video with your button, are you getting a pop-up to allow camera access on your browser? The error ‘camera is closed’ could be related to browser permissions being defaulted to ‘do not allow access’.
Thanks,
Rehema
Hi @rehema.zoom
I am trying to start the video on the button click and i am not getting any popup to turn on the camera.
const startVideoButton = useCallback(async () => {
console.log(“MEDIASTREAM”, mediaStreamVideo);
if (!videoStarted) {
// if (typeof (window) !== ‘undefined’) {
if (mediaStreamVideo.isRenderSelfViewWithVideoElement()) {
setIsSAB(false)
mediaStreamVideo.startVideo({ videoElement: document.querySelector('#my-self-view-video') }).then(() => {
document.querySelector('#my-self-view-video').style.display = 'block'
}).catch((error) => {
console.log(error)
})
} else {
setIsSAB(true)
mediaStreamVideo.startVideo().then(() => {
mediaStreamVideo.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)
})
}
// }
setVideoStarted(true)
}
else {
setVideoStarted(false)
console.log("MEDIASTREAM", zmClient.getCurrentUserInfo());
await mediaStreamVideo.stopVideo()
if (isSAB) {
mediaStreamVideo.stopRenderVideo(
document.querySelector("#self-view-canvas"),
zmClient.getCurrentUserInfo().userId
)
}
}
}, [mediaStreamVideo, videoStarted, zmClient, isSAB])
I’ve tested with the code snippet you provided and am not running into the same issue. For extra clarity, could you try running the sample application in the same browser you’re currently using and see if you get the same error?
Also, can you try resetting your permissions for audio and video access, just in case? There should be an information symbol at the start of the URL for your application (I’m assuming you’re using Chrome based on the screenshots), and you can click it to do so.
Thanks,
Rehema
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.