Hi Team,
As i am using React Native zoom video sdk version is “@zoom/react-native-videosdk”: “^1.12.10”,
“@zoom/videosdk”: “^1.12.5”, there are Host who is left and join, co-host side we are not able to see video of Host, and we need to get information about Host as well! so we have to showcase them can you please help me for same!Attaching code for reference!
import React, {useState, useRef, useEffect} from ‘react’
import {
View,
Alert,
StyleSheet,
BackHandler,
TouchableOpacity,
ActivityIndicator,
} from ‘react-native’
import {
useZoom,
ZoomVideoSdkUser,
EventType,
VideoAspect,
ZoomView,
} from ‘@zoom/react-native-videosdk’
import Icon from ‘react-native-vector-icons/MaterialIcons’
import {useNavigation, useFocusEffect} from ‘@react-navigation/native’
import {useDispatch, useSelector} from ‘react-redux’
import {resetZoomSession} from ‘…/…/store/actions/homeActions’
import {navigate} from ‘…/…/navigation/navigation-helpers’
import {
selectedZoomSession,
selectHomeError,
} from ‘…/…/store/selector/homeSelectors’
import {showErrorMessage} from ‘…/…/app-base/utils’
const CustomZoomSessionHandler = ({route, onSessionJoin, onSessionLeave}) => {
const {appointment} = route.params
const dispatch = useDispatch()
const zoom = useZoom()
const listeners = useRef()
const [sessionEnded, setSessionEnded] = useState(false)
const [isLoading, setIsLoading] = useState(true)
const [isInSession, setIsInSession] = useState(false)
const [isAudioMuted, setIsAudioMuted] = useState(true)
const [isVideoMuted, setIsVideoMuted] = useState(true)
const [users, setUsersInSession] = useState()
const zoomSessionData = useSelector(selectedZoomSession)
const error = useSelector(selectHomeError)
const clearListeners = () => {
listeners.current.forEach((listener) => listener.remove())
listeners.current =
}
useFocusEffect(
React.useCallback(() => {
const joinZoomSession = async () => {
if (zoomSessionData && !error && !isInSession && !sessionEnded) {
try {
setIsLoading(true)
const {session, token} = zoomSessionData
await zoom.joinSession({
sessionName: session,
sessionPassword: ‘’,
token,
userName: appointment.patientName,
audioOptions: {
connect: true,
mute: true,
autoAdjustSpeakerVolume: false,
},
videoOptions: {localVideoOn: true},
sessionIdleTimeoutMins: 0,
})
} catch (joinError) {
console.log(‘joinError’, joinError)
setIsLoading(false)
dispatch(resetZoomSession())
}
// Listener for session join
listeners.current.push(
zoom.addListener(EventType.onSessionJoin, async () => {
const localUser = new ZoomVideoSdkUser(
await zoom.session.getMySelf(),
)
const remoteUsers = await zoom.session.getRemoteUsers()
setUsersInSession([
localUser,
...remoteUsers.map((user) => new ZoomVideoSdkUser(user)),
])
setIsInSession(true)
setIsLoading(false) // Stop loading when session is joined
onSessionJoin && onSessionJoin([localUser, ...remoteUsers])
const isMuted = await localUser.audioStatus.isMuted()
const videoOn = await localUser.videoStatus.isOn()
setIsAudioMuted(isMuted)
setIsVideoMuted(!videoOn)
}),
)
// Listener for user join
listeners.current.push(
zoom.addListener(EventType.onUserJoin, async (event) => {
const {joinedUsers, remoteUsers} = event
const allUsers = [...joinedUsers, ...remoteUsers]
const uniqueUsers = Array.from(
new Map(
allUsers.map((user) => [
user.userId,
new ZoomVideoSdkUser(user),
]),
).values(),
)
setUsersInSession(uniqueUsers)
if (!isInSession) {
setIsInSession(true)
setIsLoading(false)
onSessionJoin && onSessionJoin(uniqueUsers)
}
}),
)
// Listener for session leave
listeners.current.push(
zoom.addListener(EventType.onSessionLeave, () => {
leaveSession(false)
}),
)
}
}
// Join session if session data and no error
if (zoomSessionData && !error && !isInSession) {
joinZoomSession()
} else if (error) {
showErrorMessage(error ?? '')
dispatch(resetZoomSession())
navigate('Tab', {screen: 'Home'})
}
if (isInSession) {
setIsLoading(false)
}
const backHandler = BackHandler.addEventListener(
'hardwareBackPress',
handleBackPress,
)
return () => {
backHandler.remove()
clearListeners() // Ensure listeners are cleared when unmounting
}
}, [zoomSessionData, error, sessionEnded, isInSession, zoom]),
)
const handleBackPress = () => {
Alert.alert(
‘Leave Session’,
‘Are you sure you want to leave the session?’,
[
{text: ‘Cancel’, style: ‘cancel’},
{text: ‘Yes’, onPress: () => leaveSession()},
],
{cancelable: true},
)
return true
}
const leaveSession = async (notifyLeave = true) => {
if (!isInSession) return
try {
await zoom.leaveSession(false)
clearListeners()
setIsInSession(false)
setUsersInSession([])
setSessionEnded(true)
if (notifyLeave) {
onSessionLeave && onSessionLeave()
}
dispatch(resetZoomSession())
navigate('Tab', {screen: 'Home'})
} catch (error) {
console.error('Error leaving session:', error)
}
}
const toggleAudio = async () => {
const mySelf = await zoom.session.getMySelf()
const muted = await mySelf.audioStatus.isMuted()
if (muted) {
await zoom.audioHelper.unmuteAudio(mySelf.userId)
setIsAudioMuted(false)
} else {
await zoom.audioHelper.muteAudio(mySelf.userId)
setIsAudioMuted(true)
}
}
const toggleVideo = async () => {
const mySelf = await zoom.session.getMySelf()
const videoOn = await mySelf.videoStatus.isOn()
if (videoOn) {
await zoom.videoHelper.stopVideo()
setIsVideoMuted(true)
} else {
await zoom.videoHelper.startVideo()
setIsVideoMuted(false)
}
}
return (
{isLoading ? (
) : isInSession ? (
{users.map((user) => (
))}
) : null}
)
}
const ControlIcons = ({
isAudioMuted,
isVideoMuted,
onToggleAudio,
onToggleVideo,
onLeaveSession,
}) => {
return (
<Icon name={isAudioMuted ? ‘mic-off’ : ‘mic’} size={30} color=“#fff” />
<Icon
name={isVideoMuted ? ‘videocam-off’ : ‘videocam’}
size={30}
color=“#fff”
/>
<TouchableOpacity onPress={onLeaveSession}>
<Icon name="exit-to-app" size={30} color="red" />
</TouchableOpacity>
</View>
)
}
export default CustomZoomSessionHandler
const styles = StyleSheet.create({
container: {
width: ‘100%’,
alignSelf: ‘center’,
height: ‘100%’,
flex: 1,
justifyContent: ‘center’,
},
loadingContainer: {
…StyleSheet.absoluteFillObject,
backgroundColor: ‘#000000’,
alignItems: ‘center’,
justifyContent: ‘center’,
},
iconContainer: {
flexDirection: ‘row’,
justifyContent: ‘space-evenly’,
alignItems: ‘center’,
position: ‘absolute’,
bottom: 20,
width: ‘100%’,
backgroundColor: ‘rgba(0, 0, 0, 0.6)’,
paddingVertical: 10,
},
})