Error on reconnecting to video room

[SharonGilmore]

• [x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [x] I verified that the Quickstart application works in my environment.
• [x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

const TwilioRoom = () => {
const openRoom = async (roomName: string) => {
    try {

      // Connect to room
      const room = await Video.connect(state.twilioToken!, {
        name: `${roomName}`,
      });

      // Add room & local participant details to context
      dispatch({
        type: "onConnectedToVideoCall",
        roomName,
        room,
        localParticipant: room.localParticipant,
      });

      // If anyone is already connected, add them as a remote participant
      room.participants.forEach((remoteParticipant: RemoteParticipant) =>
        dispatch({ type: "addRemoteParticipant", remoteParticipant })
      );

      // If someone connects, add them as a remote participant
      room.on("participantConnected", (remoteParticipant) => {
        dispatch({ type: "addRemoteParticipant", remoteParticipant });
      });

      // If someone disconnects, remove them as a remote participant
      room.on("participantDisconnected", (remoteParticipant) => {
        dispatch({ type: "removeRemoteParticipant", remoteParticipant });
        disconnect();
      });

      // Disconnect from room
      const disconnect = () => {
        room.disconnect();
      };

      // After disconnecting, remove event listener
      room.once("disconnected", () => {
        window.removeEventListener("beforeunload", disconnect);
      });

      window.twilioRoom = room;

      // Add a listener to disconnect from the room when a user closes their browser
      window.addEventListener("beforeunload", disconnect);
    } catch (error) {
      dispatch({ type: "onError" });
    }
  };

return <><button
                  type="button"
                  onClick={() => openRoom(myRoomName)}
                >
                  <Icon />
                </button>
                 <button
                  type="button"
                  onClick={disconnect}
                >
                  <Icon />
                </button></>
}

Expected behavior:

When I click the connect button, I should be connected to the video room. When I click the disconnect button, I should be removed from the video room. When I click connect again, I should be reconnected to the video room. I should be able to disconnect and reconnect repeatedly without error.

Actual behavior:

I click connect and am connected I click disconnect and am disconnected I click connect again and get a warning in the console, but appear to be connected: [TwilioConnection #2: wss://global.vss.twilio.com/signaling] Unexpected state "closed" for handling a "heartbeat" message from the TCMP server. I disconnect and reconnect, and get: WebSocket connection to 'wss://sdkgw.us1.twilio.com/v1/VideoEvents' failed: WebSocket is closed before the connection is established. The final error seems to cause the connection to fail (ie I can't see myself in the participants list) but the web camera stays on and other participants can still see me.

If I keep disconnecting and reconnecting, eventually I get a proper 'Failed to connect' message, but the camera is still on and others can still see me.

Software versions:

• [ ] Browser(s): Chrome Version 99.0.4844.51 (Official Build) (arm64)
• [ ] Operating System: macOS Monterey 12.2.1
• [ ] twilio-video.js: ^2.21.0
• [ ] Third-party libraries (e.g., Angular, React, etc.): React ^17.0.2, Twilio ^3.63.1

[charliesantos]

Hey @SharonGilmore unfortunately I'm not able to reproduce the issue. I'm starting to think this is related to your application logic, but hard to tell with the code snippet provided. Can you please try it on our react app or quickstart app and see if you can reproduce it?