389. (javaScript) 자바스크립트 Aws KinesisVideo , KinesisVideoSignalingChannels , SignalingClient 초기화 방법

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

​

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

- 개발 환경 : Web

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

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





-----------------------------------------------------------------------------------------
[소스 코드] : Viewer : IAM : AccessKey , SecretKey 사용 초기화
-----------------------------------------------------------------------------------------

// -----------------------------------------
// [변수 선언]
// -----------------------------------------
var region = 'ap-northeast-2'; // [AWS 리전]
var clientId = 'TEST_CLIENT'; // [클라이언트 아이디]

var accessKeyId = 'AS..OZ'; // [실시간 영상 재생에 필요한 액세스 키]
var secretAccessKey = 'Uv..GS'; // [실시간 영상 재생에 필요한 시크릿 키]
var channelARN = 'arn:aws:kinesisvideo:ap-northeast-2:000000000000:channel/TEST_CLIENT/11111111111111'; // [실시간 스트리밍 채널 ARN 주소]


// -----------------------------------------
// [KVS 클라이언트 생성]
// -----------------------------------------
var kinesisVideoClient = new AWS.KinesisVideo({
	region,
	accessKeyId,
    secretAccessKey,
	correctClockSkew: true,
});


// -----------------------------------------
// [신호 채널 끝점 가져오기]
// -----------------------------------------
// 각 신호 채널에는 데이터 플레인 작업을 위해 연결할 HTTPS 및 WSS 엔드포인트가 할당됩니다
// -----------------------------------------
const getSignalingChannelEndpointResponse = await kinesisVideoClient
	.getSignalingChannelEndpoint({
		ChannelARN: channelARN,
		SingleMasterChannelEndpointConfiguration: {
			Protocols: ['WSS', 'HTTPS'],
			Role: KVSWebRTC.Role.VIEWER,
		},
	})
	.promise();
const endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpointList.reduce((endpoints, endpoint) => {
	endpoints[endpoint.Protocol] = endpoint.ResourceEndpoint;
	return endpoints;
}, {});


// -----------------------------------------
// [KVS 시그널링 클라이언트 만들기]
// -----------------------------------------
// 응답 의 HTTPS 끝점은 GetSignalingChannelEndpoint이 클라이언트와 함께 사용됩니다
// -----------------------------------------
// 이 클라이언트는 실제 신호가 아닌 ICE 서버를 가져오는 데만 사용됩니다
// -----------------------------------------
const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
	region: region,
	accessKeyId,
    secretAccessKey,
	endpoint: endpointsByProtocol.HTTPS,
	correctClockSkew: true,
});


// -----------------------------------------
// [ICE 서버 구성 가져오기]
// -----------------------------------------
// 최상의 성능을 위해 STUN 및 TURN ICE 서버 구성을 수집합니다
// -----------------------------------------
// [사용 서버 정의]
// -----------------------------------------
const iceServers = [];

// [TUN]
const getIceServerConfigResponse = await kinesisVideoSignalingChannelsClient
	.getIceServerConfig({
		ChannelARN: channelARN,
	})
	.promise();

const tunServerList = getIceServerConfigResponse.IceServerList;
tunServerList?.forEach((iceServer) => {
	iceServers.push({
		urls: iceServer.Uris,
		username: iceServer.Username,
		credential: iceServer.Password,
	});
});


// [STUN]
const stunIceServers = { urls: `stun:stun.kinesisvideo.${region}.amazonaws.com:443` };
iceServers.push(stunIceServers); // [추가]


// -----------------------------------------
// [RTCPeerConnection 만들기]
// -----------------------------------------
// RTCPeerConnection은 웹 에서 WebRTC 통신을 위한 기본 인터페이스입니다
// -----------------------------------------
const config = {
	iceServers: iceServers,
	iceTransportPolicy: "all", // all | relay
};

const peerConnection = new RTCPeerConnection(config);


// -----------------------------------------
// [WebRTC 시그널링 클라이언트 만들기]
// -----------------------------------------
// 이것은 신호 채널을 통해 메시지를 보내는 데 사용되는 실제 클라이언트입니다
// -----------------------------------------
const signalingClient = new KVSWebRTC.SignalingClient({
	channelARN,
	channelEndpoint: endpointsByProtocol.WSS,
	clientId,
	role: KVSWebRTC.Role.VIEWER,
	region,
	credentials: {
		accessKeyId : accessKeyId,
		secretAccessKey : secretAccessKey,
	},
	systemClockOffset: kinesisVideoClient.config.systemClockOffset,
});

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





-----------------------------------------------------------------------------------------
[소스 코드] : Viewer : STS : AccessKey , SecretKey , SessionToken 사용 초기화
-----------------------------------------------------------------------------------------

// -----------------------------------------
// [변수 선언]
// -----------------------------------------
var region = 'ap-northeast-2'; // [AWS 리전]
var clientId = 'TEST_CLIENT'; // [클라이언트 아이디]

var accessKeyId = 'AS..OZ'; // [실시간 영상 재생에 필요한 액세스 키]
var secretAccessKey = 'Uv..GS'; // [실시간 영상 재생에 필요한 시크릿 키]
var sessionToken = 'IQ..do='; // [실시간 영상 재생에 필요한 세션 토큰]
var channelARN = 'arn:aws:kinesisvideo:ap-northeast-2:000000000000:channel/TEST_CLIENT/11111111111111'; // [실시간 스트리밍 채널 ARN 주소]


// -----------------------------------------
// [KVS 클라이언트 생성]
// -----------------------------------------
var kinesisVideoClient = new AWS.KinesisVideo({
	region,
	credentials: {
		accessKeyId,
		secretAccessKey,
		sessionToken,
	},
	correctClockSkew: true,
});


// -----------------------------------------
// [신호 채널 끝점 가져오기]
// -----------------------------------------
// 각 신호 채널에는 데이터 플레인 작업을 위해 연결할 HTTPS 및 WSS 엔드포인트가 할당됩니다
// -----------------------------------------
const getSignalingChannelEndpointResponse = await kinesisVideoClient
	.getSignalingChannelEndpoint({
		ChannelARN: channelARN,
		SingleMasterChannelEndpointConfiguration: {
			Protocols: ['WSS', 'HTTPS'],
			Role: KVSWebRTC.Role.VIEWER,
		},
	})
	.promise();
const endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpointList.reduce((endpoints, endpoint) => {
	endpoints[endpoint.Protocol] = endpoint.ResourceEndpoint;
	return endpoints;
}, {});


// -----------------------------------------
// [KVS 시그널링 클라이언트 만들기]
// -----------------------------------------
// 응답 의 HTTPS 끝점은 GetSignalingChannelEndpoint이 클라이언트와 함께 사용됩니다
// -----------------------------------------
// 이 클라이언트는 실제 신호가 아닌 ICE 서버를 가져오는 데만 사용됩니다
// -----------------------------------------
const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
	region: region,
	credentials: {
		accessKeyId: accessKeyId,
		secretAccessKey: secretAccessKey,
		sessionToken: sessionToken,
	},
	endpoint: endpointsByProtocol.HTTPS,
	correctClockSkew: true,
});


// -----------------------------------------
// [ICE 서버 구성 가져오기]
// -----------------------------------------
// 최상의 성능을 위해 STUN 및 TURN ICE 서버 구성을 수집합니다
// -----------------------------------------
// [사용 서버 정의]
// -----------------------------------------
const iceServers = [];

// [TUN]
const getIceServerConfigResponse = await kinesisVideoSignalingChannelsClient
	.getIceServerConfig({
		ChannelARN: channelARN,
	})
	.promise();

const tunServerList = getIceServerConfigResponse.IceServerList;
tunServerList?.forEach((iceServer) => {
	iceServers.push({
		urls: iceServer.Uris,
		username: iceServer.Username,
		credential: iceServer.Password,
	});
});


// [STUN]
const stunIceServers = { urls: `stun:stun.kinesisvideo.${region}.amazonaws.com:443` };
iceServers.push(stunIceServers); // [추가]


// -----------------------------------------
// [RTCPeerConnection 만들기]
// -----------------------------------------
// RTCPeerConnection은 웹 에서 WebRTC 통신을 위한 기본 인터페이스입니다
// -----------------------------------------
const config = {
	iceServers: iceServers,
	iceTransportPolicy: "all", // all | relay
};

const peerConnection = new RTCPeerConnection(config);


// -----------------------------------------
// [WebRTC 시그널링 클라이언트 만들기]
// -----------------------------------------
// 응답 의 HTTPS 끝점은 GetSignalingChannelEndpoint이 클라이언트와 함께 사용됩니다
// -----------------------------------------
// 이 클라이언트는 실제 신호가 아닌 ICE 서버를 가져오는 데만 사용됩니다
// -----------------------------------------
const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
	region: region,
	credentials: {
		accessKeyId: accessKeyId,
		secretAccessKey: secretAccessKey,
		sessionToken: sessionToken,
	},
	endpoint: endpointsByProtocol.HTTPS,
	correctClockSkew: true,
});


// -----------------------------------------
// [ICE 서버 구성 가져오기]
// -----------------------------------------
// 최상의 성능을 위해 STUN 및 TURN ICE 서버 구성을 수집합니다
// -----------------------------------------
// [사용 서버 정의]
// -----------------------------------------
const iceServers = [];

// [TUN]
const getIceServerConfigResponse = await kinesisVideoSignalingChannelsClient
	.getIceServerConfig({
		ChannelARN: channelARN,
	})
	.promise();

const tunServerList = getIceServerConfigResponse.IceServerList;
tunServerList?.forEach((iceServer) => {
	iceServers.push({
		urls: iceServer.Uris,
		username: iceServer.Username,
		credential: iceServer.Password,
	});
});


// [STUN]
const stunIceServers = { urls: `stun:stun.kinesisvideo.${region}.amazonaws.com:443` };
iceServers.push(stunIceServers); // [추가]


// -----------------------------------------
// [RTCPeerConnection 만들기]
// -----------------------------------------
// RTCPeerConnection은 웹 에서 WebRTC 통신을 위한 기본 인터페이스입니다
// -----------------------------------------
const config = {
	iceServers: iceServers,
	iceTransportPolicy: "all", // all | relay
};

const peerConnection = new RTCPeerConnection(config);


// -----------------------------------------
// [WebRTC 시그널링 클라이언트 만들기]
// -----------------------------------------
// 이것은 신호 채널을 통해 메시지를 보내는 데 사용되는 실제 클라이언트입니다
// -----------------------------------------
const signalingClient = new KVSWebRTC.SignalingClient({
	channelARN,
	channelEndpoint: endpointsByProtocol.WSS,
	clientId,
	role: KVSWebRTC.Role.VIEWER,
	region,
	credentials: {
		accessKeyId : accessKeyId,
		secretAccessKey : secretAccessKey,
		sessionToken: sessionToken,
	},
	systemClockOffset: kinesisVideoClient.config.systemClockOffset,
});

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





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

[자바스크립트 AWS Kvs WebRTC 디바이스 역할 (master) sdp answer 응답 및 실시간 비디오 스트림 전송 수행]

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


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

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


[Aws KVS 비디오 스트림 , 신호 전송 채널 차이점 설명 정리]

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


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

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

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

 

---

[참고 사이트]

​

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

55. (Aws/Amazon) [Aws Kinesis Video Streams] Aws KVS 비디오 스트림 , 신호 전송 채널 차이점 설명 정리

---