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