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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions