[error/WebRTC] WebSocket 서버 배포 하면서 겪은 삽질 모음 🥹..

 

 
 
로컬에서 잘 돌아가던 웹소켓, 실제 서버에 배포 하면서 겪었던 삽질 모음..

---

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getUserMedia')

 
→ 크롬에서 getUserMedia()는 보안된 출처(HTTPS 또는 localhost)에서만 동작 함.
 
참고)
https://stackoverflow.com/questions/34215937/getusermedia-not-supported-in-chrome
 
 

---

MediaSoupError: port bind failed due to address not available …

 
createWebRtcTransport() listenIps 옵션 제대로 설정되어 있는 지 확인 필요 (mediasoup)
→ 상용화 서버(EC2)일 경우 “ip: private_ip, announcedIp: public ip”

// 예시

const transport: WebRtcTransport = await router.createWebRtcTransport({
  listenIps: [
    {
      ip: <EC2_Private_IP>,
      announcedIp: <EC2_Public_IP>,
    },
  ],
});

 
참고)
https://mediasoup.discourse.group/t/mediasouperror-port-bind-failed-due-to-address-not-available-udp-1-2-3-4-attempt-1/32
 
 

---

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

 
HTTPS로 로드된 웹페이지에서 HTTP 요청하려 했을 때 발생
→ 클라이언트에서 서버 소켓 연결할 때 호출하는 url 확인

// 예시

const SERVER_URL = 'https://url';
const socket = io(SERVER_URL});

 
 

---

WebSocket connection to 'wss://url:3000/ws' failed:

 
Create React App에서 기본 포트로 3000 포트를 사용하면서 발생하는 에러
→ .env 파일에 “WDS_SOCKET_PORT=0” 설정 추가. 0으로 지정하면 포트를 자동으로 선택하며 보통 웹 서버 포트와 같게 설정된다.
 
참고)
https://languagestory.tistory.com/239