181. (TWOK/WORK) [개선 요청] 웹 자바스크립트에서 뷰어 (Viewer) WebRTC 실시간 영상 재생 시 출력 되고 있는 마스터 스트림 화질 값 해상도 표시 요청

---

[제 목]

​

[개선 요청] 웹 자바스크립트에서 뷰어 (Viewer) WebRTC 실시간 영상 재생 시 출력 되고 있는 마스터 스트림 화질 값 해상도 표시 요청

 

---

[내 용]

​

------------------------------------------------------------------------------
[개발 및 테스트 환경]
------------------------------------------------------------------------------

- 제 목 : [개선 요청] 웹 자바스크립트에서 뷰어 (Viewer) WebRTC 실시간 영상 재생 시 출력 되고 있는 마스터 스트림 화질 값 해상도 표시 요청


- 테스트 환경 : Mobile / Samsung / Android / Webview / JavaScript / AWS / WebRTC / Viewer


- 사전) 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 연결 성립 → 스트리밍 시작

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[개선 요청 사항]
------------------------------------------------------------------------------

1. PC 웹 및 모바일 웹뷰에서 AWS KVS 뷰어 WebRTC 실시간 스트리밍 재생 시 마스터가 송출하고 있는 스트림 해상도 값 실시간 확인 기능 개발 요청


2. 마스터 영상 화질 해상도 옵션 값 변경 요청 이후 모바일에서 확인 시 FHD 및 HD 차이를 선명하게 확인하기 힘든 이슈


3. 요청 개발 로직 : 

  >> 자바스크립트에서 WebRTC 실시간 영상 재생 수행 : 현재 해상도 값 표시

  >> 백오피스 및 설정 앱에서 실시간 마스터 영상 송출 화질 해상도 변경 요청 : AWS MQTT Shadow Publish

  >> 변경 된 마스터 스트리밍 해상도 값을 뷰어에서 실시간 표시 수행 요청

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 자바스크립트에서 뷰어 WebRTC 실시간 영상 재생 시 주기적으로 Video 태그 해상도 값 확인 및 View 에 표시 로직 추가


2. 자바스크립트 signalingClient - sdpAnswer 이벤트 리스너에서 성공적으로 마스터로부터 SDP Answer 응답을 수신 받은 경우 마스터 해상도 확인 로직 동작 수행

    // -----------------------------------------
    // [peerConnection.setRemoteDescription 에 응답 받은 answer 추가]
    // -----------------------------------------
    await peerConnection.setRemoteDescription(answer);


    // -----------------------------------------
    // [타이머를 반복 돌리며 실시간 해상도 변경 감지]
    // -----------------------------------------
    var lastWidth = 0;
    var lastWidth = 0;

    setInterval(() => {
        console.log('>>>>>>>>>>>>>>>>>> [check setInterval running] >>>>>>>>>>>>>>>>>>');

        const currentWidth = remoteView.videoWidth;
        const currentHeight = remoteView.videoHeight;

        // 해상도가 변경되었을 때만 로그 출력
        if (currentWidth !== lastWidth || currentHeight !== lastHeight) {
            console.log('[setInterval : resolution] : ', currentWidth + 'x' + currentHeight);
            lastWidth = currentWidth;
            lastHeight = currentHeight;
        }

    }, 2000); // 2초마다 확인

------------------------------------------------------------------------------





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

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

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


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

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


[Aws KVS WebRTC 채널 생성 및 삭제에 관한 요금 정책 정리]

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


[업무 이슈] AWS WebRTC 실시간 비디오 재생 시 Client 클라이언트 연결 접속 및 해제 상태 확인 이슈

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


[Aws] WebRTC Viewer 뷰어 기기에서 실시간 디바이스 기기 해상도 확인 로직

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

------------------------------------------------------------------------------

 

---

[참고 사이트]

​

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

150. (TWOK/LOGIC) [Aws] WebRTC Viewer 뷰어 기기에서 실시간 디바이스 기기 해상도 확인 로직

---