Issue with pinned self-video turning black on mobile devices in Video SDK v2.2.5 but not in v2.1.0

Video SDK Web
1

Description

In version 2.2.5, when using a mobile device, pinning your own video causes the render area to turn black.
This issue does not occur in version 2.1.0.

Browser Console Error

No error message appears in the browser console when the issue occurs.

Web Video SDK Version

2.2.5

Steps to Reproduce

  1. On a mobile device, join a meeting with 2 participants.
  2. Pin your own video.
  3. Observe that the pinned video area turns black.

Expected Behavior

The pinned video should display normally, as it does in version 2.1.0.

Screenshots

Device Information

  • Devices: iPhone 12, Oppo (mobile)
  • OS: iOS, Android
  • Browsers: Safari, Chrome
  • Browser Version: Latest

Regression

This issue appears after upgrading from v2.1.0 to v2.2.5.

Thank you !

2

Hey @Thong1

Thanks for your feedback.

Pin your own video.

We haven’t provided any methods related to the pin feature. Could you briefly describe how it’s implemented?

Also, could you share some problematic session IDs with us?

Thanks
Vic

3

Hi @vic.yang,

Here is how we implement:

When the user pins their own video, the client detaches the video of both the user and the currently pinned participant (if any) from two containers: PIN_VIDEO_PLAYER_CONTAINER and PARTICIPANT_VIDEO_PLAYER_CONTAINER. The detached video elements are completely removed from the DOM.

The client then calls attachVideo(userId) to create a new video element for that user. We set the necessary attributes and styles (style.width and style.height to 100%) before appending this new video element to the pin container.

Session ID: 6kXUx9O6S+OZzv+fIz/cQw==

Thanks for your support! :folded_hands:

4

Hi @Thong1

6kXUx9O6S+OZzv+fIz/cQw==

Could you share the user ID who encountered the issue?

Thanks
Vic

5

Hi @vic.yang
Here is user id who encountered the issue : c7a49ac8-5011-7018-da36-22d899bd6c2b
Thanks for your support!

6

Hi. @Thong1

6kXUx9O6S+OZzv+fIz/cQw==

Are you rendering video using the renderVideo method or the attachVideo method?

Are you rendering it on the same canvas or video-player-container? It would be best if you could share a code snippet.

Thanks
Vic

7

hi @vic.yang
In renderVideo, we use attachVideo to attach the video to the video-player-container element. When pinning, we call detachVideo followed by attachVideo to reattach it, but the video remains black until the browser is resized.