투케이2K

170. (TWOK/UTIL) [Web/JavaScript] AWS KVS WebRTC 신호 채널 생성 수행 - createSignalingChannel 본문

투케이2K 유틸파일

170. (TWOK/UTIL) [Web/JavaScript] AWS KVS WebRTC 신호 채널 생성 수행 - createSignalingChannel

투케이2K 2025. 9. 14. 20:47
728x90

[설 명]

​

프로그램 : Web / JavaScript

​

설 명 : [Web/JavaScript] AWS KVS WebRTC 신호 채널 생성 수행 - createSignalingChannel

 

[소스 코드]

​

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

- 개발 환경 : Web


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


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

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





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

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">





    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1416.0.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script>

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

        // [전역 변수 선언]
        var region = 'ap-northeast-1'; // [AWS 리전]
        var accessKeyId = 'AK..7Q'; // [IAM 액세스 키]
        var secretAccessKey = 'Zz..xj'; // [IAM 시크릿 키]

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

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log("");
            

            /**
             * -----------------------------------------
             * [요약 개념 정리]
             * -----------------------------------------
             * 신호 전송 채널 이란 :
             * 
             * 신호 채널은 신호 메시지 (메타 데이터) 를 교환하여 애플리케이션이 피어투피어 연결을 검색, 제어 및 종료하도록 하는 리소스입니다
             * 메타데이터에는 미디어 코덱, 코덱 파라미터 및 라이브 스트리밍을 위해 두 개의 애플리케이션이 서로 연결하기 위해 사용할 수 있는 네트워크 후보 경로와 같은 로컬 미디어 정보를 포함합니다
             * -----------------------------------------
             * CreateSignalingChannel Request Params : 
             * 
             * ChannelName : 생성하고 있는 신호 채널의 이름입니다. (AWS 계정 및 리전 각각 고유한 값 필요)
             * ChannelType : 생성하고 있는 신호 채널의 유형입니다. (현재는 SINGLE_MASTER 채널 유형만 지원됩니다.)
             * Tags : 채널과 연결할 태그 세트(키-값 페어)입니다.
             * -----------------------------------------
             * 참고 사이트 : 
             * 
             * https://docs.aws.amazon.com/ko_kr/kinesisvideostreams/latest/dg/API_CreateSignalingChannel.html#API_CreateSignalingChannel_RequestSyntax
             * -----------------------------------------
            */


            // -----------------------------------------
            // [AWS.config 지정]
            // -----------------------------------------
            AWS.config.update({
              region: region,
              accessKeyId: accessKeyId,
              secretAccessKey: secretAccessKey
            });


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


            // -----------------------------------------
            // [신호 채널 생성에 필요한 params 정의]
            // -----------------------------------------
            const params = {              
              ChannelName: 'DEVICE_1',
              ChannelType: 'SINGLE_MASTER', // 'FULL_MESH' 는 현재 지원 안하며, SINGLE_MASTER 만 가능
              Tags: [ // 태그는 AWS 리소스에 할당하는 레이블입니다 (태그를 사용하여 리소스를 검색 및 필터링하거나 AWS 비용을 추적할 수 있습니다.)
                { Key: 'StreamName', Value: 'DEVICE_1' },
                { Key: 'Environment', Value: 'Development' }
              ]
            }; 


            // -----------------------------------------
            // [AWS Kvs WebRTC 신호 채널 생성 수행 실시]
            // -----------------------------------------
            kvs.createSignalingChannel(params, (err, data) => {
              if (err) {
                console.error("");
                console.error("=========================================");
                console.error("[createSignalingChannel] : [Error]");
                console.error("---------------------------------------");
                console.error(err);					
                console.error("=========================================");
                console.error("");

              } else {
                console.log("");
                console.log("=========================================");
                console.log("[createSignalingChannel] : [Success]");
                console.log("=========================================");
                console.log("");
              }

            });

        };

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

    </script>


</head>


<body>

</body>

</html>

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





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

[자바스크립트 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

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'투케이2K 유틸파일' 카테고리의 다른 글

172. (TWOK/UTIL) [Web/JavaScript] AWS KVS HLS 뷰어 ( Viewer ) 비디오 재생 유틸 파일  (0) 2025.10.14
171. (TWOK/UTIL) [Web/JavaScript] AWS KVS HLS 비디오 스트림 채널 생성 수행 - createStream  (0) 2025.09.14
169. (TWOK/UTIL) [Web/JavaScript] jose 라이브러리 사용해 JWE 헤더 토큰 인증 암복호화 모듈 클래스  (0) 2025.09.14
168. (TWOK/UTIL) [Web/JavaScript] AWS STS 임시 자격 증명 사용해 S3 파일 다운로드 Get Pre-SignedUrl 확인 수행  (0) 2025.09.14
167. (TWOK/UTIL) [Web/JavaScript] AWS Kvs WebRtc 뷰어 Viewer 실시간 비디오 및 오디오 영상 통화 수행  (0) 2025.09.14
'투케이2K 유틸파일' Related Articles more
Comments