189. (TWOK/WORK) [업무 이슈] AWS WebRTC 뷰어에서 Connect 접속 시도 시 이메일 형식 ClientId 전송으로 연결 이슈 문의 - 문자 치환 사용

---

[제 목]

​

타이틀 : 투케이 / 2k / 업무 정리

​

제목 : [업무 이슈] AWS WebRTC 뷰어에서 Connect 접속 시도 시 이메일 형식 ClientId 전송으로 연결 이슈 문의 - 문자 치환 사용

 

---

[내 용]

​

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

- 제 목 : [업무 이슈] AWS WebRTC 뷰어에서 Connect 접속 시도 시 이메일 형식 ClientId 전송으로 연결 이슈 문의 - 문자 치환 사용


- 테스트 환경 : Web / Chrome / JavaScript / Aws / Kvs


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


- 사전) ClientId 클라이언트 아이디 설명 : 

  >> ClientId 는 WebRTC 연결에서 뷰어 (Viewer) 가 Signaling Channel 을 통해 마스터 (Master) 또는 다른 뷰어와 연결할 때 사용하는 고유 식별자입니다

  >> ClientId 는 WebRTC 연결에서 세션 식별을 위해 주요하게 사용됩니다

  >> AWS Kvs WebRTC ClientId 규격 및 제한 정리 : 

    - 문자 허용 범위 : 

      $ 영문자 (a-z, A-Z) : 대소문자 구분 있음

      $ 숫자 (0-9)

      $ 일부 특수문자 ( - (하이픈) , _ (언더바) , . (닷지 == 점) ) 허용 (URL-safe 문자는 대부분 허용)

      $ 공백, 슬래시(/), 백슬래시(\), 콜론(:), 세미콜론(;), 따옴표, @ (엣) , # (샵) 등은 허용되지 않음 (AWS SDK 내부에서 URL-safe encoding을 요구하기 때문)

    - 길이 제한 : 최대 256자 (AWS 공식 문서 기준) : 너무 긴 값은 Signaling API에서 오류 발생 가능

    - 중복 불가 : 동일 채널에서 중복된 clientId 사용 시 기존 연결이 끊김 (각 뷰어는 반드시 고유한 clientId를 사용해야 함)

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





------------------------------------------------------------------------------
[이슈 사항]
------------------------------------------------------------------------------

1. AWS Kvs WebRTC 에서 뷰어 ( Viewer ) 가 마스터로 접속 시도 시 이메일 형식 등 유효하지 않은 ClientId 지정으로 인해 WebRTC 연결 및 재생 과정에서 에러가 발생하는 이슈


2. AWS Kvs WebRTC 접속 시 사용자 이메일 주소를 사용해 clientId 지정 및 접속 시도 수행

  >> twok2k@test.com

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





------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 사용자 이메일 정보 입력 받기 수행 (ex : twok2k@test.com)


2. 입력 받은 정보를 사용해 WebRTC 뷰어 재생 웹 화면 진입 및 ClientId 설정 수행


3. WebRTC 재생에 필요한 SignalingClient 초기화 및 SDP 메시지 교환, AWS 영상 재생 요청 수행

    signalingClient = new KVSWebRTC.SignalingClient({
        channelARN,
        channelEndpoint: endpointsByProtocol.WSS,
        clientId,
        role: KVSWebRTC.Role.VIEWER,
        region,
        credentials: {
            accessKeyId : accessKeyId,
            secretAccessKey : secretAccessKey,
        },
        systemClockOffset: kinesisVideoClient.config.systemClockOffset,
    });


4. 올바르지 않은 clientId 사용으로 400 에러가 발생하는 것 확인 (이메일 형식 @ 문자 사용)

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





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

1. WebRTC 뷰어 재생 시 입력 받은 이메일 형식에서 @ 문자는 > 접속 가능한 유효한 문자열 치환 후 접속 시도 수행

  >> twok2k@test.com > twok2k_._test.com

  >> 언더바 (_) 하나만 사용 시 문자열 치환 후 다시 원복 시도 시 이메일에 언더바가 포함 되어 있으면 같이 변경 될 수 있으므로, 단순 언더바 사용말고 특수 규칙 적용 (_._)

    - ex : 원본) twok_2k@test.com
           @ 치환) twok_2k_._test.com
           특수 규칙 다시 @ 적용 원복) twok_2k@test.com 


2. 유효한 문자열로 WebRTC 뷰어가 정상적으로 재생 되는지 확인 완료

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





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

[Aws Kinesis Video Streams] WebRTC remote sender clientId 클라이언트 아이디 설명, 규격 및 제한 정리

https://kkh0977.tistory.com/8415

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


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

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


[Aws Kinesis Video Streams] WebRTC SDP 협상 과정 프로세스 정리 정리

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


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

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


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

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


[업무 이슈] 안드로이드 웹뷰에서 AWS WebRTC 웹 뷰어 영상 재생 중 앱 화면 종료 시 마스터에서 뷰어 close 상태가 늦게 감지 되는 이슈

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


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

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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8415

139. (Aws/Amazon) [Aws Kinesis Video Streams] WebRTC remote sender clientId 클라이언트 아이디 설명, 규격 및 제한

---