No AUDIO or INTERACTION in Webinar with Web SDK

Description
I was trying to have support to Webinars in my application with Zoom Web Client, but it was not working and after navigating through this forum, I was recommended to switch to Zoom Web SDK.

After installing everything and managing to Join in the webinar, I’m now not being able to click on anything.

I mean, the things I click just doesn’t have effect.
Like “joining with computer audio” or anything else.

The only clue I get is an Websocket error, shown below.

Besides that, I’d also like to change the Width of the HTML Div added to my application when I’m using the Web SDK. Maybe I could have opened another topic for that but maybe it’s simple and you guys could tell me how to do that through here?

Error
WebSocket connection to 'wss://xmppwsswebinar.zoom.us/xmpp-websocket' failed: Data frame received after close

Which version?
Zoom Web SDK V. 1.7.8

Screenshots
I don’t have screenshots to exemplify that. It’s simply that: I can’t interact with any buttons. I click on things but nothing happens.

Hey @gabrielsmelo.dev,

That is strange, what device are you using? Are you serving your site over https?

Screenshots would be helpful as I cannot reproduce this issue.

Thanks,
Tommy

Hi @tommy, yes I’m serving over https, and I’m using Windows + Chrome.

Here’s an example… I have your element inside my page, but when I’m clicking on “Check Captcha”, nothing happens. Just like if it the buttons hasn’t interactivity.

Hey @gabrielsmelo.dev,

Are you embedding the Web SDK into your site via an iFrame? If so, you may need to add the allow-scripts attribute to your iFrame.

https://www.w3schools.com/tags/att_iframe_sandbox.asp

Thanks,
Tommy

Hi @tommy,

I’m not embedding via an iFrame. I was doing that before, but I was oriented to use WebSDK because the iframe does not supports Zoom Webinars.
The div with the video is being injected automatically by your WebSDK in the body of my website.

Thanks,

1 Like

And just to let you know, I’ve installed the web SDK through npm in my node-based project…

I’m doing

ZoomMtg.setZoomJSLib(`${window.location.origin}/zoom`, "/av");

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

created () {

        const config = this.$store.getters["meeting/featureSetting"]("videoConfig") || {};

        const pwd = config.zoomPassword || "";

        const baseId = config.zoomId || "";

        const id = String(baseId).replace(/[^\d]/g, "");

        API("GET", `/api/zoomus/getSignature/${id}`)

            .then(res1 => {

                const signature = res1.result;

                console.log(signature);

                ZoomMtg.init({

                    "debug": true,

                    "leaveUrl": "http://www.meet.ps",

                    "isSupportAV": true,

                    success () {

                        console.log("//// INIT SUCCESSFULL.");

                        console.log(`JOINING TO MEETING ${id}`);

                        ZoomMtg.join({

                            "meetingNumber": id,

                            "userName": "",

                            "signature": signature,

                            "apiKey": "",

                            "userEmail": "",

                            "passWord": pwd,

                            success (res) {

                                console.log("MEETING JOIN SUCCESS.");

                                console.log(res);

                                let buttonFound = false;

                                const t = setInterval(() => {

                                    const startButton = document.getElementById("pc-join");

                                    if (startButton != null) {

                                        buttonFound = true;

                                        startButton.click();

                                    }

                                    if (startButton == null && buttonFound) {

                                        console.log("button found");

                                        clearInterval(t);

                                    }

                                }, 500);

                            },

                            error (err) {

                                console.log("MEETING JOINING ERROR");

                                console.log(err);

                            },

                        });

                    },

                    error (err) {

                        console.log("INIT ERROR..");

                        console.log(err);

                    },

                });

            });

and it seems to load fine, init, try to join the meeting… but as I told you, when clicking in “check captcha” nothing happens.

P.S: I’m already using v1.7.9

1 Like

@tommy I"m also getting the following error

Hey @gabrielsmelo.dev,

For the recaptcha issue, please see the posts after yours this thread:

Let me know if that helps! If not, I am happy to help investigate further.

Thanks,
Tommy

Hi @tommy

No, it doesn’t helps.
I still have NO interaction when clicking in the “check captcha” button, even if I click on it 4 times.

As I told you before, I receive that “join error”, but it seems there is no javascript/event handling on this component injected by your SDK. Because when I click in the button NOTHING happens. Just like if we have only the HTML but not Javascript under the hood.

Anyways, I’m attaching my code so you can see if maybe I’m missing something.
In before: Yes, the “wasm” loads fine.

Just to let you know,… this is a Vue.js component.

<!-- Zoom meeting provider -->

<template>
    <div class="video-embed-container">
    </div>
</template>

<script>
import Base64URL from "base64url";
import UAParser from "ua-parser-js";
import $ from "jquery";

import { API, FeedbackMessage } from "common";
import { ZoomMtg } from "@zoomus/websdk";

ZoomMtg.setZoomJSLib("https://source.zoom.us/1.7.9/lib", "/av");

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

$("#zmmtg-root").bind("DOMSubtreeModified", () => {
    $("#zmmtg-root").css("width", "75%");
    $("#zmmtg-root").find(".main-content").css("width", "100%");
    $(".video-vue").append($("#zmmtg-root"));
});

export default {
    "props": {
        "name": String,
        "email": String,
    },

    created () {
        const config = this.$store.getters["meeting/featureSetting"]("videoConfig") || {};
        const pwd = config.zoomPassword || "";
        const baseId = config.zoomId || "";
        const id = String(baseId).replace(/[^\d]/g, "");

        API("GET", `/api/zoomus/getSignature/${id}`)
            .then(res1 => {
                const signature = res1.result;
                console.log(signature);
                ZoomMtg.init({
                    "debug": true,
                    "leaveUrl": "http://www.meet.ps",
                    "isSupportAV": true,
                    success () {
                        console.log("//// INIT SUCCESSFULL.");
                        console.log(`JOINING TO MEETING ${id}`);
                        ZoomMtg.join({
                            "meetingNumber": id,
                            "userName": "",
                            "signature": signature,
                            "apiKey": "",
                            "userEmail": "",
                            "passWord": pwd,
                            success (res) {
                                console.log("MEETING JOIN SUCCESS.");
                                console.log(res);

                                let buttonFound = false;
                                const t = setInterval(() => {
                                    const startButton = document.getElementById("pc-join");
                                    if (startButton != null) {
                                        buttonFound = true;
                                        startButton.click();
                                    }

                                    if (startButton == null && buttonFound) {
                                        console.log("button found");
                                        clearInterval(t);
                                    }
                                }, 500);
                            },
                            error (err) {
                                console.log("MEETING JOINING ERROR");
                                console.log(err);
                            },
                        });
                    },
                    error (err) {
                        console.log("INIT ERROR..");
                        console.log(err);
                    },
                });
            });
    },

Hey @gabrielsmelo.dev,

I believe the issue is having both the CDN link and the local link:

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

ZoomMtg.setZoomJSLib("https://source.zoom.us/1.7.9/lib", "/av");

If you are using the local method, can you instead point the url to the path of the Web SDK files in node module instead of source.zoom.us? Here is the guide:

Thanks,
Tommy

Hi @tommy, I did that, but I’m still not being able to interact with the page.

In addition to that, I’m receiving those warnings:

Hey @gabrielsmelo.dev,

Can you share a github repo with the issue so I can debug locally?

Thanks,
Tommy

Hi @tommy! I’ve just decided to create an entirely new page with Zoom Web SDK.

I was having some conflicts with Zoom web SDK css and other imports when using directly in my page.
Now, the issue is resolved and I’m using Zoom Web SDK normally.

Thanks!

1 Like

Hey @gabrielsmelo.dev,

Great! Happy to hear the issues are resolved! :slight_smile:

Thanks,
Tommy

1 Like