Attach video not working properly in Video SDK 2.3.0

Video SDK Web
1

Video SDK Type and Version
Type: Web
Version: 2.3.0

Description
After updating the Web SDK from 2.2.12 to 2.3.0, my React app no longer attaches video correctly. Instead of a <video> element, it attaches a <div>, so the video does not display.

The 2.3.0 release notes mention this fix:

Potential memory leaks when using stream.attachVideo() and stream.attachShareView() methods.

Could this be why it works differently now?

This is how I attach it in the jsx:

<video-player-container>
      <video-player ref={ref} data-user-id={userId} />
</video-player-container>

My attach function:

attachVideoPlayer: async (userId: number, element: VideoPlayer) => {
    const player = await stream().attachVideo(userId, VideoQuality.Video_720P, element)
}

These are my custom elements:

type CustomElement<T> = Partial<T & DOMAttributes<T> & { children?: any }>


declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'video-player': DetailedHTMLProps<HTMLAttributes<VideoPlayer>, VideoPlayer> & {
        class?: string
      }
      'video-player-container': CustomElement<VideoPlayerContainer> & { class?: string }
    }
  }
}

Error?
No error message appears in the console.

Troubleshooting Routes
I tried installing the latest version (2.3.5), and I still have the same issue.

I checked the attached element after running the attachVideo function.

In 2.2.12 it attaches a video:

<video-player data-user-id="" node-id="" media-type="video" video-quality="3" style="display: block;">
        <video autoplay="true" muted="true" playsinline="true" style="width: 100%; height: 100%; border-radius: inherit;"></video>
</video-player>

In 2.3.0 it attaches a div:

<video-player data-user-id="" node-id="" media-type="video" style="display: block;" data-video-player-id="" video-quality="3">
    <div style="width: 100%; height: 100%; position: relative; border-radius: inherit;">
      <div style="width: 100%; height: 100%;"></div>
    </div>
</video-player>

How To Reproduce

Browser: Chrome 143.0.7499.194

  1. Install version 2.2.12
  2. Join meeting
  3. Inspect the generated video-player element
  4. Repeat with version 2.3.0
2

Hey @Daniel30

Thanks for your feedback.

Could you share some problematic session IDs with us for troubleshooting purposes?

Thanks
Vic

3

Hi Vic,

Here is a problematic session ID where the video did not display (sdk version 2.3.0):

f124d567-125e-4ee8-b8bd-77258782d941 (9:32 PM EST)

This is one where it’s working properly (sdk version 2.2.12):

62d3d30c-a21a-4330-82e7-a9467bf7de98 (9:30 PM EST)

Let me know if there’s any other information you need.

Thanks,

Daniel

4

Hi @Daniel30

f124d567-125e-4ee8-b8bd-77258782d941 (9:32 PM EST)

It seems that it is not a session ID. Could you help check in the web portal under Dashboard → Past Sessions, or if the session is in progress, you can obtain it via client.getSessionInfo().sessionId.

Thanks
Vic

5

Hi Vic,

Sorry, I think I confused the session ID for the name.

The problematic session ID is C9ERHUjpT3KaNE5Kr2jZhg==, and the working one is Glxd09YYSEy0vhsWEZlw/A==.

Thanks,

Daniel

6

Hi @Daniel30

C9ERHUjpT3KaNE5Kr2jZhg==

In the logs, we see that attachVideo is called to render the video, followed immediately by detachVideo to remove the video rendering, and then attachVideo is called again to render the same user.

Since we cannot see the video-player element, could you check whether the video-player element exists in the DOM when attachVideo is called the second time?

Glxd09YYSEy0vhsWEZlw/A==
In the normal working cases, the logs show that after attachVideo is called, there is no detachVideo log, which may be the difference between the two cases.

Thanks
Vic

7

Hi Vic,

The multiple calls to attach and detach were due to me having react strict mode enabled.

I disabled strict mode in this new session: CV+0bS4DTE+WcLfJQwANxQ== , but I still can’t see any video.

The video-player element looks like this after attaching (zoom sdk 2.3.0):

<video-player-container style="display: block; position: relative;">
  #shadow-root (open)
    <video-player data-user-id="USER_ID" node-id="USER_ID" media-type="video" style="display: block;" data-video-player-id="VIDEO_PLAYER_ID">
      <div style="width: 100%; height: 100%; position: relative; border-radius: inherit;">
        <div style="width: 100%; height: 100%;"></div>
      </div>
    </video-player>
</video-player-container>

The difference is that in version 2.3.0, it attaches a div element when I call stream().attachVideo on the video-player element. In version 2.2.12, it attaches a video element, and I can see the video.

Do you know why it attaches a div? Could it be the way I’m calling the attachVideo function?

Thanks,

Daniel

8

Hi @Daniel30

CV+0bS4DTE+WcLfJQwANxQ==

Thanks for sharing the information.

Could you try the latest Video SDK Web (2.3.12) to see if the issue can be reproduced?

We’ve fixed a related issue with attachVideo in the latest version.

Thanks
Vic

1 Like
9

Hi Vic,

The new version 2.3.12 fixes the issue for me and it’s working now!

Thanks a lot for your help,

Daniel