Skip to content
This repository was archived by the owner on Aug 24, 2023. It is now read-only.
This repository was archived by the owner on Aug 24, 2023. It is now read-only.

Fails to connect in firefox if using vitejs instead of cra #120

@moham96

Description

@moham96

Hello,
The client sdk fails to connect if using vitejs and firefox,
using cra works fine on either chrome or firefox,
For testing I used this simple example:

import { useEffect } from "react";
import { setLogLevel } from "livekit-client";
import { ConnectionState } from "livekit-client";

import { useRoom } from "@livekit/react-core";

function App() {
  useEffect(() => {
    setLogLevel("debug");
  });
  const roomState = useRoom();

  const token =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjEwNjc1Mzc4ODE0LCJpc3MiOiJkZXZrZXkiLCJuYW1lIjoiVGVhY2hlciIsIm5iZiI6MTY3NTM3ODgxNCwic3ViIjoiVGVhY2hlciIsInZpZGVvIjp7InJvb20iOiJTdHVkZW50cyIsInJvb21Kb2luIjp0cnVlfX0.qVDRbLQWmB7iDjHN1UZNO0u7DrgTaWknqhhFDG_eTfk";

  useEffect(() => {
    if (roomState.room) {
      console.log("connecting");
      roomState
        .connect("ws://localhost:7880", token)
        .then((room) => {
          if (!room) {
            return;
          }
          console.log("%cconnected Successfully", "color:green");
        })
        .catch((reason) => console.log("%cfailed", "color:red", reason));
    }

    return () => {
      if (roomState.room?.state !== ConnectionState.Disconnected) {
        roomState.room?.disconnect();
      }
    };
  }, [roomState.room, token]);
  return (
    <div style={{ display: "flex" }}>
      <i>Livekit Test</i>
    </div>
  );
}

export default App;

reproduction steps:
1- run livekit server and create a token to be used in the above code
2- create cra project:
npx create-react-app react-test-cra --template typescript
3- create vitejs project:
npm create vite@latest
4- install @livekit/react-core on both projects
5- run each project test it in chrome and firefox and watch the console to know if it is successful or not

results:

cra project: works in both chrome and firefox
vitejs project: works in chrome but fails in firefox with the below error log:

sending answer [SignalClient.ts:359:8](http://localhost:5173/node_modules/livekit-client/src/api/SignalClient.ts)
WebRTC: ICE failed, add a TURN server and see about:webrtc for more details
primary PC state changed failed [RTCEngine.ts:316:10](http://localhost:5173/node_modules/livekit-client/src/room/RTCEngine.ts)
room event connectionStateChanged 
Object { event: "connectionStateChanged", args: (1) […] }
[Room.ts:1398:10](http://localhost:5173/node_modules/livekit-client/src/room/Room.ts)
room event disconnected 
Object { event: "disconnected", args: (1) […] }
[Room.ts:1398:10](http://localhost:5173/node_modules/livekit-client/src/room/Room.ts)
clearing ping interval

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions