# Meet getUserMedia 오류 해결 (HTTPS 필수)

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

## 증상

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

```text
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이 로컬 카메라 트랙을 만들려고 하면 오류가 발생합니다.

```js
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`의 개발 설정 예시:

```dotenv
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 접속하면 인증서 이름이 맞지 않아 경고가 발생할 수 있습니다.

## 인증서 경고 점검

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

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

```powershell
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 연결 성공
- [ ] 방에 들어가 실제 영상과 음성 송수신 확인

## 관련 파일

- `Caddyfile`: HTTPS 및 WSS 리버스 프록시
- `meet/.env.local`: Meet의 LiveKit 연결 설정
- [외부 IP 접속](/guides/livekit-external-access/): node-ip 및 미디어 포트