피어 연결 시작하기

피어 연결은 서로 다른 컴퓨터의 두 응용 프로그램을 연결하여 P2P 프로토콜입니다. 피어 간의 통신은 비디오, 오디오 또는 임의 바이너리 데이터 (RTCDataChannel API를 지원하는 클라이언트용) 포함 두 피어가 연결할 수 있는 방법을 찾으려면 두 클라이언트 모두 ICE를 제공해야 합니다. 서버 구성 이것은 STUN 또는 TURN 서버이며 역할은 각 클라이언트에 ICE 후보를 제공한 다음 원격 피어 이러한 ICE 후보 전송을 일반적으로 신호라고 합니다.

신호

WebRTC 사양에는 ICE (인터넷)와 통신하기 위한 API가 포함되어 있습니다. 연결 설정) 서버이지만 신호 구성요소가 있습니다. 두 피어가 연결 방법을 공유하려면 신호가 필요합니다. 일반적으로 이 문제는 일반적인 HTTP 기반 웹 API (즉, 기타 RPC 메커니즘)을 통해 웹 애플리케이션이 필요한 정보를 전달하는 역할을 합니다.

다음 코드 스니펫은 이 가상의 신호 서비스를 사용하여 비동기식으로 메시지를 주고받습니다 이 항목은 남은 기간에 사용됩니다. 필요한 경우 이 가이드의 예를 참고하세요.

// Set up an asynchronous communication channel that will be
// used during the peer connection setup
const signalingChannel = new SignalingChannel(remoteClientId);
signalingChannel.addEventListener('message', message => {
    // New message from remote client received
});

// Send an asynchronous message to the remote client
signalingChannel.send('Hello!');

신호는 다양한 방법으로 구현할 수 있으며 WebRTC는 특정 솔루션을 선호하지 않습니다.

피어 연결 시작

각 피어 연결은 RTCPeerConnection 객체에 의해 처리됩니다. 생성자 이 클래스는 단일 RTCConfiguration 객체를 매개변수로 사용합니다. 이 객체는 피어 연결이 설정되는 방법을 정의하며 정보를 포함해야 합니다. ICE 서버에 대한 정보를 얻을 수 있습니다.

RTCPeerConnection가 생성되면 SDP 오퍼를 만들거나 응답을 받을 수 있습니다. SDP가 생성 시에는 반드시 확인할 수 있습니다. SDP 객체를 원격 피어에 전달하는 것을 신호라고 하며 WebRTC 사양이 적용되지 않습니다.

호출 측에서 피어 연결 설정을 시작하기 위해 RTCPeerConnection 객체를 만든 다음 createOffer()를 호출하여 RTCSessionDescription 객체 이 세션 설명은 로컬 setLocalDescription()을 사용한 다음 Google 신호로 수신 측에 연결합니다. 또한 Google Cloud의 시그널링에 대한 제안된 세션 설명에 대한 답변이 수신 측에 있습니다.

async function makeCall() {
    const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]}
    const peerConnection = new RTCPeerConnection(configuration);
    signalingChannel.addEventListener('message', async message => {
        if (message.answer) {
            const remoteDesc = new RTCSessionDescription(message.answer);
            await peerConnection.setRemoteDescription(remoteDesc);
        }
    });
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    signalingChannel.send({'offer': offer});
}

수신 측에서는 오퍼를 만들기 전에 수신 오퍼를 기다립니다. RTCPeerConnection 인스턴스. 완료되면 setRemoteDescription() 그런 다음 createAnswer()를 호출하여 다음에 대한 답변을 만듭니다. 제안할 수 있습니다. 이 답변은 setLocalDescription()이며 신호를 통해 호출 측으로 전송됩니다. 있습니다.

const peerConnection = new RTCPeerConnection(configuration);
signalingChannel.addEventListener('message', async message => {
    if (message.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        signalingChannel.send({'answer': answer});
    }
});

두 피어가 로컬 및 원격 세션 설명을 모두 설정하면 원격 피어의 기능을 알아야 합니다. 그렇다고 해서 연결이 준비됩니다 이 기능이 작동하려면 ICE를 수집해야 합니다. 신호 채널을 통해 상대방에게 전송합니다. 피어

ICE 후보

두 피어가 WebRTC를 사용하여 커뮤니케이션하려면 서로 교환해야 합니다. 연결 정보를 볼 수 있습니다 네트워크 조건은 많은 요인이 발생하므로, 일반적으로 외부 서비스는 피어 연결의 가능한 후보입니다. 이 서비스는 ICE라고 하며 STUN 또는 TURN 서버를 사용하여 데이터를 전송할 수 있습니다. STUN은 세션 순회를 의미합니다. NAT용 유틸리티이며, 일반적으로 대부분의 WebRTC 애플리케이션에서 간접적으로 사용됩니다.

TURN (Traversal Using Relay NAT)은 Transformer에 기반하며 STUN 프로토콜 및 대부분의 상용 WebRTC 기반 서비스는 TURN 서버를 사용합니다. 피어 간의 연결을 설정하는 데 사용됩니다 WebRTC API는 STUN과 및 TURN을 직접 사용하여 보다 완전한 '인터넷'이라는 용어로 수집됩니다. 연결 설정. WebRTC 연결을 만들 때 일반적으로 하나 이상의 ICE 서버를 구성하여 RTCPeerConnection 객체.

Trickle ICE

RTCPeerConnection 객체가 생성되면 기본 프레임워크는 다음을 사용합니다. 연결 설비를 위한 후보를 수집하기 위한 ICE 서버 제공 (ICE) 있습니다. RTCPeerConnection 신호의 icegatheringstatechange 이벤트 ICE 수집이 어떤 상태 (new, gathering 또는 complete)인지를 나타냅니다.

피어가 ICE 수집이 완료될 때까지 기다릴 수도 있지만 일반적으로 '트리클 아이스'를 사용하는 것이 테크닉을 사용하여 각 ICE 후보를 원격 피어에 전달합니다. 이렇게 하면 피어 연결을 위한 설정 시간을 크게 줄이고 시작하는 것이 좋습니다.

ICE 후보를 수집하려면 icecandidate 이벤트의 리스너를 추가하기만 하면 됩니다. 이 리스너에서 내보낸 RTCPeerConnectionIceEvent에는 다음이 포함됩니다. 전송되어야 하는 새 후보를 나타내는 candidate 속성 원격 피어 (신호 보기 참고)

// Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener('icecandidate', event => {
    if (event.candidate) {
        signalingChannel.send({'new-ice-candidate': event.candidate});
    }
});

// Listen for remote ICE candidates and add them to the local RTCPeerConnection
signalingChannel.addEventListener('message', async message => {
    if (message.iceCandidate) {
        try {
            await peerConnection.addIceCandidate(message.iceCandidate);
        } catch (e) {
            console.error('Error adding received ice candidate', e);
        }
    }
});

연결됨

ICE 후보자가 입수되면 동료의 주를 예상해야 합니다. 연결이 결국 연결됨 상태로 변경됩니다. 이를 감지하기 위해 connectionstatechange를 수신 대기하는 RTCPeerConnection의 리스너 이벤트를 수신합니다.

// Listen for connectionstatechange on the local RTCPeerConnection
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        // Peers connected!
    }
});

RTCPeerConnection API 문서