Initial connection failed with ConnectionError: could not establish signal connection: RTCPeerConnection is not a constructor

[azr-arch]

Describe the bug Trying to use livekit in nextjs 14, but getting this errors several times

Initial connection failed with ConnectionError: could not establish signal connection: RTCPeerConnection is not a constructor. Retrying with another region: <my_livekit_cloud_url>

then disconnected notification

Screenshots

"livekit-client": "^1.15.4", "livekit-server-sdk": "^1.2.7",

[davidzhao]

@azr-arch this is showing up because you are using the client SDK from a server-side page/component. LiveKit cannot be used from the server side. It requires access to WebRTC APIs that only exists in the browser.

[lukasIO]

write "use client" on the top of your component to make sure it doesn't run on the server within next.

[azr-arch]

@davidzhao @lukasIO

"use client";

import "@livekit/components-styles";
import {
    LiveKitRoom,
    VideoConference,
    GridLayout,
    ParticipantTile,
} from "@livekit/components-react";
import { useEffect, useState } from "react";
import { useChat } from "@context/ChatContext";

export const MediaRoom = ({ callId, currUser }) => {
    const name = currUser.name;
    const [token, setToken] = useState("");

    useEffect(() => {
        if (!callId || !name) return;

        (async () => {
            try {
                const res = await fetch(
                    `/api/get-participant-token?room=${callId}&username=${name}`
                );

                console.log(res);
                const data = await res.json();
                console.log({ data });
                setToken(data.token);
            } catch (error) {
                console.log(error);
            }
        })();
    }, [callId, name]);

    if (token === "") {
        return <p>Loading...</p>;
    }

    return (
        <LiveKitRoom
            video={true}
            audio={true}
            token={token}
            serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
            data-lk-theme="default"
        >
            <VideoConference />
        </LiveKitRoom>
    );
};

The component where I’m using this is also a client component. The error occurs only in the Edge browser; everything works fine in Firefox.

[lukasIO]

It's unclear what's going on, try deleting the useChat import at the top as that might do some server side import?

What's the behaviour in Chrome?

[azr-arch]

It's unclear what's going on, try deleting the useChat import at the top as that might do some server side import?

What's the behaviour in Chrome?

dont have chrome, and i tried removing the unused imports including useChat, but didnt work

[lukasIO]

please provide a minimal reproduction example/repository that shows the problem.

[lukasIO]

hi @wxl17839938583 ,

we don't have any means to reproduce this error, please provide a minimal reproduction example/repository that shows the problem.

[wxl17839938583]

hi @wxl17839938583 ,

we don't have any means to reproduce this error, please provide a minimal reproduction example/repository that shows the problem.

after simplification, this can be reproduced:

import {ref} from 'vue';
import { Room} from 'livekit-client';
const roomRef = ref(null)

const connectLiveKit = async () => {
  const token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MDcyODI4NDYsImlzcyI6IkFQSW10N1padnhpU2ZKQyIsIm5hbWUiOiIxMTEiLCJuYmYiOjE3MDcwMjM2NDYsInN1YiI6IjM5ODZkMmI2OGVjMDhmOTkxMzU2MDVhZWU3MTEyMjhjLVBlb3BsZS1fV2VicGhvbmUiLCJ2aWRlbyI6eyJyb29tIjoiMzk4NmQyYjY4ZWMwOGY5OTEzNTYwNWFlZTcxMTIyOGNfV2VicGhvbmUiLCJyb29tSm9pbiI6dHJ1ZX19.LYSxTCDde8vRbo_yYLfYNzthTLJNiHytD_ut6LYqKGM'
  const wsURL = 'wss://xxx.com.cn';
  roomRef.value = new Room();
  roomRef.value.prepareConnection(wsURL, token);
  await roomRef.value.connect(wsURL, token);
}
connectLiveKit()

[wxl17839938583]

[wxl17839938583]

@lukasIO Error reported by Chrome browser

[lukasIO]

after simplification, this can be reproduced:

thanks, but for a reproduction, we'd need a repository that we can run. And also more information about which browser versions you're seeing this on. You could create the reproduction e.g. on stackblitz.com, if that's easier than sharing a github repo.

[wxl17839938583]

@lukasIO thanks, May I ask if LiveKit supports Chrome version 80.0.3987.132 (official version) (64 bit)

[lukasIO]

generally supported browser versions are defined here https://github.com/livekit/client-sdk-js/blob/main/.browserslistrc

[wxl17839938583]

So it seems to be supportive

[davidzhao]

this should be fixed in #1022. it'll be resolved in the next release.

[lukasIO]

WRT to the original issue: RTCPeerConnection is not a constructor - this is most likely caused by a browser extension disabling WebRTC altogether (might be a privacy related one)

[ciaoamigoschat]

I am also experiencing the same error: 'Initial connection failed with ConnectionError: could not establish pc connection. Retrying with another region...' and immediately after: 'Could not createOffer with closed peer connection.' I'm using the latest version of Google Chrome on Mac. Essentially, the connection keeps disconnecting and reconnecting after a few seconds.