Firestore를 이용한 WebRTC 화상 통화 시작

대상 독자

시도https://webrtc.org/getting-started/firebase-rtc-codelab 가이드에 실패한 사람

자바스크립트 좀 알아

WebRTC 및 Firebase의 초보자

개시하다

Firebase의 Firestore를 사용하면 전방의 코드만 있으면 WebRTC 통신에 필요한 정보 교환(신호)을 할 수 있다.
화상회의 시스템 수요가 늘면서 낮은 지연으로 NAT를 초과해 화상통화를 하기 위해 웹RTC가 주목받은 지 한참이 지났다.
브라우저에서 WebRTC 화상 통화를 위해 SDK 사용 가능
앞으로 서비스 규모가 어마어마할 때를 감안하면 스스로 노력하는 것이 수지가 맞을 것이다.
나는 1년 전 웹RTC를 이용해 원격 작업을 위한'에어 커뮤니케이션'이라는 서비스를 만들었을 때 어떤 영상통화 시스템을 제작하자는 요청을 받았다.
이번에는 1년 전 코델랩 가이드처럼 설치해도 움직이지 않고 격투의 궤적을 걸으면서 움직이려고 한다.
(이외에도 행사 샘플은 Solution blanch에서 제작한 것 같습니다. 결과만 보고 싶으신 분들은 저쪽을 봐주세요.)

Codelab 설명서의 설명

완전한 코드보다 먼저 서로 어울리지 않는 이동 코드를 목표로 하는 웹rtc.org 아래 링크에서
https://github.com/webrtc/FirebaseRTC/blob/master/public/app.js
나는 이 불완전한 부분을 보충하고 싶다.
webrtc.org의 가이드와 비교하면서 전진하세요.
https://webrtc.org/getting-started/firebase-rtc-codelab

5. 로컬 서버를 실행할 때까지 진행하십시오.

Firebase 준비도 끝났고 브라우저로 열면http://localhost:5000 이렇게 표시될 것 같아요.

getUserMedia로 카메라를 켤 때까지 코드가 준비되어 있습니다.

6. 새 공간 만들기

※ 방을 만들기 편한 사람은 오피스 측, 방에 들어간 사람은 앤서 측.
public/app.js
PeerConnection을 만들고 localStream track을 추가한 후

// Add code for creating a room here

// Code for creating room above

사이에 무작위 ID의 방을 만들고 Firestore에서 만든 Offer에 쓰는 코드를 추가합니다.(webrtc.org의 안내서를 참조하시오. 아래와 같다)
나는 여기까지가 좋다고 생각한다.
다음은 마법사에 따라 "다음에 데이터베이스에 대한 변경 사항을 듣겠습니다"를 주의하십시오.

// Listening for remote session description below

의 해설 시작

// Code for creating a room below

// Code for creating a room above

왜요?.방금 방을 만드는 코드를 썼기 때문에, 이 평론은 쓸데없는 것이다.
"다음 데이터베이스 변경 내용 듣기"섹션을 다시 시작하십시오.

// Listening for remote session description below

// Listening for remote session description above

에 코드를 추가하여 Arror 함수를 ->로 변경하고 =>로 수정합니다.
onSnapshot은 룸Ref가 가리키는 문서가 바뀔 때마다 호칭을 받고 상대방의 Answer를 기다린다.그런 다음 PeerConnection setRemoteDescription(Answer)에서 합니다.

7. 방에 간다

엄청 날아다니는 Join Roomby Id() 안에 앤서니 옆에 있는 거.

// Code for creating SDP answer below

// Code for creating SDP answer above

에 코드를 추가합니다.복사된 공간 ID 문서를 참조하여 Offer를 가져와 Answer를 작성하고 같은 위치에 씁니다.

8. ICE 후보 수집

이쯤에서 ICE candidates 관계에 대한 설명은 미뤄졌지만 드디어 등장했다.
코드는 함수 형식이기 때문에public/app입니다.js 아래에 추가

// Code for collecting ICE candidates below

// Code for collecting ICE candidates above

부분은 호출만 씁니다.두 군데가 있지만, Offer 측과 Answer 측에서 local Name과remoteName를 바꾸는 일로 서로 ICE Canidate를 Peer Connection에 설정할 수 있습니다.
solution 분기를 본떠 offer 측이 쓴 ICE Canidate는'caller Candies'로, Answer 측은'calle Canidates'입니다.

collectIceCandidates(roomRef, peerConnection, 'callerCandidates', 'calleeCandidates')

collectIceCandidates(roomRef, peerConnection, 'calleeCandidates', 'callerCandidates')

Firestore는 구조적으로 문서 아래에서 소장을 더욱 제작할 수 있는데 이를 하위 소장이라고 부른다.

Offer 쪽에서 Offer와 caller Canidates 내 ICE Canidate는 Answer 쪽으로, Answer 쪽에서 Answer와 calle Canidates 내 ICE Canidate는 Offer 측에 전달하면 된다.
달리

// Listen for remote ICE candidates below

// Listening for remote ICE candidates above

의 부분은collectIceCandies에 포함되어 있기 때문에 여분입니다.
이렇게 조작할지 아니면 두 브라우저를 열어 통신할지 시험해 보자.(카메라 2개가 필요합니다. SnapCamera 등 가상 카메라 포함)
한 브라우저에서 OPEN CAMERA & MICROPHONE을 열고 CREATE ROOOM을 누르십시오.ROOM의 임의 ID를 복제합니다.
다른 브라우저에서 같은 OPEN CAMERA & MICROPHONE을 열고 JOIM ROOM을 누르십시오.ID를 붙여넣은 후 JOIN
수고하셨습니다.안 움직여.

완성

이동을 위해 퍼커넥션을 퍼커넥션의 typo로 변경합니다.
그리고 하나 더 있어요.

    localStream.getTracks().forEach((track) => {
      peerConnection.addTrack(track, localStream)
    })

오프퍼를 만들기 전에 가져와.
잘 돌아가고 있습니다.
perConnection이 트랙을 수신하면 RemoteStream에 추가되어 영상 라벨에 영상을 표시합니다.
Firebase hosting에서 디자인한 후 인터넷을 통해 다른 브라우저와 영상통화를 할 수 있다.

firebase deploy --only hosting

아랑곳없이 움직이기 시작하고, 다른

Firestore의 안전 규칙

onSnapshot의 unsubscribe()

state 설정 SDP 또는 ICE Candite

보기 여부

candidate가 비어 있을 때 addIceCandite

가 아님

getUserMedia 매개 변수 조정
완성형에 가까워지면 할 일이 산더미 같다.

여기서부터 방 ID는 인력 복사 부착이 아니라 자동 송수신이거나 방 연결 수량에만 연결된다여러 사람이 방에 들어갈 수 있도록 만들 수 있다.
개발 프레임워크는 Firestore와 일치하는 Vue와 React 등을 추천합니다.

선전하다.

고고하우스라는 웹RTC 개인이 개발한 음성 채팅 서비스를 활용한다.
https://gogo.house/
트위터 협업을 통해 팔로워와 가볍게 음성 대화를 할 수 있으니 놀아보세요!
이상 읽어 주셔서 감사합니다.