Cannot run stream.adjustRenderedVideoPosition right after connecting

Video SDK Web
1

Description
When my video client connects and other users are already in the room,
I want to display their camera streams, of course.
If I get more than 1 user, I’ll want to rearrange the video position on canvas.
PROBLEM
if there are 2+ streams already running when a new client joins, that new
client will have to run stream.adjustRenderedVideoPosition

However, doing so right after connecting results in an error.
**Only after the console says **
Open_Audio_WebSocket_Connect
consume interval 3
does it work.
Is there a way for me to detect that?

Browser Console Error
here is the error that’s caught attempting to run stream.adjustRenderedVideoPosition

reason: "userId is not correct"
type: "INVALID_PARAMETERS"

The thing is, after the console says

http://localhost:8081/public/zoomlib/video_mtsimd.min.js
js_media.min.js:1 sharing decode fileURL: http://localhost:8081/public/zoomlib/sharing_mtsimd.min.js
ready to start!
ready to start!
ready to dec video!
ready to dec video!
Open_Sharing_WebSocket_Connect
Open_Sharing_WebSocket_Connect
Open_Video_WebSocket_Connect
Open_Video_WebSocket_Connect
JsAudioDec.js receive startMedia
JsAudioDec.js receive startMedia
Open_Audio_WebSocket_Connect
Open_Audio_WebSocket_Connect
consume interval 3

the same code runs without problems.

Which Web Video SDK version?
1.1.5

Video SDK Code Snippets
The code snippets that are causing the error / issue so we can reproduce.
(running VueJS)

            initClient() {
                this.client = ZoomVideo.createClient();
                this.client.init('en-US', window.location.origin + '/public/zoomlib');
                this.addClientEventHandlers();
            },

                this.initClient();
                let signature = await this.fetchToken();

                this.client.join(this.topic, signature, this.username, this.password)
                .then( async (data) => {
                    // this.addClientEventHandlers();
                    this.stream = this.client.getMediaStream();
                    this.chat = this.client.getChatClient();
                    this.ses.info = this.client.getSessionInfo();

                })
                .catch((error) => {

                });

from here: client.on(‘user-updated’)
if new user to render > start render
right after render, I call stream.adjustRenderedVideoPosition
with the correct coordinates

To Reproduce(If applicable)

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

  • Device: Mac Mini, PC, Macbook, other PC
  • OS: MacOS11, Windows 10
  • Browser: Chrome
  • Browser Version 95

Additional context
Add any other context about the problem here.

2

Hey @simkin

Thanks for your feedback.

stream.adjustRenderedVideoPosition should be invoked after the video is rendered, when joining a session, the VideoSDK will establish multiple data channels (audio, video, sharing) with the server, it may take a while, so even invoking stream.renderVideo right after the connecting, in VideoSDK, it will be held until the data channel connection is established. We provide the media-sdk-change event to indicate the accurate timing of initialization.

In the sample project, here are the usage of the media-sdk-change event, sample-app-videosdk/App.tsx at master · zoom/sample-app-videosdk · GitHub and sample-app-videosdk/useRenderVideo.ts at master · zoom/sample-app-videosdk · GitHub

Hope my explanation can help you.

Thanks
Vic

1 Like
3

Vic thank you that was exactly what I needed.
I imagine I am not the only one who needed this bit of info, so it would
be very helpful if the SDK reference could be updated with all the
events available.

Thank you again.

4

Great to hear @simkin !

We will add this to the SDK reference CC @vic.yang .

Thanks,
Tommy

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.