[노마드코더] 줌 클론 코딩 - 9.

기존에는 전환 후 카메라가 다른 브라우저에 나타나며 모바일 접속 시 오류가 발생했습니다.

쉬운 목차

발신자 – 카메라 전환 적용

카메라가 전환되면 getMedia 기능을 통해 새 스트림이 생성됩니다.

스트림의 변경 사항을 적용하려면 다른 브라우저 피어에 전파해야 합니다.

– 카메라가 바뀌어도 상대방에게 전송된 흔적은 변하지 않습니다.

먼저 차선을 변경하려면 다음 유형의 발신자 찾기: 비디오 변경할 발신자를 찾고 있습니다.

이 발신자는 replaceTrack()을 통해 해당 스트림이 피어에서 재생되도록 스트림이 수정된 비디오 트랙을 매개변수로 지정합니다.

– 카메라가 상대편을 위해 잘 바뀌었습니다!

RTCRtpSender – 웹 API | MDN

RTCRtpSender 인터페이스는 주어진 MediaStreamTrack이 인코딩되어 원격 피어로 전송되는 방법에 대한 세부 정보를 제어하고 얻을 수 있는 기능을 제공합니다.

developer.mozilla.org

모바일 액세스(STUN 서버)

$ npm i -g localtunnel

– 먼저 global 섹션에 localtunnel을 설치합니다.

localtunnel은 외부에서 접속할 수 있도록 현재 로컬 포트에 대한 URL을 제공합니다.

$ lt --port 3000

– 현재 개발 중인 포트 3000에 대해 외부에서 액세스할 수 있는 URL을 만듭니다.

지금까지 셀룰러는 일반적으로 동일한 로컬 네트워크에서 가능합니다.

하지만 외부접속으로는 아직 로컬에서 오픈한 서버에서 해당 공인 IP를 찾을 수 없었습니다.

비디오 표시 문제.

이 문제는 외부에서 장치에 있는 서버의 공인 IP를 찾는 데 도움이 되는 STRUN 서버를 사용하여 해결됩니다.

– Google의 무료 STUN 서버를 사용하여 문제를 해결할 수 있습니다.

데이터 채널

WebRTC 데이터 채널 사용 – 웹 API | MDN

RTCPeerConnection 인터페이스를 통해 WebRTC 피어 연결을 연결하면 이제 두 피어 간의 연결을 통해 미디어 데이터를 보내고 받을 수 있습니다.

뿐만 아니라 WebRTC로 할 수 있는 일이 더 많습니다.

developer.mozilla.org

데이터 채널은 WebRTC 방식에서 음성과 영상 이외의 요소를 제공할 때 유용한 기능이다.

– 먼저 데이터 채널을 저장할 변수를 생성합니다.

– 먼저 공간에 접근하는 브라우저 피어 A는 myPeerConnection의 createDataChannel을 통해 데이터 채널을 생성한다.

그리고 새로운 메시지(메시지 이벤트)가 도착하면 이벤트 리스너가 연결되어 콘솔창에 표시된다.

– 데이터 채널 이벤트 리스너는 Peer B의 브라우저에 등록하여 나중에 접근하도록 하여 새로운 데이터 채널 이벤트가 도착하면 수신한 이벤트 채널을 설정하고 메시지가 도착하면 콘솔 창에 표시되도록 하였다.

– 이후에는 어떤 브라우저에서든 myDataChannel.send()를 통해 메시지를 보낼 수 있으며 메시지가 어느 브라우저에서나 정상적으로 도착한 것을 확인할 수 있습니다.

이와 같이 데이터 채널 기능이 있는 webRTC 통신을 통해 피어 투 피어 채팅과 같은 다양한 요소를 쉽게 전송할 수 있습니다.

앞으로는 데이터 채널 기능을 이용하여 WebRTC 채팅 UI 구현, CSS 개선, 3인 이상 그룹 통화, 방을 나가서 보다 정교한 클론 코딩을 할 수 있습니다.

WebRTC 정리

이런 식으로 우리가 완성한 WebRTC 줌 클론 코딩은 풀 메시로 작동합니다.

이 방법에는 장점이 있습니다.

B. P2P 서버는 비용이 들지 않으나 피어 수가 증가하면 연결된 모든 피어에게 미디어 데이터를 전송해야 하므로 많은 클라이언트 리소스와 네트워크 지연이 필요합니다.

SFU의 경우 업로드 1회, 다운로드 N회가 풀메시보다 네트워크 리소스를 덜 소모합니다.

따라서 메쉬 방식에 비해 실시간 동기화가 빠르고 쾌적한 단체 영상 통화 품질을 제공할 수 있습니다.

따라서 현재 많은 업체에서 제공하고 있는 단체영상통화 서비스는 주로 SFU 방식으로 구현되고 있다.

소스 코드

GitHub – pkd98/clone 코딩

GitHub에서 계정을 생성하여 pkd98/clonecoding 개발에 기여하십시오.

github.com

이런 식으로 전체 줌 클론 코딩 프로세스가 끝났습니다.

이 과정을 통해 다음과 같은 웹을 통한 모든 실시간 커뮤니케이션을 간략하게 공부할 수 있었습니다.

B. 처음에 웹 소켓, socket.io를 통한 채팅 구현 및 WebRTC 구현. 앞으로 실시간 소통 프로젝트를 할 때 큰 도움이 될 것 같아요!

처음 따라해본 클론코딩인데, 이론을 배우는 것보다 이론 부분을 직접 해보면서 공부하고 있어서 더 기억에 남고 효과적인 학습법인 것 같습니다.