507. (javaScript) [기능 보완] 자바스크립트 nextToken 사용해 AWS WebRTC 신호 채널 리스트 목록 확인 - listSignalingChannels

---

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

---

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / AWS / WebRTC / listSignalingChannels


- 사전) 👉 WebRTC 간략 설명 : 

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

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

  >> WebRTC 주요 용어 : 

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

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

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

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

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

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





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

try {

  var accessKeyId = accessKeyEl.value;
  var secretAccessKey = secretKeyEl.value;
  var region = regionEl.value;


  if (accessKeyId != null && accessKeyId != '' && secretAccessKey != null && secretAccessKey != '' && region != null && region != '') {

    var confirm = window.confirm('\n' + region + ' 리전 WebRTC 신호 채널 리스트를 조회하시겠습니까?\n\nAws Credential AccessKey : ' + accessKeyId + '\n\nAws Credential secretAccessKey : ' + secretAccessKey + "\n");
    if(confirm == true){
      console.log("confirm : 확인 클릭");

      // [내부 클로저 선언 실시]
      var innerFunction = null;

      // [조회 된 정보를 담을 배열 선언]
      const selectAllList = [];

      // [반복 조회를 위한 nextToken 변수 선언]
      var nextToken = null;

      startLoading();

      // -----------------------------------------
      // [AWS.config 지정]
      // -----------------------------------------
      // IAM 계정 정보를 사용해 AWS.config 정보 업데이트 수행
      // -----------------------------------------            
      AWS.config.update({
        region: region,
        accessKeyId: accessKeyId,
        secretAccessKey: secretAccessKey
      });



      // -----------------------------------------
      // [AWS 객체 생성]
      // -----------------------------------------
      const aws = new AWS.KinesisVideo();


      // -----------------------------------------
      // [내부 클로저 함수 정의]
      // -----------------------------------------
      innerFunction = async function() {

        try {
          
          while (true) { // 반복 조회 수행

            // -----------------------------------------
            // [요청 파라미터 생성]
            // -----------------------------------------
            /*
            {
              "ChannelNameCondition": { 
                  "ComparisonOperator": "string",
                  "ComparisonValue": "string"
              },
              "MaxResults": number,
              "NextToken": "string"
            }
            */
            // -----------------------------------------
            var param = null;

            if (nextToken !== null && nextToken  !== undefined && nextToken  !== ''){
              param = {
                MaxResults: 500, // 반환할 결과의 최대 개수입니다 
                NextToken : nextToken
              };
            }
            else {
              param = {
                MaxResults: 500, // 반환할 결과의 최대 개수입니다 
              };
            }


            // -----------------------------------------
            // [ListSignalingChannels] : Aws WebRTC 신호 채널 리스트 목록 조회
            // -----------------------------------------

            // AWS 참고 사이트 : https://docs.aws.amazon.com/ko_kr/kinesisvideostreams/latest/dg/API_ListSignalingChannels.html
            // -----------------------------------------             
            var resMessage = "";

            const [err, res] = await aws.listSignalingChannels( param ).promise()               
              .then(data => [null, data])
              .catch(error => [error, null]);

            if (err) {
              console.error("[listSignalingChannels] : [Error] : ", err);

              // [반복 조회 종료 위한 토큰 값 초기화]
              nextToken = null;

            } else {
              console.log("[listSignalingChannels] : [Result] : ", JSON.stringify(res));

              // ---------------------------------------------
              // [로그 출력 예시 첨부]
              // ---------------------------------------------
              /*
              {
                "ChannelInfoList": [ 
                    { 
                      "ChannelARN": "string",
                      "ChannelName": "string",
                      "ChannelStatus": "string",
                      "ChannelType": "string",
                      "CreationTime": number,
                      "SingleMasterConfiguration": { 
                          "MessageTtlSeconds": number
                      },
                      "Version": "string"
                    }
                ],
                "NextToken": "string"
              }
              */
              // ---------------------------------------------


              // ---------------------------------------------
              // [배열에 전체 리스트 정보 추가]
              // ---------------------------------------------
              const resList = res.ChannelInfoList;

              if (resList != null && resList != undefined && Array.isArray(resList) && resList.length > 0){
                selectAllList.push(...resList); // ✅ Array Add List
              }


              // ---------------------------------------------
              // [반복 조회에 사용 될 nextToken 정보가 있는지 확인]
              // ---------------------------------------------
              const resNextToken = res.NextToken;
              if (resNextToken !== null && resNextToken !== undefined && resNextToken !== ''){
                nextToken = resNextToken; // ✅ Set
              }
              else {
                nextToken = null; // Clear
              }

            }


            // ---------------------------------------------
            // [반복 조회에 사용 될 nextToken 정보가 있는지 확인 후 무한 루프 탈출 수행]
            // ---------------------------------------------
            if (nextToken == null || nextToken == undefined || nextToken == ''){
              console.error("[innerFunction] : [nextToken] : Is Null >> Stop While True");
              break;
            }
            else {
              console.warn("[innerFunction] : [nextToken] : Exists >> Go To While True");
            }

          }


          console.log("");
          console.log("=========================================");
          console.log("[innerFunction] : Result");
          console.log("---------------------------------------");
          console.log("Total Length : ", selectAllList.length);
          console.log("---------------------------------------");
          console.log(JSON.stringify(selectAllList));
          console.log("=========================================");
          console.log("");


          // ---------------------------------------------
          // ✅ [에러가 발생한 이력이 있는지 체크 수행]
          // ---------------------------------------------
          if (resMessage == null || resMessage == undefined || resMessage == ''){ // 에러 발생 이력 없음
            console.log("[procedure] : [Result] : ", JSON.stringify(selectAllList));
          }
          else {
            console.error("[procedure] : [Error] : ", resMessage);
          }

        }
        catch(exception){
          console.error("[innerFunction] : [Exception] : ", exception);
        }

      };



      // -----------------------------------------
      // [내부 클로저 함수 호출]
      // -----------------------------------------
      innerFunction();

    }
    else {
      console.log("confirm : 취소 클릭");
    }
  
  }
  else {
    alert('❌ MQTT 테스트 클라이언트 접속 정보에 입력 된 AccessKey , SecretKey , Region 정보가 올바르지 않습니다. (Data is null)');
  }

}
catch (exception) {
  console.error("[signalingChannelListButton] : [Exception] : 예외 상황 발생 : ", exception);
}

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





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

[자바스크립트 AWS Kvs WebRtc 생성 된 신호 채널 ARN 리스트 목록 확인 - listSignalingChannels]

https://kkh0977.tistory.com/8063

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


[자바스크립트 AWS Kvs WebRtc 신호 채널 생성 수행 - createSignalingChannel]

https://kkh0977.tistory.com/8091

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


[자바스크립트 AWS Kvs WebRtc 신호 채널 삭제 수행 - deleteSignalingChannel]

https://kkh0977.tistory.com/8093

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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8063

396. (javaScript) 자바스크립트 AWS Kvs WebRtc 생성 된 신호 채널 ARN 리스트 목록 확인 - listSignalingChannels

---