구글은 블랙 사회를위한 인종 평등을 증진하기 위해 최선을 다하고 있습니다. 방법을 참조하십시오.
이 페이지는 Cloud Translation API를 통해 번역되었습니다.
Switch to English

중포 기지 + WebRTC가 코드 랩

1. 소개

이 코드 랩에서는 신호에 대한 브라우저 및 클라우드 경우 FireStore의의 WebRTC API를 사용하여 간단한 비디오 채팅 응용 프로그램을 구축하는 방법을 학습합니다. 이 응용 프로그램은 FirebaseRTC라고 당신에게 WebRTC에 응용 프로그램을 사용할 구축의 기초를 가르 칠 것입니다 간단한 예제로 작동된다.

학습 내용

  • 의 WebRTC를 사용하여 웹 응용 프로그램에서 화상 통화를 시작
  • 클라우드 경우 FireStore를 사용하여 원격 파티에 시그널링

필요한 사항

이 코드 랩을 시작하기 전에, 당신이 설치했는지 확인하십시오

  • 일반적으로 Node.js를 함께 제공 NPM - 노드 LTS 권장합니다

작성 및 중포 기지 프로젝트를 설정합니다

중포 기지 프로젝트를 만듭니다

  1. 중포 기지 콘솔에서 , 다음, 추가 프로젝트를 클릭 중포 기지 프로젝트 FirebaseRTC 이름을 지정합니다.

당신의 중포 기지 프로젝트에 대한 프로젝트 ID를 기억하십시오.

  1. 프로젝트 만들기를 클릭합니다.

당신이 빌드 거라고 응용 프로그램은 웹에서 두 중포 기지의 서비스를 사용할 수를 사용합니다 :

  • 클라우드 경우 FireStore는 클라우드에 구조화 된 데이터를 저장하고 데이터가 업데이트 될 때 즉시 알림을받을 수 있습니다
  • 중포 기지의 고정 자산을 호스트에 호스팅 및 제공

이 특정 코드 랩의 경우, 당신은 이미 당신이 복제됩니다 프로젝트에 호스팅 중포 기지를 구성했습니다. 그러나 클라우드 경우 FireStore, 우리는 구성을 안내해드립니다과 중포 기지 콘솔을 사용하여 서비스를 가능하게한다.

클라우드 경우 FireStore 사용

응용 프로그램은 채팅 메시지를 저장하고 새 채팅 메시지를받을 클라우드 경우 FireStore를 사용합니다.

당신은 클라우드 경우 FireStore를 사용하도록 설정해야합니다 :

  1. 중포 기지 콘솔 메뉴에서 데이터베이스를 클릭 섹션을 개발합니다.
  2. 클라우드 경우 FireStore 창에서 데이터베이스 만들기를 클릭합니다.
  3. 테스트 모드 옵션에서 시작을 선택한 다음 보안 규칙에 대한 면책 조항을 읽은 후 사용을 클릭합니다.

테스트 모드 보장하지만 당신은 자유롭게 개발하는 동안 데이터베이스에 기록 할 수있다. 우리는 우리의 데이터베이스는 더이 코드 랩에서 나중에 확보 할 수 있습니다.

샘플 코드를 취득합니다

명령 줄에서 GitHub의 저장소를 복제 :

 git clone https://github.com/webrtc/FirebaseRTC
 

샘플 코드는 중포 기지-RTC-웹 디렉토리에 복제되어 있어야합니다. 확인 명령 줄 지금부터이 디렉토리에서 실행되어 있는지 확인합니다 :

 cd firebase-rtc-web
 

스타터 응용 프로그램을 가져 오기

편집기에서 중포 기지-RTC-웹에서 파일을 열고 아래의 지침에 따라 변경하십시오. 이 디렉토리는 없습니다 아직 기능의 WebRTC 응용 프로그램으로 구성 코드 랩의 시작 코드가 포함되어 있습니다. 우리는이 코드 랩에 걸쳐이 기능을 만들 수 있습니다.

중포 기지 명령 줄 인터페이스를 설치 (4)

중포 기지 명령 줄 인터페이스 (CLI)를 사용하면 로컬 웹 응용 프로그램 서비스를 제공하고 중포 기지 호스팅하는 웹 응용 프로그램을 배포 할 수 있습니다.

  1. 다음 NPM 명령을 실행하여 CLI를 설치 sh npm -g install firebase-tools
  1. 다음 명령을 실행하여 CLI가 제대로 설치되어 있는지 확인 sh firebase --version

있는지 확인 중포 기지 CLI의 버전은 v6.7.1 또는이다.

  1. 다음 명령을 실행하여 중포 기지 CLI 권한을 부여 : sh firebase login

중포 기지 당신은이 앱의 로컬 디렉토리 및 파일에서 호스팅 앱의 구성을 끌어 웹 애플리케이션 템플릿을 설정했습니다. 하지만이 작업을 수행하기 위해, 당신은 당신의 중포 기지 프로젝트와 응용 프로그램을 연결해야합니다.

  1. 다음 명령을 실행하여 중포 기지 프로젝트와 응용 프로그램을 연결합니다 : sh firebase use --add

  2. 메시지가 표시되면 다음 중포 기지 프로젝트를 별칭을 제공, 당신의 프로젝트 ID를 선택합니다.

여러 환경 (생산, 준비 등)이있는 경우 별칭 유용합니다. 그러나,이 코드 랩에 대한, 그냥의 별칭 사용할 수 있도록 default .

  1. 명령 줄의 나머지 지침을 따르십시오.

로컬 서버를 실행 (5)

당신은 실제로 우리의 응용 프로그램에 대한 작업을 시작할 준비가! 하자가 로컬 응용 프로그램을 실행!

  1. 다음 중포 기지 CLI 명령을 실행 sh firebase serve --only hosting

  2. 귀하의 명령 줄은 다음과 같은 응답을 표시해야합니다 hosting: Local server: http://localhost:5000

우리는 로컬로 우리의 응용 프로그램을 제공하기 위해 중포 기지 호스팅 에뮬레이터를 사용하고 있습니다. 웹 응용 프로그램은 이제 HTTP에서 사용할 수 있어야합니다 : // localhost를 : 5000.

  1. HTTP에서 당신의 앱을 엽니 다 : // localhost를 : 5000.

당신은 당신의 중포 기지 프로젝트에 연결되어 FirebaseRTC의 사본을 볼 수 있습니다.

이 앱은 자동으로 중포 기지 프로젝트에 연결되어있다.

6. 새로운 방 만들기

이 응용 프로그램에서 각 화상 채팅 세션은 방이라고합니다. 사용자는 자신의 응용 프로그램에서 버튼을 클릭하여 새로운 방을 생성 할 수 있습니다. 이것은 상대방이 같은 방에 가입하는 데 사용할 수있는 ID를 생성합니다. ID는 각 방에 대한 클라우드 경우 FireStore의 키로 사용됩니다.

각각의 객실은 포함 RTCSessionDescriptions 제안하고 응답뿐만 아니라 각 당사자의 ICE 후보와 두 개의 컬렉션을 모두를.

첫 번째 작업은 호출자의 초기 제공과 함께 새로운 방을 만드는 누락 된 코드를 구현하는 것입니다. 열기 public/app.js 및 주석 찾아 // Add code for creating a room here 다음 코드를 추가합니다 :

 const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

const roomWithOffer = {
    offer: {
        type: offer.type,
        sdp: offer.sdp
    }
}
const roomRef = await db.collection('rooms').add(roomWithOffer);
const roomId = roomRef.id;
document.querySelector('#currentRoom').innerText = `Current room is ${roomId} - You are the caller!`
 

첫 번째 줄은 생성 RTCSessionDescription 발신자로부터 제안을 나타냅니다. 이것은 다음 로컬 설명으로 설정하고, 마지막으로 클라우드 경우 FireStore의 새로운 공간 객체에 기록됩니다.

다음으로, 우리는 데이터베이스에 대한 변경 사항을 청취하고, 호출자의 응답이 추가되었을 때 감지합니다.

 roomRef.onSnapshot(async snapshot -> {
    console.log('Got updated room:', snapshot.data());
    const data = snapshot.data();
    if (!peerConnection.currentRemoteDescription && data.answer) {
        console.log('Set remote description: ', data.answer);
        const answer = new RTCSessionDescription(data.answer)
        await peerConnection.setRemoteDescription(answer);
    }
});
 

이는 수신자가 기록 될 때까지 대기 RTCSessionDescription 대한 답변을하고 설정하는 것이 발신자의 원격 설명과 같은 RTCPeerConnection .

제 방 참여

다음 단계는 기존의 룸에 가입하기위한 로직을 구현하는 것입니다. 사용자는 실내 버튼을 가입을 클릭하고 방에 참여하기위한 ID를 입력하여이 작업을 수행합니다. 여기 당신의 작업은 생성 구현하는 것입니다 RTCSessionDescription 따라 데이터베이스의 공간을 대답과 업데이트합니다.

 const offer = roomSnapshot.data().offer;
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

const roomWithAnswer = {
    answer: {
        type: answer.type,
        sdp: answer.sdp
    }
}
await roomRef.update(roomWithAnswer);
 

위의 코드에서, 우리는 발신자로부터 쿠폰을 추출하고, 생성함으로써 시작 RTCSessionDescription 우리가 원격으로 설정하는 것이 설명. 다음으로, 우리는 답을 만들 로컬 설명으로 설정하고 데이터베이스를 업데이트합니다. 데이터베이스의 업데이트는 트리거 onSnapshot 차례로 피 호출자로부터 응답에 기초하여 상기 원격 설명을 설정할 것이다 발신 측 콜백. 이것은 교환 완료 RTCSessionDescription 발신자와 수신자 사이에 객체.

8. 수집 ICE 후보들

발신자와 수신자가 서로에 연결하기 전에, 그들은 또한 원격 피어에 연결하는 방법의 WebRTC에게 교환 ICE 후보에 필요합니다. 당신의 다음 작업은 ICE 후보를 수신하고 데이터베이스의 컬렉션에 추가하는 코드를 구현하는 것입니다. 함수 찾기 collectIceCandidates 하고 다음 코드를 추가 :

 async function collectIceCandidates(roomRef, peerConneciton,    
                                    localName, remoteName) {
    const candidatesCollection = roomRef.collection(localName);

    peerConnection.addEventListener('icecandidate', event -> {
        if (event.candidate) {
            const json = event.candidate.toJSON();
            candidatesCollection.add(json);
        }
    });

    roomRef.collection(remoteName).onSnapshot(snapshot -> {
        snapshot.docChanges().forEach(change -> {
            if (change.type === "added") {
                const candidate = new RTCIceCandidate(change.doc.data());
                peerConneciton.addIceCandidate(candidate);
            }
        });
    })
}
 

이 기능은 두 가지 작업을 수행합니다. 이것은 한 WebRTC API에서 ICE 후보를 수집하고 데이터베이스에 추가하고, 원격 피어에서 추가 ICE 후보를 수신하고 그에 추가 RTCPeerConnection 인스턴스입니다. 데이터베이스가 새로 추가가 아닌 것은 걸러 변화에 우리가 그렇지 않으면 또 다시 ICE 후보의 동일한 세트를 추가 한 것이기 때문에,들을 때 그것은 중요하다.

9. 결론

이 코드 랩에서는 클라우드 경우 FireStore를 사용 WebRTC에 대한 신호를 구현하기 위해,뿐만 아니라 방법과 같은 간단한 비디오 채팅 응용 프로그램을 만드는 것을 사용하는 방법을 배웠습니다.

더 많은 내용은 다음 리소스를 참조하십시오

  1. FirebaseRTC 소스 코드
  2. WebRTC가 샘플
  3. 클라우드 경우 FireStore