Livekit) 접속은 했지만 비디오 안나온 문제

Wonjun Lee·2025년 7월 29일

LiveKit Problem React Spring project

문제

스프링 서버와 livekit 도커 컨테이너를 실행시키고, 스프링 서버에서 받아온 토큰으로 livekit에에 접속하는 과정을 테스트했다.

livekit에 정상적으로 접속했지만, 카메라, 마이크에 대한 권한 요청 메시지도 안뜨고, 화면도 안나왔다.

토큰 기반 인증을 위해 헤더도 정의했지만 인증 과정에서 틀린것 같지는 않았다.

고민 과정

위 그림은 클라이언트에서 라이브 서버로 접속하는 과정을 그린 시퀀스 다이어그램이다.

스프링 서버의 로그를 토대로 분석해보면, 위 과정은 정상적으로 동작했다. 또한 도커 컨테이너의 로그를 살펴봐도 토큰을 사용하여 웹소켓 접근이 성공한 것으로 보였다.

문제는 프론트엔드의 코드에서 문제가 생긴 것으로 판단되었다.

문제가 생긴 코드는 다음의 부분이었다.

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

// Connect to the room with the LiveKit URL and the token
await room.connect(LIVEKIT_URL, token);

// Publish your camera and microphone
await room.localParticipant.enableCameraAndMicrophone();
setLocalTrack(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);

위 코드에서 room.localParticipant.enableCameraAndMicrophone(); 부분에서 권한 문제로 막힌 것으로 보인다.

해결

위 과정에서 connect 를 수행하기 전 커메라, 마이크 권한을 요청하도록 수정했다.

// 1. 사용자 권한 요청
await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

// 2. 토큰 가져오기
const token = await getToken(roomName, participantName);

// 3. 방 연결
await room.connect(LIVEKIT_URL, token);

// 4. 카메라, 마이크 enable
await room.localParticipant.enableCameraAndMicrophone();

// 5. 첫 videoTrack 추출
const publication = Array.from(room.localParticipant.videoTrackPublications.values())[0];
if (publication?.videoTrack) {
    setLocalTrack(publication.videoTrack);
}