Host/panelist video and screen are black screen, disabling cam prompts avatar + name

Meeting SDK Web
1

Description
We’ve embedded a Webinar into an iframe and when I join it, the host’s video stream and shared screen are just a black screen.

Error
Embedded WebSDK webinar doesn’t show video or screen stream.
It used to work before (<1.8.0) but we had to upgrade to 1.8.0 because of an “Unexpected end of JSON” error in the React stuff when we built the script for production.

There are on errors in the console and the console even correctly logs “startRenderVideo” and “stopRenderVideo” as seen in the following screenshot:

image
image1712×647 126 KB
.

I don’t know whether this is relevant, but we use the following code to load the wasm/sdk:
ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.8.0/lib’, ‘/av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

Which version?
Web SDK v1.8.0

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Start Webinar with Video as host
  2. Go to Webinar embedded in iframe as attendee
  3. Get black screen instead of video

Screenshots
The View:

image
image983×602 14.4 KB

Under the hood:
image
image1712×647 126 KB

  • Device: Dell laptop
  • OS: Ubuntu
  • Version: 18.04
  • Browser: Chrome
2

Faced the same issue with multiple devices, multiple browsers

3

Hey @acharya.gunjan, @ViaFutura,

The Web SDK was not designed to be embedded in an iFrame so there could be issues.

Are you seeing the same issues when using the Web SDK on a web page without an iFrame?

Thanks,
Tommy

4

I get the same issue on a page that only has the Zoom scripts.

Besides, the reason we use an iFrame is because the Zoom WebSDK blackens the entire screen the moment it’s imported. If it was a little less intrusive (say, only appending DOM elements on some form of init call) we wouldn’t be using iframes at all.

Kind regards

5

Hey @ViaFutura,

Is the host video on? Can you please share your Web SDK code snippets or a GitHub repo so we can reproduce the issue and debug it locally?

Here are some tips on how to use the Web SDK in your app without it affecting your styling and layout:

Thanks,
Tommy

6

Here’s our JS snippet:

try {
    window.$ = window.jQuery = require('jquery');
    window.$.noConflict();
} catch (e) {
}

let allowedIds = [];
if (sessionStorage.getItem('webinars_allowed')) {
    allowedIds = JSON.parse(sessionStorage.getItem('webinars_allowed')) || [];
}
let webinarId = document.querySelector('body').dataset['webinarId'];
import axios from 'axios';

if (!allowedIds.includes(parseInt(webinarId))) {
    history.back();
}
const zm = {
    data: {
        key: null,
        signature: null,
        webinar: null,
        identity: JSON.parse(atob(sessionStorage.getItem('webinar_identity')))
    },

    getWebinar() {
        return axios.get(`/webinars/${webinarId}`)
            .then((response) => {
                zm.data.webinar = response.data.data;
            });
    },
    getSignature() {
        return axios.post(`/signature`, {
            meeting_id: [Meeting ID]
        })
            .then((response) => {
                zm.data.key = response.data.key;
                zm.data.signature = response.data.signature;
                zm.join();
            });
    },
    join() {
        ZoomMtg.init({
            debug: false,
            leaveUrl: window.location.href,
            isSupportAV: true,
            success: () => {
                ZoomMtg.join(zm.getMeetingConfig());
            }
        })
    },
    getMeetingConfig() {
        return {
            signature: zm.data.signature,
            apiKey: zm.data.key,
            meetingNumber: parseInt([Meeting ID]),
            userName: zm.data.identity.name || 'Anonymous',
            userEmail: zm.data.identity.email,
            passWord: [password]
        }
    }
}

import {ZoomMtg} from '@zoomus/websdk';

ZoomMtg.setZoomJSLib('https://source.zoom.us/1.8.0/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
zm.getWebinar()
    .then(() => {
        zm.getSignature();
    });

It boils down to:

  • Set lib source
  • Preload wasm & WebSDK
  • Get Webinar config
  • Get Signature (which is correct)
  • Init and join Zoom Webinar

Host video is definitely on. I tried with screen sharing as well but it didn’t work either.

7

Thanks @ViaFutura,

Our Web SDK engineers are looking into this issue. I will provide an update once we figure out what the issue is. (CS-2322)

-Tommy