TIL 240724 - WebRTC 구현하기 - 1:1 P2P 연결 (1)

1. MediaStream

• 사용자의 카메라와 마이크 같은 데이터 스트림에 접근
• navigator.mediaDevices.getUserMedia() 에서 생성된 입력과, video 태그 또는 RTCPeerConnection으로 넘겨주는 출력을 가짐
• navigator.mediaDevices.getUserMedia()가 받는 3개의 변수
  • 제약 오브젝트(video 사용 여부 및 해상도, audio 사용 여부 등)
  • 성공시 콜백 (MediaStream)
  • 실패시 콜백(error)
• getUserMedia()는 로컬 파일 시스템이 아닌 서버에서 사용되어야 하며, 이외의 경우 PERMISSION_DENIED: 1 에러가 발생함
• 예시

let constraints = (window.constraints = {
    audio: false,
    video: true,
});

navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
        let videoTracks = stream.getVideoTracks();
        console.log("Got stream with constraints:", constraints);
        console.log("사용 기기: " + videoTracks[0].label);
        stream.onremovetrack = function () {
            console.log("Stream ended");
        };
        window.stream = stream; // make variable available to browser console
        video.srcObject = stream;
    }).catch((error) => {
        console.log('연결 실패');
    })

 

2. RTCPeerConnection

• Peer간 데이터 통신 기능
• 암호화 및 대역폭 관리 기능을 갖고 있고, 오디오 또는 비디오 연결을 함
• 아래 다이어그램 참고 (녹색 부분은 웹 개발자들이 처리 안해도 되는 부분들...)

 

3. 구현 방식

1) 연결 구조

1:1 facetime을 한다고 생각해보자.. facetime을 건 사람과 받은 사람이 있는데, 각각 Caller / Receiver 라고 하자. 

Caller가 Signaling 서버를 통해 자신의 SessionDescription을 보내면 Receiver도 마찬가지로 Signaling 서버를 통해 SessionDescription을 보낸다. 이외에도 ICECandidate를 Signaling 서버를 통해 주고받으며 peer 간 연결을 완료한 후 Caller과 Receiver 간 데이터를 주고받는다.

• Signaling : 서로 다른 네트워크에 있는 2개의 디바이스들을 통신하기 위해 거치는 각 디바이스들의 위치 발견 및 포맷 협의 프로세스로, 각 디바이스들을 상확ㄴ에 동의된 서버(socket.io or websocket)에 연결시킴
•  Signaling 서버 : 두 디바이스들 사이 WebRTC 커넥션을 만들기 위해 인터넷 네트워크에서 둘을 연결시키는 작업을 해주는 서버, 상대방의 정보를 여기서 얻어옴
• ICECandidate : RTCPeerConnection을 구축할 때 사용되는 ICE의 후보군

2) STUN 서버 동작

각 peer들은 stun 서버를 통해 자신의 public address를 알아내고, 접근 가능한지 여부를 알아낸다. 그 외에는 위와 똑같음..

여기서 Relay Server는 TURN 서버로, 항상 사용하는 기능은 아니다.

 

3) 연결 후 데이터 흐름

Peer 연결이 완료됐을 때 peer 간의 데이터 흐름은 다음과 같다. TURN 서버가 필요없으면 Relay 서버를 거치지 않고 peer간 다이렉트로 연결된다.