Firebase + WebRTC Codelab

1. 소개

이 Codelab에서는 신호를 위해 Cloud Firestore의 WebRTC API 이 FirebaseRTC라고 하며, 간단한 예로 작동하여 빌드의 기본 사항을 배울 것입니다.

<ph type="x-smartling-placeholder">
</ph>

학습할 내용

  • WebRTC를 사용하여 웹 애플리케이션에서 영상 통화 시작
  • Cloud Firestore를 사용하여 원격 당사자에게 신호 전송

필요한 항목

이 Codelab을 시작하기 전에 다음을 설치했는지 확인하세요.

  • npm: 일반적으로 Node.js와 함께 제공되며 노드 LTS가 권장됩니다.

2. Firebase 프로젝트 만들기 및 설정

Firebase 프로젝트 만들기

  1. Firebase Console에서 '추가'를 클릭합니다. Firebase 프로젝트 이름을 FirebaseRTC로 지정합니다.

Firebase 프로젝트의 프로젝트 ID를 기억해 둡니다.

<ph type="x-smartling-placeholder">
</ph>
  1. '프로젝트 만들기'를 클릭합니다.

빌드하려는 애플리케이션은 사용 가능한 두 가지 Firebase 서비스를 사용합니다. 웹:

  • Cloud Firestore로 클라우드에 구조화된 데이터를 저장하고 빠르게 데이터가 업데이트되면 알림
  • 정적 애셋을 호스팅하고 제공하기 위한 Firebase 호스팅

이 Codelab에서는 이미 복제할 프로젝트입니다 Cloud Firestore의 경우 Firebase Console을 사용한 서비스 구성 및 사용 설정

Cloud Firestore 사용 설정

앱이 Cloud Firestore를 사용하여 채팅 메시지를 저장하고 새 채팅을 수신합니다. 메시지를 보낼 수 있습니다

Cloud Firestore를 사용 설정해야 합니다.

  1. Firebase Console 메뉴의 개발 섹션에서 데이터베이스를 클릭합니다.
  2. Cloud Firestore 창에서 데이터베이스 만들기를 클릭합니다.
  3. 테스트 모드에서 시작 옵션을 선택하고 보안 규칙에 대한 면책조항

테스트 모드를 사용하면 개발 중에 데이터베이스에 자유롭게 쓸 수 있습니다. 이 Codelab의 후반부에서는 데이터베이스의 보안을 강화합니다.

3. 샘플 코드 가져오기

명령줄에서 GitHub 저장소를 클론합니다.

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

샘플 코드는 FirebaseRTC 디렉터리에 클론되어 있어야 합니다. 이제부터 명령줄이 이 디렉터리에서 실행되는지 확인합니다.

cd FirebaseRTC

시작 앱 가져오기

FirebaseRTC의 파일을 편집기에서 열고 다음에 따라 변경합니다. 다음 안내를 따르세요. 이 디렉터리에는 아직 작동하지 않는 WebRTC 앱으로 구성된 Codelab입니다. 목표 달성에 성공합니다. 살펴보겠습니다.

4. Firebase 명령줄 인터페이스 설치

Firebase 명령줄 인터페이스 (CLI)를 사용하여 웹 앱 제공 가능 웹 앱을 로컬에 배포하고 Firebase 호스팅에 배포합니다.

<ph type="x-smartling-placeholder">
</ph>
  1. 다음 npm 명령어를 실행하여 CLI를 설치합니다. sh npm -g install firebase-tools
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph>
  1. 다음을 실행하여 CLI가 올바르게 설치되었는지 확인합니다. 명령어: sh firebase --version

Firebase CLI 버전이 v6.7.1 이상인지 확인합니다.

  1. 다음 명령어를 실행하여 Firebase CLI를 승인합니다. sh firebase login

Firebase에 대한 앱 구성을 가져오도록 웹 앱 템플릿을 설정했습니다. 앱의 로컬 디렉터리 및 파일에서 호스팅 하지만 이렇게 하려면 앱을 Firebase 프로젝트와 연결합니다.

  1. 다음을 실행하여 앱을 Firebase 프로젝트와 연결합니다. 명령어: sh firebase use --add

  2. 메시지가 표시되면 프로젝트 ID를 선택한 후 Firebase 프로젝트에 별칭입니다.

별칭은 여러 환경 (프로덕션, 스테이징 등)이 있는 경우에 유용합니다. 그러나 이 Codelab에서는 default의 별칭을 사용하겠습니다.

  1. 명령줄의 나머지 안내를 따릅니다.

5. 로컬 서버 실행

이제 실제로 앱에서 작업을 시작할 준비가 되었습니다. 앱을 로컬에서 실행해 보겠습니다.

  1. 다음 Firebase CLI 명령어를 실행합니다. sh firebase serve --only hosting

  2. 명령줄에 다음과 같은 응답이 표시됩니다. hosting: Local server: http://localhost:5000

Firebase 호스팅 에뮬레이터를 사용하여 로컬에서 앱을 제공합니다. 웹 앱 http://localhost:5000에서 사용할 수 있습니다.

  1. http://localhost:5000에서 앱을 엽니다.

Firebase 프로젝트

앱이 Firebase 프로젝트에 자동으로 연결되었습니다.

6. 새 방 만들기

이 애플리케이션에서 각 영상 채팅 세션을 채팅방이라고 합니다. 사용자는 새 방을 만들 수 있습니다. 그러면 ID가 생성됩니다. 원격 사용자가 같은 방에 참여하는 데 사용할 수 있는 이메일 주소입니다. ID는 키로 사용되므로 각 방의 Cloud 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를 만듭니다. 호출됩니다. 그런 다음 지역 설명으로 설정하고 Cloud 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

7. 채팅방에 참여하기

다음 단계는 기존 채팅방에 참여하는 로직을 구현하는 것입니다. 사용자 채팅방 참여 버튼을 클릭하고 채팅방의 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, peerConnection,
                                    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());
                peerConnection.addIceCandidate(candidate);
            }
        });
    })
}

이 함수는 두 가지 작업을 합니다. WebRTC API에서 ICE 후보를 수집하고 이를 데이터베이스에 추가하고 원격에서 추가된 ICE 후보를 수신 대기합니다. 피어에 연결하고 RTCPeerConnection 인스턴스에 추가합니다. 포드에서 실행 중인 데이터베이스 변경사항을 수신 대기하여 새로 추가되지 않은 항목을 필터링한 다음 그렇게 하지 않았다면 동일한 ICE 후보 집합을 계속해서 추가했을 것이기 때문입니다. 다시 시도합니다.

9. 결론

이 Codelab에서는 Cloud를 사용하여 WebRTC의 신호를 구현하는 방법을 알아봤습니다. Firestore를 사용하여 간단한 영상 채팅을 만드는 방법 애플리케이션입니다.

자세한 내용은 다음 리소스를 참고하세요.

  1. FirebaseRTC 소스 코드
  2. WebRTC 샘플
  3. Cloud Firestore