Skip to content
This repository has been 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

Open
moham96 opened this issue Feb 3, 2023 · 0 comments
Open

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

moham96 opened this issue Feb 3, 2023 · 0 comments

Comments

@moham96
Copy link

moham96 commented Feb 3, 2023

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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant