PureJs Zoom meeting SDK: After joining host is not visible in iOS safari Browser

Question

I am creating a website where implementing zoom meeting sdk in PureJS. Everything works fine on chrome, Mozilla but when joining the meeting on Safari, Host video is not visible to Host and when checked on inspect element, it is showing that video element is having top and left of -10000. I am creating this for only 2 people, one host and other participate. Also I create bundle to use the entire sdk.

we have downloaded the reference from https://github.com/zoom/videosdk-web-sample and inside /src/js/meeting/session/video/ there is a file video-toggler.js where they have following code which calculate the Participant and self video. Unable to locate the issue.

    import state from "../simple-state";
    import { VideoQuality } from '@zoom/videosdk';
    import { VIDEO_CANVAS, VIDEO_CANVAS_DIMS, SELF_VIDEO_ELEMENT, SELF_VIDEO_CANVAS } from './video-render-props';


    let prevIsSelfVideoOn = false;
    let prevIsParticipantVideoOn = false;

    export const toggleSelfVideo = async (mediaStream, isVideoOn) => {
    const isUsingVideoElementToStartVideo =
        typeof window.OffscreenCanvas === 'function' && !mediaStream.isSupportMultipleVideos();
    const isRenderingSingleVideoOnCanvas =
        typeof window.OffscreenCanvas !== 'function' && !mediaStream.isSupportMultipleVideos();
    if (typeof isVideoOn !== 'boolean' || prevIsSelfVideoOn === isVideoOn) {
        return;
    }
    const canvas = isRenderingSingleVideoOnCanvas ? SELF_VIDEO_CANVAS : VIDEO_CANVAS;
    if (isVideoOn) {
        if (isUsingVideoElementToStartVideo) {
        SELF_VIDEO_ELEMENT.style.display = 'block';
        SELF_VIDEO_ELEMENT.style.width = '50%';
        SELF_VIDEO_ELEMENT.style.left = '50%';
        await mediaStream.startVideo({ videoElement: SELF_VIDEO_ELEMENT });
        } else {
        await mediaStream.startVideo();
        if (isRenderingSingleVideoOnCanvas) {
            SELF_VIDEO_CANVAS.style.display = 'block';
            SELF_VIDEO_CANVAS.style.width = '50%';
            SELF_VIDEO_CANVAS.style.height = '50%';
            SELF_VIDEO_CANVAS.style.left = '50%';
            SELF_VIDEO_CANVAS.style.top = '50%';
            SELF_VIDEO_CANVAS.style.transform = 'translateY(-50%)';
            await mediaStream.renderVideo(
            canvas,
            state.selfId,
            VIDEO_CANVAS_DIMS.Width / 2,
            VIDEO_CANVAS_DIMS.Height / 2,
            0,
            0,
            VideoQuality.Video_360P
            );
        } else {
            await mediaStream.renderVideo(
            canvas,
            state.selfId,
            VIDEO_CANVAS_DIMS.Width / 2,
            VIDEO_CANVAS_DIMS.Height,
            VIDEO_CANVAS_DIMS.Width / 2,
            0,
            VideoQuality.Video_360P
            );
        }
        }
    } else {
        await mediaStream.stopVideo();
        if (!isUsingVideoElementToStartVideo) {
        if (isRenderingSingleVideoOnCanvas) {
            SELF_VIDEO_CANVAS.style.display = 'none';
        }
        await mediaStream.stopRenderVideo(canvas, state.selfId);
        } else {
        SELF_VIDEO_ELEMENT.style.display = 'none';
        }
    }
    prevIsSelfVideoOn = isVideoOn;
    };

    export const toggleParticipantVideo = async (mediaStream, userId, isVideoOn) => {
    if (typeof isVideoOn !== 'boolean' || prevIsParticipantVideoOn === isVideoOn) {
        return;
    }

    if (isVideoOn) {
        await mediaStream.renderVideo(
        VIDEO_CANVAS,
        userId,
        VIDEO_CANVAS_DIMS.Width / 2,
        VIDEO_CANVAS_DIMS.Height,
        0,
        0,
        VideoQuality.Video_360P
        );
    } else {
        await mediaStream.stopRenderVideo(VIDEO_CANVAS, userId);
    }
    prevIsParticipantVideoOn = isVideoOn;
    };

Answer 1

Zoom Developer Advocate here. The pure JS Video SDK sample was outdated. We have since replaced this sample with the existing and up to date React sample.

Here is the code to start and render your video in all browsers, including Safari:

<video id="my-self-view-video" width="1920" height="1080"></video>
<canvas id="my-self-view-canvas" width="1920" height="1080"></canvas>

#my-self-view-video, #my-self-view-canvas {
   width: 100%;
   height: auto;
}

if(mediaStream.isRenderSelfViewWithVideoElement()) {
   await mediaStream.startVideo({ videoElement: document.querySelector('#my-self-view-video') })
   // video successfully started and rendered
} else {
   await mediaStream.startVideo()
   await mediaStream.renderVideo(document.querySelector('#my-self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 3)
   // video successfully started and rendered
}

Here is the code to render remote users in all browsers, including Safari:

<canvas id="participant-videos-canvas" width="1920" height="1080"></canvas>

#participant-videos-canvas {
   width: 100%;
   height: auto;
}

await mediaStream.renderVideo(document.querySelector('#participant-videos-canvas'), USER_ID, 1920, 1080, 0, 0, 3)

For additional reference:

• You can see the user videos on Safari working in this React sample, or the UI toolkit.

• We also have examples of starting and rending video in the Zoom Video SDK documentation.

For questions specific to the Zoom Developer Platform, feel free to ask on the Zoom devforum.