Self-view video is not visible in IOS devices

Video SDK Web
1

Description
We are integrating Video SDK into our web application with React-js web platform.The self view video rendering is not visible on IOS Devices(safari browser).In android browsers self video rendering is working. Whenever two users join in the same session in safari browser user’s own streaming is not visible to them. Other users are able to see their streaming, we tried to fix this and did multiple tests in Safari browser it’s only showing black screen.

Browser Console Error
{
reason: “Received Canvas is Falsy” ​,
type: “INVALID_PARAMETERS”
}

Web Video SDK version
version : 1.5.1

Video SDK Code Snippet
Here you can see the video rendering code

if (isAndroidBrowser() || (isSupportOffscreenCanvas() && !mediaStream?.isSupportMultipleVideos())) {
        const videoElement = document.querySelector(`#${SELF_VIDEO_ID}`) as HTMLVideoElement;

        if (videoElement) {
          await mediaStream?.startVideo({ hd: true, videoElement, cameraId: 'environment' });
        }
      } else {
        const startVideoOptions = { hd: true, cameraId: 'environment' };

        if (mediaStream?.isSupportVirtualBackground()) {
          Object.assign(startVideoOptions, { virtualBackground: { imageUrl: 'blur' } });
        }
        await mediaStream?.startVideo(startVideoOptions);
        if (!mediaStream?.isSupportMultipleVideos()) {
          try{
            const canvasElement = document.querySelector(`#${SELF_VIDEO_ID}`) as HTMLCanvasElement;
            await mediaStream?.renderVideo(canvasElement, zmClient.getSessionInfo().userId, 1280, 720, 0, 0, 3);
          } catch (error)  {
            console.log(error);
          }
        }
      }
2

I pinged our team to see if there are any differences when using Safari that we should watch out for. Just to confirm, is this only with IOS devices, or are you seeing this with MacOS and iPadOS when using Safari as well?

3

Thaks for your reply @MaxM , we are facing this issue with IOS, MacOS and iPadOS devices when using Safari.In the MacOS, IOS when we test with chrome browser it’s working.

4

Hey @eswarsai305

In your code snippet,

if (!mediaStream?.isSupportMultipleVideos()) {
try{
const canvasElement = document.querySelector(#${SELF_VIDEO_ID}) as HTMLCanvasElement;
await mediaStream?.renderVideo(canvasElement, zmClient.getSessionInfo().userId, 1280, 720, 0, 0, 3);
} catch (error) {
console.log(error);
}
}

I saw you are using the same ID for the video element and canvas element, could you please check whether the element is a canvas element, the renderVideo requires a canvas element.

We will improve the verbose conditions for rendering videos in the next release. There will be an API to tell you when to use Video Element as the parameter explicitly.

Thanks
Vic

5

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