An error occurred while deploying to the EC2 server.

[jaemoon99]

I deployed to AWS EC2 according to the official documentation guide.

I modified the App.tsx file as follows:

import {
    LocalVideoTrack,
    RemoteParticipant,
    RemoteTrack,
    RemoteTrackPublication,
    Room,
    RoomEvent
} from "livekit-client";
import "./App.css";
import { useState } from "react";
import VideoComponent from "./components/VideoComponent";
import AudioComponent from "./components/AudioComponent";

type TrackInfo = {
    trackPublication: RemoteTrackPublication;
    participantIdentity: string;
};

// When running OpenVidu locally, leave these variables empty
// For other deployment type, configure them with correct URLs depending on your deployment
let APPLICATION_SERVER_URL = "";
let LIVEKIT_URL = "";
configureUrls();

function configureUrls() {
    console.log("call configureUrls");

    // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment
    if (!APPLICATION_SERVER_URL) {
        if (window.location.hostname === "43.202.81.12") {
            APPLICATION_SERVER_URL = "http://43.202.81.12:6080/";
        } else {
            APPLICATION_SERVER_URL = "http://43.202.81.12:6080/";
            // APPLICATION_SERVER_URL = "https://" + window.location.hostname + ":6443/";
        }
    }

    // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment
    if (!LIVEKIT_URL) {
        if (window.location.hostname === "43.202.81.12") {
            LIVEKIT_URL = "ws://43.202.81.12:7880/";
        } else {
            LIVEKIT_URL = "wss://43.202.81.12:7880/";
            // LIVEKIT_URL = "wss://" + window.location.hostname + ":7443/";
        }
    }
    console.log("window.location.hostname : ", window.location.hostname);
    console.log("APPLICATION_SERVER_URL : ", APPLICATION_SERVER_URL);
    console.log("LIVEKIT_URL : ", LIVEKIT_URL);
}

function App() {
    console.log("call App");

    const [room, setRoom] = useState<Room | undefined>(undefined);
    const [localTrack, setLocalTrack] = useState<LocalVideoTrack | undefined>(undefined);
    const [remoteTracks, setRemoteTracks] = useState<TrackInfo[]>([]);

    const [participantName, setParticipantName] = useState("Participant" + Math.floor(Math.random() * 100));
    const [roomName, setRoomName] = useState("Test Room");

    async function joinRoom() {
        console.log("call joinRoom");

        // Initialize a new Room object
        const room = new Room();
        setRoom(room);

        // Specify the actions when events take place in the room
        // On every new Track received...
        room.on(
            RoomEvent.TrackSubscribed,
            (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {
                setRemoteTracks((prev) => [
                    ...prev,
                    { trackPublication: publication, participantIdentity: participant.identity }
                ]);
            }
        );

        // On every Track destroyed...
        room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => {
            setRemoteTracks((prev) => prev.filter((track) => track.trackPublication.trackSid !== publication.trackSid));
        });

        try {
            // Get a token from your application server with the room name and participant name
            console.log(1);
            const token = await getToken(roomName, participantName);

            // Connect to the room with the LiveKit URL and the token
            console.log(2);

            await room.connect(LIVEKIT_URL, token);

            // Publish your camera and microphone
            console.log(3);

            await room.localParticipant.enableCameraAndMicrophone();
            // setLocalTrack(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);
            console.log(4);

            setLocalTrack(room.localParticipant.videoTrackPublications.values().next().value?.videoTrack);
        } catch (error) {
            console.log("There was an error connecting to the room:", (error as Error).message);
            await leaveRoom();
        }
    }

    async function leaveRoom() {
        console.log("call leaveRoom");

        // Leave the room by calling 'disconnect' method over the Room object
        await room?.disconnect();

        // Reset the state
        setRoom(undefined);
        setLocalTrack(undefined);
        setRemoteTracks([]);
    }

    /**
     * --------------------------------------------
     * GETTING A TOKEN FROM YOUR APPLICATION SERVER
     * --------------------------------------------
     * The method below request the creation of a token to
     * your application server. This prevents the need to expose
     * your LiveKit API key and secret to the client side.
     *
     * In this sample code, there is no user control at all. Anybody could
     * access your application server endpoints. In a real production
     * environment, your application server must identify the user to allow
     * access to the endpoints.
     */
    async function getToken(roomName: string, participantName: string) {
        console.log("call getToken");
        const response = await fetch(APPLICATION_SERVER_URL + "token", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                roomName: roomName,
                participantName: participantName
            })
        });

        if (!response.ok) {
            const error = await response.json();
            throw new Error(`Failed to get token: ${error.errorMessage}`);
        }

        const data = await response.json();
        return data.token;
    }

    return (
        <>
            {!room ? (
                <div id="join">
                    <div id="join-dialog">
                        <h2>Join a Video Room</h2>
                        <form
                            onSubmit={(e) => {
                                joinRoom();
                                e.preventDefault();
                            }}
                        >
                            <div>
                                <label htmlFor="participant-name">Participant</label>
                                <input
                                    id="participant-name"
                                    className="form-control"
                                    type="text"
                                    value={participantName}
                                    onChange={(e) => setParticipantName(e.target.value)}
                                    required
                                />
                            </div>
                            <div>
                                <label htmlFor="room-name">Room</label>
                                <input
                                    id="room-name"
                                    className="form-control"
                                    type="text"
                                    value={roomName}
                                    onChange={(e) => setRoomName(e.target.value)}
                                    required
                                />
                            </div>
                            <button
                                className="btn btn-lg btn-success"
                                type="submit"
                                disabled={!roomName || !participantName}
                            >
                                Join!
                            </button>
                        </form>
                    </div>
                </div>
            ) : (
                <div id="room">
                    <div id="room-header">
                        <h2 id="room-title">{roomName}</h2>
                        <button className="btn btn-danger" id="leave-room-button" onClick={leaveRoom}>
                            Leave Room
                        </button>
                    </div>
                    <div id="layout-container">
                        {localTrack && (
                            <VideoComponent track={localTrack} participantIdentity={participantName} local={true} />
                        )}
                        {remoteTracks.map((remoteTrack) =>
                            remoteTrack.trackPublication.kind === "video" ? (
                                <VideoComponent
                                    key={remoteTrack.trackPublication.trackSid}
                                    track={remoteTrack.trackPublication.videoTrack!}
                                    participantIdentity={remoteTrack.participantIdentity}
                                />
                            ) : (
                                <AudioComponent
                                    key={remoteTrack.trackPublication.trackSid}
                                    track={remoteTrack.trackPublication.audioTrack!}
                                />
                            )
                        )}
                    </div>
                </div>
            )}
        </>
    );
}

export default App;

Click the join button

await room.connect(LIVEKIT_URL, token);

In that line

There was an error connecting to the room: could not establish pc connection

I am getting this error.

Why?

The backend log responds normally as follows:

LiveKit Webhook: event: "room_finished"
room {
  sid: "RM_VdPFATmH6poR"
  name: "Test Room"
  empty_timeout: 300
  creation_time: 1737601341
  turn_password: "XFBlRtfnKggR3SsLpnhNdFcNlmhgYoBBAbn6TchCHSE"
  enabled_codecs {
    mime: "audio/opus"
  }
  enabled_codecs {
    mime: "audio/red"
  }
  enabled_codecs {
    mime: "video/VP8"
  }
  enabled_codecs {
    mime: "video/H264"
  }
  enabled_codecs {
    mime: "video/VP9"
  }
  enabled_codecs {
    mime: "video/AV1"
  }
  departure_timeout: 20
}
id: "EV_dDrKjXj2zohb"
created_at: 1737601377

[cruizba]

You must use Production deployments!

• (Community) Single Node: https://openvidu.io/latest/docs/self-hosting/single-node/
• (Pro) Elastic: https://openvidu.io/latest/docs/self-hosting/elastic/
• (PRO) HA: https://openvidu.io/latest/docs/self-hosting/ha/

For example, in your case as you are using AWS, simply deploy OpenVidu Single Node using cloudformation. You have a complete guide here: https://openvidu.io/latest/docs/self-hosting/single-node/aws/install/