Description
I’m using react to create a component which integrate with zoom sdk.
It works ok if every time I refresh my browser but if I use react-router-dom to go to another component and go back to this component, it throw an error when joining Error
reason: “duplicated operation”
type: “INVALID_OPERATION”
Which version?
Latest version Fully customisable sdk
To Reproduce(If applicable)
Steps to reproduce the behavior:
From my app container go to the component where calling zoom sdk join, it works fine for the first time.
Go to another screen (using react-router-dom)
Go back to screen where is using zoom sdk, it throw an error when calling client.join Screenshots
Thanks for reporting this, I have shared this with our SDK Engineers. (CS-2829) I will get back to you with how to fix it, or if we need to fix something on our end.
was there any solution for this? I have the same issue. After leaving session with client.leave() I’m not able to join again. First I get following error when after.calling client.leave(): index.esm.js:formatted:1 WebSocket is already in CLOSING or CLOSED state.
Then when trying to join. I get duplicated operation error from react.
We recommend you return a clickable button or similar, that would call client.leave if the user client has actually successfully joined/initialized. You can ensure you only call client.leave by using react’s built-in state functionality and a boolean following Zoom client connection/disconnection. Besides that, you could make the call event-based instead of component-based like this. At minimum, if you want to keep it as-is, you should track/maintain the zoom client’s connection state on you own end to make sure duplicate calls aren’t made.
I’m still getting 4 error messages: WebSocket is already in CLOSING or CLOSED state.
This promise is resolved successfully but there is no ‘connection-change’ event received.
When I’m trying to join new meeting by calling client.join(). This promise is rejected with ‘duplicated operation’ error. So it seems like connection is not closed correctly and is left in some error state. This could be related to Calling client.leave() to end session is not triggering the client connection-change event. Is there something else that I should do after client.leave() before I’m joining again?
When client.leave() resolves, call setIsInMeetingSession(false) and have a useEffect for isInMeetingSession that checks for its value changing to false. You can and should enable the client.join() logic inside this effect. This creates a “callback” effect that you can listen and respond to, and alleviates the need for a connection-change event
Due to the client instance created by ZoomInstant.createClient() is a singleton, if you want to reset the connection, you should invoke ZoomInstant.destroyClient() and ZoomInstant.createClient() methods to recreate an instance. Hope this will help you.
Can you confirm that this is working in the current downloadable version?
1.0.2 in version.txt / 1.0.0 package.json
If so, can you provide a very basic vanilla javascript example?
So far I have not found any working way to call Client.join() twice without fully reloading the page, no matter how many times ZoomInstant.destroyClient is called and re-initalized.
The idea is to connect to one session, disconnect from it and connect to a different session.
Sounds like they are already aware of this issue. I can confirm that I see it as well. Even with destroyClient, I can’t recreate a connection with createClient. The only way I’ve found to reset a connection is a full window.location.reload(), and that’s obviously not ideal
FWIW, I’m still running into issues with this. After doing a leave call, I’m finding that I have to completely tear down my canvas and build a new one before joining or else I run into issues when rendering to it. I’m also having issues with getting my local camera to re-render if any other user is already rendered after leaving & re-joining. It seems to be some sort of a timing issue - if I delay starting to render my local camera by a couple of seconds, it will work fine.
This may still be issues with my code, but I wanted to mention my experience in case any one else is trying this and running into the same problems.
Hey @bekit
Thanks for sharing your experience with Video SDK.
The first issue:
After doing a leave call, I’m finding that I have to completely tear down my canvas and build a new one before joining or else I run into issues when rendering to it.
Yes. In Video SDK, the canvas will be transferred to OffscreenCanvas if the platform supports this feature, thus you will lose control of canvas in the main thread, and the canvas can not be transferred twice. During the session, Video SDK will track the state of canvas, but once leave the session, all the state will be cleared to avoid state conflicts with the next session. So we advise when rejoining the session, you can add a loading page to replace the current module before the session is connected, and then rendering DOM Element.
The second one:
I’m also having issues with getting my local camera to re-render if any other user is already rendered after leaving & re-joining. It seems to be some sort of a timing issue - if I delay starting to render my local camera by a couple of seconds, it will work fine.
Could you please provide a detailed scenario? Or sample code to help us troubleshoot this issue?