Web sdk - Connecting the user with computer audio automatically when joining

Hey @vijetha,

A real user needs to start the meeting via the start_url, or pressing the start meeting button in Zoom, or via the Web SDK.

Starting a meeting cannot be automated.

Thanks,
Tommy

Hi,

I was able to get the code to work on my page. But not I am getting this error message…

Hi @netanelisaacs,

Is the meeting ID you used, created under your account? Can you DM me the meeting ID?

How does zoom access computer audio when screen-sharing? Is this done through the Screen Sharing API? Thanks.

Hey @mrmulshine,

Are you referring to the Zoom App or Web SDK?

Thanks,
Tommy

There is better way to do that until an update comes from zoom. This will immediately click the join button:
var buttonFound=false;
var t = setInterval(function(){
var startButton = document.getElementById(“pc-join”);
if(startButton!=null){
buttonFound = true;
startButton.click();
}
var startButton = document.getElementById(“pc-join”);
if(startButton==null && buttonFound){
clearInterval(t);
}
},500);

1 Like

I think this will not work on mobile browsers. Mobile browsers need gestures to be able to hear the AudioContext.

1 Like

Thanks for the tip @abhishek.bh87! :slight_smile:

-Tommy

hello people,

unfortunately, zoom keeps changing the element ids, for example what had former the html id ‘pc-join’ is not available anymore with zoom 1.7.8

  • everytime when zoom upgrades the websdk version, its likely that our websdk integration breaks
  • also, we have troubles with this audio auto-join hack as sometimes no audio can be heard on the other (non-websdk) client side

i know that your priorities had been shifted, but when can we expect websdk support for this audio join?
should this feature be included in websdk 1.8.0 (scheduled june 2020, as written here)

regards,
hari

1 Like

Hey @harald.glanzer,

Currently we do not support customizing the Web SDK so I suggest not relying on the Web SDK DOM elements.

Users must click on the audio option for it to work properly.

Thanks,
Tommy

we are using zoom web sdk 1.7.8.
In our webinars, we would like to autojoin audio without users interaction.
I understand it is not possible. Right?
Any suggestion?

we are using zoom web sdk 1.7.8.
In our webinars, we would like to autojoin audio without users interaction.
I understand it is not possible. Right?
Any suggestion?

Hey @martina.muscariello, @it17,

The Web SDK requires users to click to join with audio.

Thanks,
Tommy

Hi there,

We faced same problem and could solve this by implementing a DOM discovery system.
(please be aware that this is not a perfect solution as it’s based on CSS properties and therefore is strongly exposed to Zoom code modifications between releases)

With the web sdk, the init() and join() actions will interact and change the DOM of your main zoom HTML component.
You can therefore listen to DOM modification events and react on it to discover the change you are interested in (this change is the display of the audio join popup)
Then when such event is discovered, you can interact with the button and perform the click on it by code.

Here is an example in ReactJs:

Here is the function to listen for DOM modification related to the audio join button we wait for:

listenForAudioButtonNode(params, callback) {

  new MutationObserver(function(mutations) {
    const el = document.querySelector(params.className);

    if (el) {
      this.disconnect();
      callback(el);
    }
  }).observe(params.parent || document, {
    subtree: true,
    childList: true,
  });
}

Here is the function to listen DOM modification on the button itself and perform the programmatic click on it:

autoAudioJoin(audioButton) {

  const config = {
    attributes: true,
    childList: true,
    attributeOldValue: true,
    subtree: true
  };

  const canClick = oldValue => {
    return oldValue ===
      'zm-btn zm-btn--primary zm-btn__outline--white zm-btn--lg zm-btn--disabled';
  }

  const isJoined = oldValue => {
    return oldValue === 'display: inline-block;';
  }

  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (canClick(mutation.oldValue)) {
        // When join button becomes clickable.
        audioButton.click();
      } else if (isJoined(mutation.oldValue)) {
        // When connected to audio.
        observer.disconnect();
      }
    });
  });

  observer.observe(audioButton, config);
}

And now you can call first function with second one as callback, before to perform the join with zoom SDK. It’s important do run it before to be sure to react on time to related DOM events.

... any code before

this.listenForAudioButtonNode(
  {
    className: '.zm-btn.zm-btn--primary.zm-btn__outline--white.zm-btn--lg',
    parent: document.getElementById('zmmtg-root'),  // SETUP your own zoom root DOM element name here
    recursive: false
  },
  element => this.autoAudioJoin(element)
);

// then perform your zoom init & join here
zoom.init({...});

That hack is not perfect but still better than any setTimeout or setInterval as:

  • it’s fully asynchronous and running in background
  • it react on DOM events so you don’t need to setup any timing that may fail or comes too early / too late.

Hope this can help you to temporary unlock your issue until zoom sdk provide more options to customize how to join a meeting.

3 Likes

Thanks for sharing this @nvivot! :slight_smile:

-Tommy

I sort that out by using the below code and it works awesome. Please call ‘HideJoinAudio’ from success callback of Zmmtg.join().

function HideJoinAudio()
{

        let joinBtn=document.getElementsByClassName("join-audio-by-voip__join-btn")[0];

        if(joinBtn)

        {

            $.wait(JoinAudioAuto, 5);

        }

        else{

            $.wait(OpenJoinAudio, 5);

            $.wait(JoinAudioAuto, 5);

        }

        return;

    }

    function OpenJoinAudio(){

        

        let btn=document.getElementsByClassName("join-audio-container__btn")[0];

        let joinDialog=document.getElementsByClassName("join-dialog")[0];

        

        if(btn && !joinDialog)

        {

            btn.click();

        }

        return;

    }

    function JoinAudioAuto(){

        let btn=document.getElementsByClassName("join-audio-by-voip__join-btn")[0];

        if(btn)

        {

            btn.click();

        }

        return;

    }

    $.wait = function( callback, seconds){

        return window.setTimeout( callback, seconds * 1000 );

    }
3 Likes

Thanks for sharing @naeem.ahmedk! :slight_smile:

-Tommy

1 Like