Fatal JS Error when clicking "Start Video" text

Description
If a user clicks the “Start Video” text below the video button, a js error is thrown, crashing the Zoom component and forcing a page reload. Clicking anywhere above the text on the button works fine, its only clicking the text itself that throws the error.

Error
Target Container is not a DOM element.

Which version?
web sdk 1.7.2

To Reproduce(If applicable)
Join a zoom meeting. Click on “Start Video” text at the very bottom of the button.

Screenshots
If applicable, add screenshots to help explain your problem.

  • Device: Macbook Pro
  • OS: OSX
  • Version: 10.15.3
  • Browser: Chrome 80.0.3987.149

Additional context
Add any other context about the problem here.

Hey @chrisapolzon, thanks for posting and using Zoom!

Can you share your code? I cannot reproduce the issue.

Thanks,
Tommy

Hmm. I’ve just dropped the SDK into my app as described by the setup instructions. It is running alongside my application code which is using React 16.12.0.

Here’s the gist of the component I built to render the Zoom component:

  useEffect(() => {
    ZoomMtg.setZoomJSLib("https://source.zoom.us/1.7.2/lib", "/av")
    ZoomMtg.preLoadWasm()
    ZoomMtg.prepareJssdk()

  setTimeout(() => {
    ZoomMtg.init({
      leaveUrl: `${window.location.protocol}//${window.location.host}`,
      error: e => {
        if (process.env.RAILS_ENV === "production") {
          airbrake.notify("Zoom Join Error", { error: e })
        } else {
          logger.error("Zoom Join Error", e)
        }
      },
      success: () => {
        console.log("#success")
        ZoomMtg.join({ ... })
        ...

Hey @chrisapolzon,

Thanks for sharing this. Can you try adding the following property to the ZoomMtg.init({}) object:

isSupportAV: true

Let me know if that fixes it.

-Tommy

I added that property, but it did not resolve the issue.

I did some more debugging after noticing the markup for the web ui served directly on zoom’s site is different, and noticed that the Start Video text is contained in an anchor tag with an href of “#”. If I manually edit the dom after zoom loads and remove the href attribute entirely, clicking it does not throw the error and everything works as intended.

Here’s the rendered HTML for that button, and you can see the a#join_text with the href attribute.

<button
  class="join-audio ax-outline "
  aria-label="start sending my video"
  type="button"
>
  <div class="img-layer">
    <span class="img-start-video join-btn img-sprite"></span>
  </div>
  <span
    style="word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;"
    ><a id="join_text" title="Start Video" href="#" value="Start Video"
      >Start Video</a
    ></span
  >
</button>

Hey @chrisapolzon,

That is strange and the first time I have seen this issue. Please use your workaround until we fix it.

Thanks,
Tommy

We are having this same issue with the latest Web SDK 1.7.4. We have actually been seeing this issue for some time, but I was never able to narrow it down because people were reporting it so intermittently. Thanks, @chrisapolzon for solving this mystery for me!

“Manually editing the DOM” isn’t really a solution, but I will try to see if there is some post-processing or CSS I can do to work around this.

However, until then it is a major problem for our customers and I hope that Zoom can fix the issue on their side.

1 Like

Hey @ansell,

I was never able to reproduce this.

May I ask for details and steps to reproduce how you are integrating the Web SDK?

Thanks,
Tommy

I can’t really share code because it is for a client and is integrated into their software. However, the SDK is integrated into a large React app. Because of dependency conflicts, I could not use the NPM version and the Zoom SDK is contained within an iFrame and imported via the Zoom CDN.

I was not able to reproduce this problem consistently until I realized that it was being caused by clicking on the TEXT inside the button element instead of the image. If you look at the code that @chrisapolzon posted above you will see that the text for “Start Video” is contained inside an anchor tag <a>. I don’t know why this is the case as the whole thing is already inside a <button> tag. In fact, if you look at the button for the Audio button right next to it, the text is contained within a simple <span> tag.

<div class="left-tool-item">
    <button class="join-audio ax-outline" aria-label="join audio" type="button" style="background: rgb(66, 67, 69);">
        <span class="img-layer"><span class="img-audio join-btn img-sprite"></span></span>
        <span style="word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; outline: none;">Join Audio</span>
    </button>
</div>

I don’t know why the two buttons would be differently rendered, but clicking on anchor tag with the text in it causes the problem every time. I think I may be able to work around this for now with some CSS like the following:

a#join_text: {
    pointer-events: none;
}

However, it would be better if Zoom would remove this anchor tag as it seems to serve no purpose.

Hey @ansell, @chrisapolzon

Gotcha! Thanks for pointing this out!

We are working on a fix now. Will keep you all updated. (CS-1618)

-Tommy

image
the a link use to show the full start video text for some very long language(like RU)