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