142. (TWOK/LOGIC) [Aws] 자바스크립트 Aws Kvs WebRTC Viewer 소비자 실시간 양방향 음성 통화 교환 로직 - getUserMedia audio

---

[로직 정리]

​

정리 로직 : Web / Aws

​

상태 : [Aws] 자바스크립트 Aws Kvs WebRTC Viewer 소비자 실시간 양방향 음성 통화 교환 로직 - getUserMedia audio

 

---

[설 명]

​

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

1. Aws Kinesis Video Streams (Kvs) 인프라 구축 필요


2. Aws WebRTC 실시간 스트리밍 교환을 위한 신호 채널 생성 및 ARN 주소 확인 필요


3. 내용 정리 및 로직에 표시 된 용어 정리 : 

  >> WebRTC : 웹 브라우저 기반으로 오디오나 영상 미디어 스트림을 교환할 수 있는 기술
  
  >> RTCPeerConnection : 로컬 기기와 원격 피어 간의 연결을 수행하는 객체

  >> ICE : NAT/P2P 환경에서도 연결 가능한 경로 (IP, 포트 등) 를 찾기 위한 기술로 Peer 와 통신에 사용할 수 있는 방법

  >> ICE candidate : 연결 가능한 (IP + Port 조합) 경로로 Peer 가 통신에 사용할 수 있는 방법

  >> Master (생산자) : 디바이스 역할로 실시간 카메라 영상을 업로드 수행

  >> Viewer (소비자) : 클라이언트 (Web, App) 역할로 P2P 연결 되어 실시간 스트리밍 동영상 및 음성 데이터 확인

  >> Track : 오디오 트랙, 미디어 트랙, 자막 트랙 등과 같이 단일 데이터 컴포넌트를 의미

  >> Streams : 각 트랙들의 집합을 의미합니다

  >> TUN (Traversal Using Relay around NAT) : 주변의 릴레이를 사용한 순회를 의미하며, 서버를 통해 모든 정보를 중계하여 대칭 NAT 제한을 우회하는데 사용되는 방식

  >> STUN (Session Traversal Utilities for NAT) : 두 장치가 서로의 공용 IP 주소를 검색하고 직접 연결을 시작할 수 있는 방식


4. 참고 : Master 와 Viewer 는 전체 로직은 동일하게 작성할 수 있지만, SignalingClient 이벤트 부분에서 sendSdpOffer ,  sendSdpAnswer 를 하냐 차이점은 있음

  >> Viwer : sendSdpOffer 전송

  >> Master : sendSdpAnswer 전송

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. [Viewer] KinesisVideo 비디오 재생 및 정보 관련 객체 초기화 수행


2. [Viewer] KinesisVideoSignalingChannels iceServers 신호 채널 정보 확인 객체 초기화 수행


3. [Viewer] iceServers 서버 연결 정보 확인


4. [Viewer] TUN , STUN 서버 연결 정보 추출 및 RTCPeerConnection 객체 config 설정 및 초기화 수행

  >> config 값 설정 시 TUN , STUN 모두 사용 가능하게 all 설정 필요


5. [Viewer] SignalingClient 생성 및 이벤트 수신 대기 수행

  >> 이벤트 생성 및 수신 대기 종류 : open , sdpAnswer , iceCandidate , close , error

  >> open : SignalingClient open 이벤트 수신

  >> sdpAnswer : 마스터가 뷰어의 sendSdpOffer 이벤트 요청에 대한 응답을 반환하는 이벤트 (master 가 viwer 에 응답 전달)

  >> iceCandidate : ICE 후보 이벤트 수신 부분

  >> close : SignalingClient close 이벤트 수신

  >> error : SignalingClient error 이벤트 수신


6. [Viewer] peerConnection.addEventListener [track] 이벤트 리스너를 등록해 실시간 스트림 데이터 수신 대기 및 스트림 데이터 출력 로직 작성

  >> master 에서도 마이크 음성 데이터를 마스터에 전송할 수 있으므로, 전송 된 데이터가 있으면 출력 수행 하기 위함

  >> track 이벤트로 감지 된 스트림이 있는 경우 > viewer 는 지정 된 비디오 및 오디오 객체에 스트림 지정 및 출력 수행 (remoteView.srcObject = event.streams[0];)


7. [Viewer] SignalingClient open 이벤트 발생 시 getUserMedia audio 사용 권한 요청 및 마이크로 수신 된 track 을 streams 에 추가 , sendSdpOffer 전송 수행

  >> 해당 로직을 추가해야 master 에서 track 이벤트 감지 후 viewer 가 전송하는 음성 출력 가능

  >> viewer 는 실시간으로 마이크에 입력 된 음성을 master 에게 전송 수행

  >> sendSdpOffer 전송 후 마스터에게서 sdpAnswer 응답을 받아야 정상적으로 P2P 연결이 완료 됨


8. [Master] 뷰어에게 sendSdpAnswer 응답 반환 수행

  >> Master 는 응답 반환 시 뷰어의 clientId 를 지정해서 반환이 필요


9. [Viewer] SignalingClient sdpAnswer 이벤트 발생 시 peerConnection.setRemoteDescription(answer) 응답 추가 수행

  >> sdpAnswer 로 넘겨 받은 상대방 응답을 내 Remote 에 추가

  >> P2P 연결 완료 상태 확인


10. [Viewer] 실시간 마이크 음성 전송 및 수신 대기 로직 작성 완료


11. [Viewer] 마이크를 통해서 음성 데이터 실시간 전송 및 peerConnection.addEventListener [track] 에서 상대방이 전달 한 음성 출력 수행

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

[자바스크립트 AWS Kvs WebRTC 디바이스 역할 (master) sdp answer 응답 및 실시간 비디오 스트림 전송 수행]

https://blog.naver.com/kkh0977/223863377974


[자바스크립트 AWS WebRTC 실시간 동영상 재생 수행]

https://blog.naver.com/kkh0977/223170500993?trackingCode=blog_bloghome_searchlist


[Aws KVS 비디오 스트림 , 신호 전송 채널 차이점 설명 정리]

https://blog.naver.com/kkh0977/223854439046


[Aws Kvs WebRTC 실시간 영상 재생 관련 구성 요소 및 용어 정리]

https://blog.naver.com/kkh0977/223858189791


[업무 이슈] 자바스크립트 AWS KVS signalingClient sendSdpAnswer 오퍼 응답 이슈 - remoteClientId 누락

https://blog.naver.com/kkh0977/223864517421

// --------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://blog.naver.com/kkh0977/223854439046

55. (Aws/Amazon) [Aws Kinesis Video Streams] Aws KVS 비디오 스트림 , 신호 전송 채널 차이점 설명 정리

---