This message was deleted LiveKit Community #helpdesk

Join Slack

This message was deleted.

# helpdesk

steep-balloon-41261

09/05/2023, 8:53 PM

This message was deleted.

kind-art-87090

09/05/2023, 8:53 PM

we use react and the implementation is like this.

Copy code

return (
        <div id="root-wrapper">
            <div id="root">
                <ThemeProvider theme={theme}>
                    <LiveKit
                        isCreator={sessionState.isCreator}
                        audio={sessionState.audio}
                        video={sessionState.video}
                    />
                </ThemeProvider>
            </div>
        </div>
    );

kind-art-87090

09/05/2023, 8:54 PM

our

<LiveKit />

uses

<LiveKitRoom />

react component like this

Copy code

return (
        // nextjs example <https://github.com/livekit/components-js/blob/main/examples/nextjs>
        <LiveKitRoom
            token={
                isCreator && sessionState
                    ? sessionState?.creatorData?.accessToken
                    : sessionState.fanData?.accessToken
            }
            serverUrl={process.env.NEXT_PUBLIC_LIVE_KIT_URL}
            connect={sessionState.isLive || !isCreator}
            audio={isCreator}
            video={isCreator}
            room={room}
            onConnected={() => {
                room.on(RoomEvent.ParticipantConnected, () => {
                    event("livestream_connected", {
                        label: room.name,
                    });
                    updateParticipantSize(room);
                });
                room.on(RoomEvent.ParticipantDisconnected, () => {
                    event("livestream_disconnected", {
                        label: room.name,
                    });
                    updateParticipantSize(room);
                });
                room.on(RoomEvent.DataReceived, (data) => {
                    const decodedData = decoder.decode(data);
                    dispatch(addStreamComment(decodedData));
                });
            }}
        >
            <Stack
                sx={videoContainerStyle}
                justifyContent="center"
                alignItems="center"
            >
                <RoomAudioRenderer />
                <Stage video={video} room={room} />
                {!sessionState.isLive && isCreator && (
                    <PersonIcon sx={{ color: "white", fontSize: 175 }} />
                )}
            </Stack>
            {sessionState.displaySettings && (
                <ManageStream createMode={false} />
            )}
            <Header
                isCreator={sessionState.isCreator}
                isLive={sessionState.isLive}
                room={room}
            />
            <ActionBar isCreator={sessionState.isCreator} room={room} />
            {!sessionState.isCreator && (
                <>
                    {!audioEnabled && isMobileDevice() && (
                        <AudioModal
                            onClick={() => handleOnEnableAudioClick()}
                        />
                    )}
                    <TipModal
                        room={room}
                        displayTip={sessionState.displayTip}
                        setDisplayToast={setDisplayToast}
                    />
                    {sessionState.displayCommentTipModal && (
                        <CommentTipModal
                            room={room}
                            displayInfo={sessionState.displayCommentTipModal}
                        />
                    )}
                    {displayToast && (
                        <TipToast
                            timeLeft={timeTipToast}
                            setTimeLeft={setTimeTipToast}
                        />
                    )}
                </>
            )}
        </LiveKitRoom>
    );

kind-art-87090

09/05/2023, 8:55 PM

Copy code

#root-wrapper {
        width: 50vw;
        height: 85vh;
        min-width: 320px;
        max-width: 600px;
        min-height: 568px;
        max-height: 1133px;
        position: relative;
    }

magnificent-art-43333

09/05/2023, 10:33 PM

cc @eager-zoo-16408

polite-kilobyte-67570

09/06/2023, 8:50 AM

do you have fixed dimensions set for the video track inside your stage component? the video stream itself can change dimensions when switching to different simulcast layers (e.g. because of network congestion)

kind-art-87090

09/06/2023, 10:12 PM

Yes I do. Is there is a way to simulate the simulcast so that I can test what is happening?

eager-zoo-16408

09/07/2023, 7:24 AM

Hard to say without all the code and CSS available, but I would guess that some CSS like the following is missing to force the element to always take up all available space.

Copy code

video {
  height: 100%;
}

➕ 1

eager-zoo-16408

09/11/2023, 8:41 AM

@kind-art-87090 Thanks for taking the time to record a video. Could you share the code for the <Stage> component? I still think this is probably a CSS issue, but it is hard to diagnose without the full code. If you don’t feel comfortable posting it here, you can also DM us the code or provide a minimal example repo for us to reproduce the issue.

Open in Slack

Previous Next