Hello,
We have a web application running on Nuxt with Zoom video sdk version 2.1.5 implemented.
We want to allow our users to preview their camera inside a session with or without camera enabled and separated away from other remote participants. We tried two approaches, which both succeeded for desktops, but failed for mobiles.
First, we tried to accomplish it with ZoomVideo.localVideoTrack, but after we started to receive different, unexpected results on mobile devices we changed local camera preview functionality with stream.previewVirtualBackground (we pass undefined for imageUrl parameter). The second approach does not show us any exclusive error. Here is a function that we use for handling local participant after he joins the session:
async function handleLocalParticipantConnected(participant: ZoomParticipant): Promise<void> {
try {
const { cameras } = await fetchDevices()
const camera: DeviceData | undefined = cameras.find(camera => camera.id === devices.camera.id) || cameras?.[0]
if (devices.camera.enabled) {
try {
if (!camera?.id)
throw new Error('Unable to detect camera')
await stream!.startVideo({
cameraId: camera.id,
virtualBackground: virtualBackground.value, /* this is either { imageUrl: 'blur' } or undefined determined by stream!.isSupportVirtualBackground() */
})
} catch (error) {
}
}
const previewVideoElement: VideoPlayer = document.querySelector('video-player#local-video')!
const promise = stream!.previewVirtualBackground(previewVideoElement, undefined)
alert('before promise')
promise
.then((result) => {
alert('promise resolved')
}).catch((error) => {
alert('promise error')
})
.finally(() => {
alert('promise finally')
})
try {
await stream!.startAudio({
mute: !devices.microphone.enabled,
microphoneId: devices.microphone.enabled ? (devices.microphone.id || undefined) : undefined,
speakerId: devices.speakers.id || undefined,
})
} catch(e) {}
// }
} catch(error) { console.log('local participant connection error ' + error)}
}
In this function you can find alert() which we use for debugging purposes. For desktops we receive “promise resolved” and “promise finally” alerts and camera preview works fine, but for mobile devices we do not receive neither of alerts declared in then(), catch() or finally() blocks.
While troubleshooting, I opened Chrome dev tools and entered responsive mode with desktop-sized window and it failed to show camera preview also. For me, it looks like that user agent has something to do with this.
Is there a mistake that I made in this code or did I misunderstood which function should be used for previewing local camera inside a session?
Thank you!