카메라·마이크 HTTPS 설정

원본 다운로드: Markdown · PDF

작성일: 2026-07-19 · 한글 복구: 2026-09-07 기존 HTTPS 적용 기록을 복구한 문서입니다. 인증서의 현재 상태는 접속 시 확인합니다.

증상

브라우저 콘솔에서 다음 오류가 발생합니다.

TypeError: Cannot read properties of undefined (reading 'getUserMedia')
  at livekit-client ... createLocalTracks
  at PreJoin.tsx

원인

http://125.131.238.28:3000처럼 공인 IP의 일반 HTTP로 접속하면 보안 컨텍스트가 아니므로 navigator.mediaDevices가 제공되지 않을 수 있습니다. 이 상태에서 LiveKit이 로컬 카메라 트랙을 만들려고 하면 오류가 발생합니다.

window.isSecureContext
navigator.mediaDevices

접속 방식	카메라·마이크 사용 조건
`http://localhost:3000`	로컬 개발 예외 및 사용자 권한
`http://127.0.0.1:3000`	로컬 개발 예외 및 사용자 권한
공인 IP의 일반 HTTP	보안 컨텍스트가 아니므로 사용 불가
공인 인증서가 적용된 HTTPS 도메인	인증서 정상 및 사용자 권한
내부 CA 인증서의 HTTPS	접속 장치가 해당 CA를 신뢰하도록 설정 필요

서버 연결에 성공해도 카메라와 마이크 권한 단계에서 실패할 수 있습니다.

해결 방법

1. Caddy와 공인 HTTPS

기존 tls internal 설정에서는 브라우저가 인증서를 신뢰하지 않아 net::ERR_CERT_AUTHORITY_INVALID가 발생했습니다. 기존 적용 기록은 Let’s Encrypt 인증서로 전환한 내용입니다.

항목	기존 적용 내용
도메인	`meet.dev.tictechtoeai.com`
발급기관	Let’s Encrypt
당시 검증 방식	HTTP-01, TCP 80 접근 필요
갱신 관리	Caddy의 자동 인증서 관리

현재 저장소의 Caddy 경로 구성:

HTTP 도메인 요청을 HTTPS로 리다이렉트
도메인의 443 포트는 Meet UI 127.0.0.1:3000으로 연결
8443 포트는 같은 Meet UI의 호환 경로
7443 포트는 LiveKit 127.0.0.1:7880으로 연결

2. LiveKit WSS

시그널링 주소는 wss://meet.dev.tictechtoeai.com:7443을 사용합니다.

3. Meet 환경 변수

meet/.env.local의 개발 설정 예시:

LIVEKIT_API_KEY=devkey
LIVEKIT_API_SECRET=secret
LIVEKIT_URL=wss://meet.dev.tictechtoeai.com:7443

환경 변수 변경 후 Meet 프로세스를 다시 시작해야 설정이 반영됩니다.

올바른 접속 방법

용도	URL
외부 Meet 및 카메라	`https://meet.dev.tictechtoeai.com/`
Meet 호환 포트	`https://meet.dev.tictechtoeai.com:8443/`
LiveKit WSS	`wss://meet.dev.tictechtoeai.com:7443`
같은 PC의 로컬 개발	`http://127.0.0.1:3000` 및 로컬 LiveKit URL

공인 IP의 HTTP 주소는 카메라 테스트에 사용하지 않습니다. 도메인 전용 인증서를 사용하는 서버에 IP로 HTTPS 접속하면 인증서 이름이 맞지 않아 경고가 발생할 수 있습니다.

인증서 경고 점검

주소가 IP가 아닌 인증서의 도메인과 일치하는지 확인합니다.
Caddy가 실행 중이고 필요한 포트를 수신하는지 확인합니다.
TCP 80/443/7443 및 사용하는 경우 8443의 방화벽을 확인합니다.
DNS A 레코드가 현재 공인 IP를 가리키는지 확인합니다.
Caddy 로그에서 인증서 발급 성공 또는 실패 원인을 확인합니다.

수동 기동 예시 (이미 서비스로 실행 중이면 중복 실행하지 않습니다):

cd C:\Developments\LivekitDev
.\caddy.exe run --config Caddyfile

임시 개발 우회 기록

기존 문서에는 자체 인증서 경고를 넘기는 방법과 Chrome의 chrome://flags/#unsafely-treat-insecure-origin-as-secure에 테스트 주소를 등록하는 방법이 기록되어 있었습니다. 이러한 우회는 외부 서비스의 HTTPS 설정을 대신하지 않습니다. 일반 사용자에게는 신뢰할 수 있는 인증서의 HTTPS 주소를 제공합니다.

확인 체크리스트

HTTPS 도메인 접속 시 인증서 경고 없음
브라우저에서 보안 컨텍스트 및 mediaDevices 확인
방 입장 전 카메라 미리보기 표시
콘솔에 getUserMedia TypeError 없음
LiveKit WSS 연결 성공
방에 들어가 실제 영상과 음성 송수신 확인