CODEWITHSUNDEEP
react-nativevideo-streamingzoom-sdktwilio-video
Maxím G.
Maxím G.

Reputation: 1026

Zoom Video for Web - Cannot see participant video (though can see myself, and we hear each other). React Native for Web. Migration from Twilio Video

I migrating from Twilio Video to Zoom Video for Web using this guide.

Everything goes well so far, I can connect to the same meeting from two accounts, they can hear each other, mute/unmute works fine, I can turn on video and see myself, second user get events that I turned on my video (both "peer-video-state-change" and "user-updated" with changed user.bVideoOn property), and... nothing is shown for him - I mean my participant doesn't see me on his computer, he can only hear me. In the container where should be my video on his computer <video-player-container></video-player-container> - something is renders there (looks like a canvas), but it has size 0x0 pixels. I tried manually to increase width & height - just got a black rectangle, no video there.

I don't know if that's because of canvas? Then how do I switch it to use instead? Because my own video (where I see myself) is eventually got rendered with inside .

enter image description here

Is that because I'm using it in React Native for Web? But everything else works fine (including Twilio Video video conferences).

One more thing I noticed: when I start my video, I see an error: The play() request was interrupted by a new load request. https://goo. gl/LdLk22, though I can close the popup with this error message and I see that my video is displayed fine despite the error message. Can it be the reason?

enter image description here

I've searched and found a lot of issues when users cannot see themselves, but I have opposite issue.

Any ideas/suggestions are welcome, not sure where to debug next.

Environment: MacBook Pro, chip Apple M1 Pro, macOS Sonoma 14.4.1, node v21.7.1 (also tried with v20), Google Chrome 123.0.6312.107, react-native: 0.70.8, react-native-web: 0.18.12

Upvotes: 0

Views: 208

Answers (2)

tommygaessler
tommygaessler

Reputation: 134

Zoom Developer here, try setting a width, height, and aspect ratio on your video-player-container and video-player.

<video-player-container></video-player-container>

/* adjust the CSS to your liking */

video-player-container {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

video-player {
  width: 50%;
  height: auto;
  aspect-ratio: 16/9;
}

Upvotes: 0

Max&#237;m G.
Max&#237;m G.

Reputation: 1026

Ok, finally I found the solution.

Instead of following their guide and use zoomSession.attachVideo method, instead of that you have to create your own element and use zoomSession.renderVideo instead.

I saw this solution here - looks like it was an issue for React, and they fixed it... maybe they fixed only for renderVideo method and not for attachVideo? Don't know, but anyway great that now there is solution which works!

Upvotes: 0

Related Questions