184. (TWOK/LOGIC) [Aws] 디바이스 기기 마스터 입장에서 peerConnection 이벤트 감지를 통해 WebRTC 에 연결 된 실제 뷰어 연결 및 해제 관리 로직

---

[로직 정리]

​

정리 로직 : AWS / KVS / WebRTC

​

제 목 : [Aws] 디바이스 기기 마스터 입장에서 peerConnection 이벤트 감지를 통해 WebRTC 에 연결 된 실제 뷰어 연결 및 해제 관리 로직

​

 

---

[설 명]

​

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

1. 제 목 : [Aws] 디바이스 기기 마스터 입장에서 peerConnection 이벤트 감지를 통해 WebRTC 에 연결 된 실제 뷰어 연결 및 해제 관리 로직


2. 테스트 환경 : Aws / Kvs / WebRTC


3. 사전) 👉 AWS KVS WebRTC 설명 : 

  >> WebRTC 란 웹, 애플리케이션, 디바이스 간 중간자 없이 오디오나 영상 미디어를 포착하고 실시간 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다

  >> WebRTC 는 간단한 API 를 통해 웹 브라우저, 모바일 애플리케이션 및 커넥티드 디바이스 간에 실시간 통신을 활성화할 수 있습니다

  >> WebRTC 주요 용어 : 

    - SDP (Session Description Protocol) : 오디오/비디오 코덱, 해상도, 포트 등 스트리밍 정보를 담은 텍스트 포맷
    - Offer / Answer	: 통신 연결을 협상하기 위한 SDP 메시지 (초기 연결 설정)
    - ICE (Interactive Connectivity Establishment) : NAT/P2P 환경에서도 연결 가능한 경로(IP, 포트 등)를 찾기 위한 기술
    - Candidate : 가능한 연결 경로 (IP + Port 조합)

  >> WebRTC [ICE] 연결 형태 : 

    - Relayed Address : TURN 서버가 패킷 릴레이를 위해 할당하는 주소
    - Server Reflexive Address : NAT 가 매핑한 클라이언트의 공인망 (Public IP, Port)
    - Local Address : 클라이언트의 사설주소 (Private IP, Port)

  >> WebRTC STUN 및 TURN 서버 설명 : 

    - (같은 와이파이 망) STUN 서버는 HOST 를 거쳐 >> Server Reflexive Address 만을 응답하지만,
      (릴레이서버 사용) TURN 서버는 Relayed Address와 Server Reflexive Address 를 모두 응답한다
    - STUN, TURN 서버를 이용해 SDP Answer IP주소 를 취득 >> RTCPeerConnection Remote 연결 수행

  >> WebRTC SDP 오퍼 생성 (뷰어) 및 응답 (마스터) 스트리밍 플로우 : 

    [Viewer → Signaling Server] -- SDP Offer --> [Master] : 뷰어는 마스터로 스트리밍 오퍼 신호 보낸다
    [Master] -- SDP Answer --> [Viewer] : 마스터는 특정 뷰어의 오퍼 신호 확인 후 응답을 보낸다

    [Viewer] -- ICE Candidate --> [Master] : 스트리밍을 할 수 있는 경로 확인
    [Master] -- ICE Candidate --> [Viewer] : 스트리밍을 할 수 있는 경로 확인

    P2P 연결 성립 → 스트리밍 시작


4. 사전) 👉 자바스크립트 AWS Kvs WebRTC 사용 라이브러리 의존성 부여 코드 첨부 :

  <script src="https://code.jquery.com/jquery-latest.min.js"></script>-->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

  <script src="https://unpkg.com/amazon-kinesis-video-streams-webrtc/dist/kvs-webrtc.min.js"></script>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1416.0.min.js"></script>

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






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

1. ✅ (중요) WebRTC peerConnection.connectionState 상태 간략 정리 : 

  >> peerConnection.connectionState 란 WebRTC 연결 전체 상태 (통합 상태 머신) 감지 콜백 리스너 입니다.

  >> peerConnection.connectionState 는 마스터 입장에서 뷰어의 연결 완료 여부 판단용으로 가장 적합하게 사용할 수 있습니다.

  >> peerConnection.connectionState 주요 상태 : 

    - new 상태 : PeerConnection이 생성됨 / Viewer 가 아직 접속 안 함 상태
    - connecting 상태 : 연결을 구성 중 상태 (ICE candidate 교환, ICE 후보 체크, DTLS Handshake, SRTP 세션 준비)
    - connected 상태 : Viewer 가 연결이 완료되었으며, Video/Audio 전송 시작 및 Viewer가 실제로 화면을 보기 시작
    - disconnected 상태 : 일시적으로 네트워크가 끊김 상태 (재연결 가능성 있음) / disconnected 가 발생 후 연결 된 뷰어가 종료 될 수도 있지만, 잠시 기다리면 다시 connected 로 돌아올 수 있는 상태
    - failed 상태 : 복구 불가한 연결 실패 상태 / Viewer 세션 실패 상태로 PeerConnection 재생성 필요
    - closed 상태 : PeerConnection 이 명시적으로 닫힘 상태 ( ex : pc.close(); ) / Viewer 종료 처리 완료 상태


2. 디바이스 기기는 WebRTC 객체 생성 완료 및 Viewer 의 접속 대기 상태 중 ..


3. 디바이스 기기는 signalingClient.on('sdpOffer') 이벤트 처리 부분에서 실제 WebRTC 에 연결 된 뷰어 관리 로직 수행

  // ✅ Viewer 연결 객체 관리를 위한 전역 변수 선언
  const peerConnections = new Map();


  // ✅ [Viewer 의 SDP Offer 수신 대기]
  signalingClient.on('sdpOffer', async (offer, remoteClientId) => {

    // [RTCPeerConnection 만들기]
    const peerConnection = new RTCPeerConnection(config); 

    // [미디어 스트림 추가]
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream)); // [카메라 스트림 트랙에 추가]

    // [peerConnection remoteClientId 지정]
    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            signalingClient.sendIceCandidate(event.candidate, remoteClientId);
        }
    };
              
    // [상대방 오퍼를 내 Remote 에 추가]
    await peerConnection.setRemoteDescription(offer);

    // [Answer 옵션 지정 및 생성]
    const answer = await peerConnection.createAnswer();

    // [Answer 를 내 local 로 저장]
    await peerConnection.setLocalDescription(answer);

    // [SDP Answer 응답 전송]              
    signalingClient.sendSdpAnswer(peerConnection.localDescription, remoteClientId); // [접속 시도한 기기 아이디를 지정해 줘야함]
    

    console.log("=========================================");
    console.log("[setSystem] : [로컬 <-> 원격 연결 신호 확인] : [signalingClient] : [sdpOffer] : [Start]");
    console.log("-----------------------------------------");
    console.log("[VIEWER] Received SDP Offer from Viewer : ", remoteClientId);
    console.log("-----------------------------------------");

    console.log("[설 명] : 뷰어 SDP Offer 확인 및 Answer 응답 전송 수행");
    console.log("=========================================");    


    // --------------------------------------------
    // ✅ [RTCPeerConnection 해제 상태 감지를 위한 이벤트 리스너 등록]
    // --------------------------------------------
    // [클로저로 remoteClientId 캡처] : 다중 뷰어 상태 동시 감지
    // --------------------------------------------
    (function(id) {

        peerConnection.onconnectionstatechange = () => {
            console.log("=========================================");
            console.log(`[peerConnection Connection state] : ${peerConnection.connectionState}`);
            console.log("--------------------------------------");
            console.log(`뷰어 Client ID : ${id}`);
            console.log("=========================================");

            if (peerConnection.connectionState === 'connected') { // 연결 완료 된 상태                
                console.log('[peerConnection Connection Viewer] : [connected]');

                peerConnections.set(id, peerConnection); // ✅ 뷰어 추가 수행
            }


            if (peerConnection == null
                || peerConnection.connectionState === 'disconnected'
                || peerConnection.connectionState === 'failed'
                || peerConnection.connectionState === 'closed') { // 피어 연결 해제 상태 감지

                console.log('[peerConnection Connection Viewer] : [disconnected]');

                // [여기서 리소스 정리 및 UI 업데이트]
                try {
                    peerConnections.delete(id); // ✅ 뷰어 삭제 수행
                }
                catch (error) {
                    console.error("[peerConnection.onconnectionstatechange] : [Exception] : ", error.message);
                }

            }

        };

    })(remoteClientId)

  });


4. ✅ 필요 시점에 특정 뷰어 연결 상태 확인 수행

  const pc = peerConnections.get('viewer-123'); // 특정 뷰어 아이디 지정 및 객체 확인

  const isConnected = pc && (pc.connectionState === 'connected' || pc.iceConnectionState === 'connected');

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






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

▶️ [Aws Kinesis Video Streams] WebRTC peerConnection.connectionState 뷰어 연결 상태 감지 설명

https://kkh0977.tistory.com/8782

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


▶️ [android] 안드로이드 AWS KVS WebRTC 실시간 비디오 재생 뷰어 로직 정리 - google-webrtc

https://kkh0977.tistory.com/8771

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


▶️ [Aws Kinesis Video Streams] IceServer ICE 서버 리스트 와 ICE_CANDIDATE ICE 캔디 데이트 설명 정리

https://kkh0977.tistory.com/8772

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


▶️ [Aws Kinesis Video Streams] WebRTC onSignalingChange PeerConnection 내부의 SDP 상태 설명

https://kkh0977.tistory.com/8781

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


▶️ [기능 개선] 자바스크립트 aws kvs webRtc 디바이스 마스터 영상 송출 시 뷰어 다중 접속 설정 - Multi PeerConnection

https://kkh0977.tistory.com/8057

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


▶️ [Web/JavaScript] AWS Kvs WebRtc 마스터 비디오 스트림 다중 뷰어 영상 송출

https://kkh0977.tistory.com/8058

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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8782

197. (Aws/Amazon) [Aws Kinesis Video Streams] WebRTC peerConnection.connectionState 뷰어 연결 상태 감지 설명

---