This message was deleted.

cc @polite-kilobyte-67570

Hi @narrow-action-3234, does this happen when the browser tab/window is being closed or also when the component unmounts without navigation/browser being closed?

Hi @polite-kilobyte-67570, it happens when for example moving from the the call page where I’ve implemented Livekit to another page by calling the

history.push('/')

function … my workaround is thinking this is a SPA issue, maybe, is also after this calling

window_.location.reload_();

function so I reload the page that I’m redirecting to so I make sure the call connection is closed but also the camera is turning off.

@narrow-action-3234 you may have meant to tag Lukas not Luis ;)

oh, ya

The navigation within your SPA occurs entirely client-side right? so there’s no actual browser page (un)loading? Does it work if you call

room.disconnect()

directly before doing the SPA navigation?

@red-country-59682 Yes, only client. My example is wrong.. sorry. The issue is when I’m not performing the redirect like the user pressing on a button in the page and the actual issue is when he presses the browsers back button, not one from the application where i can control the redirect to happen after disconnecting from the call.

thanks for clarifying. We do a couple of things to try and disconnect automatically when a component unmounts or when a page gets unloaded. Disconnection might take a tiny bit longer on slower connections, but generally it should be more or less instant. To your manual disconnect call, the example you posted seems wrong (there’s a couple of parenthesis missing), but maybe that’s just a copy-past error? have you tried a simpler version with

useEffect(() => {
  return () => roomCall.disconnect();
});

also, if your

roomCall

is potentially undefined, are you sure you are actually calling disconnect? It’s strange that it doesn’t work out of the box for you though. Could you spin up a minimal reproduction repository? that would be helpful in debugging this.

I see, in fact your right @polite-kilobyte-67570 with

roomCall

being

undefined

so that’s why is not working … but the interesting part comes if I console.log(roomCall) the values of it comes like this:

useEffect(() => {
        return () => {
            console.log({roomCall})        
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [roomCall]);

Initial render:

{roomCall: undefined}

Second render since is a dependency of `useEffect`:

{roomCall: Room}

On unmount:

{roomCall: undefined}

Not sure why is

undefined

to be honest on unmount, maybe because

Livekit

detects that the component unmounts and calls the

disconnect

function? But the issue is interesting because even though let’s assume LiveKit disconnected me from the call I still can see I’m connected if I’m not

manually refreshing

the page and if i’m going back again in the call and repeat the process w/o refresh the call I can see me multiple times inside the call

I think this behaviour might be specific to your implementation but it’s hard to say without more code context. If you can spin up a minimal reproduction example that showcases the issue, I’m happy to take a look!

Hi @polite-kilobyte-67570

Hi @narrow-action-3234, I guess you‘re still talking to Lukas? 😄

Yes :)))

Haha, never mind 🫡

@polite-kilobyte-67570 the “bug” with disconnecting and reconnecting to the room I reproduced it also with the example you guys are hosting over here:

<https://example.livekit.io/#/>

thanks for the update! I will post this insight also on the GH issue you opened and try to reproduce with the react example!

Ok, nice. Hope this context helps the debugging process

a new version of react-components is released that fixes this issue!

Nicee