Zoom Video Sample App Mobile NotAllowedError During Preview

Video SDK Web
,
1

Web SDK Version: @zoom/videosdk": “^1.11.6 and @zoom/videosdk”: "^1.10.7

In the Zoom Video SDK Sample app, there is a route /preview which allows the user to test their camera and microphone before joining a session. When trying to use the preview from a mobile device (I am using iOS 15.5), even after setting the permissions, when trying to start the camera with await localVideo?.start(videoRef.current);, the error NotAllowedError is always thrown.

The preview screen uses a different approach to show the video (without using the mediaStream) as the user is not in an actual video call. Video works correctly on my mobile device in the actual video call (using mediaStream?.renderVideo). It is only in this preview screen that there is an issue.

I have copied the sample app to a live domain and also tried on my own mobile device and using an Xcode simulator, both having the same issue.

Just out of curiosity, I checked another Zoom sample app, ‘Zoom Telehealth Sample App,’ which uses the Zoom uitoolkit preview. It works as expected for mobile.

I have been using this app as a starting point for creating my own video application, so any help to get this working is appreciated.

Link to sample app: GitHub - zoom/videosdk-web-sample: Zoom Video SDK web sample

Full error: Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

2

Hey @Billy117

Thanks for your feedback.

We tested it with our devices and cannot reproduce the issue.

Could you share the problematic session IDs with us for troubleshooting?

Thanks
Vic

3

Hi thank you for the response. It’s actually not part of any session, but the preview screens. It is using the following function to get the devices:

const mountDevices: () => Promise<{
  mics: ZoomMediaDevice[];
  speakers: ZoomMediaDevice[];
  cameras: ZoomMediaDevice[];
}> = async () => {
  allDevices = await ZoomVideo.getDevices();
  const cameraDevices: Array<MediaDeviceInfo> = allDevices.filter((device) => {
    return device.kind === 'videoinput';
  });
  const micDevices: Array<MediaDeviceInfo> = allDevices.filter((device) => {
    return device.kind === 'audioinput';
  });
  const speakerDevices: Array<MediaDeviceInfo> = allDevices.filter((device) => {
    return device.kind === 'audiooutput';
  });
  return {
    mics: micDevices.map((item) => {
      return { label: item.label, deviceId: item.deviceId };
    }),
    speakers: speakerDevices.map((item) => {
      return { label: item.label, deviceId: item.deviceId };
    }),
    cameras: cameraDevices.map((item) => {
      return { label: item.label, deviceId: item.deviceId };
    }),
  };
};

This works perfectly and I can get the list of devices.

However when the following is called the permission error is throw, even after setting the permissions correctly.

await localVideo?.start(videoRef.current); // throws error

If I just skip this screen and go into a regular session, it works as expected on mobile devices and I can join and stream video.

Thanks,

4

Hey @Billy117

Thanks for sharing the code snippets with us.

Based on our experience, it might be an autoplay issue. Can you add the muted and playsinline attributes to the video tag?

<video muted={true} playsInline ref={videoRef} />

We will improve this method in the next release.

Thanks
Vic

5

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