165. (TWOK/WORK) [기능 개선] 자바스크립트 aws kvs webRtc 디바이스 마스터 영상 송출 시 뷰어 다중 접속 설정 - Multi PeerConnection

---

[제 목]

​

[기능 개선] 자바스크립트 aws kvs webRtc 디바이스 마스터 영상 송출 시 뷰어 다중 접속 설정 - Multi PeerConnection

 

---

[내 용]

​

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

- 제목 : [기능 개선] 자바스크립트 aws kvs webRtc 디바이스 마스터 영상 송출 시 뷰어 다중 접속 설정 - Multi PeerConnection

- 테스트 환경 : Window PC / Chrome 브라우저

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





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

1. 기존 디바이스 (마스터) , 클라이언트 (뷰어) 1:1 매핑 후 영상 스트리밍 재생 및 확인 로직에서 뷰어 다중 영상 확인 로직 개발 요청

  >> Master : 디바이스 기기

  >> Viewer : 클라이언트 (App 및 Web)

  >> 마스터 1 : 뷰어 N 방식으로 실시간 스트리밍 영상 확인


2. 자바스크립트 실시간 Aws Kvs WebRTC 영상 재생 관련 사용 라이브러리 CDN 주소 : 

  <script src="https://unpkg.com/amazon-kinesis-video-streams-webrtc/dist/kvs-webrtc.min.js"></script>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1416.0.min.js"></script>

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





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

1. [디바이스] : KVSWebRTC.SignalingClient 'on' Aws 연결 확인 이벤트 부분에서 navigator.mediaDevices.getUserMedia 로컬 스트림 지정 및 단일 RTCPeerConnection 피어 연결 객체 생성


2. [디바이스] : [A] 뷰어가 sdpOffer 요청 시 createAnswer 생성 후 sendSdpAnswer 응답 반환 구문 확인 (KVSWebRTC.SignalingClient 'sdpOffer' 이벤트에서 로직 처리)


3. [A] 뷰어] : sendSdpOffer 요청 후 마스터로부터 sendSdpAnswer 응답 이벤트 받은 것 확인


4. [B] 뷰어 : 다중 스트리밍 영상 확인을 위해 마스터에게 sdpOffer 요청 수행 및 sendSdpAnswer 응답 확인 대기 수행


5. [결과] : 디바이스에서 단일 RTCPeerConnection 뷰어 설정으로 다중 영상이 스트리밍 되지 않는 것 확인

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





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

1. 디바이스 (마스터) 에서 다중 뷰어 접속 및 연결 처리를 위한 RTCPeerConnection 객체 생성 소스 코드 수정


2. AS-IS : 기존은 KVSWebRTC.SignalingClient 'on' 부분에서 단일 RTCPeerConnection 객체 생성 수행


3. TO-BE : KVSWebRTC.SignalingClient 'sdpOffer' 뷰어의 오퍼 이벤트 요청 부분에서 요청이 들어온 대로 다중 RTCPeerConnection 생성 수행

	// [Viewer 의 SDP Offer 수신 대기]
	signalingClient.on('sdpOffer', async (offer, remoteClientId) => {

		// [RTCPeerConnection 만들기]
		const peerConnection = new RTCPeerConnection(config);
		viewerConnections[remoteClientId] = peerConnection;
		
		// [미디어 스트림 추가]
		localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream)); // [카메라 스트림 트랙에 추가]


		// [peerConnection remoteClientId 지정]
		peerConnection.onicecandidate = event => {
			if (event.candidate) {
				signalingClient.sendIceCandidate(event.candidate, remoteClientId);
			}
		};
		console.log(">>>>>>>>>>>>>>>>>>>>>>>> [sdpOffer] : [sendIceCandidate] : [Finish] >>>>>>>>>>>>>>>>>>>>>>>>");


		// [상대방 오퍼를 내 Remote 에 추가]
		await peerConnection.setRemoteDescription(offer);
		console.log(">>>>>>>>>>>>>>>>>>>>>>>> [sdpOffer] : [setRemoteDescription] : [Finish] >>>>>>>>>>>>>>>>>>>>>>>>");


		// [Answer 옵션 지정 및 생성]
		const answer = await peerConnection.createAnswer();
		console.log(">>>>>>>>>>>>>>>>>>>>>>>> [sdpOffer] : [createAnswer] : [Finish] >>>>>>>>>>>>>>>>>>>>>>>>");


		// [Answer 를 내 local 로 저장]
		await peerConnection.setLocalDescription(answer);
		console.log(">>>>>>>>>>>>>>>>>>>>>>>> [sdpOffer] : [setLocalDescription] : [Finish] >>>>>>>>>>>>>>>>>>>>>>>>");


		// [SDP Answer 응답 전송]
		console.log(">>>>>>>>>>>>>>>>>>>>>>>> [sdpOffer] : [sendSdpAnswer] : ["+answer.type+"] >>>>>>>>>>>>>>>>>>>>>>>>");

		//signalingClient.sendSdpAnswer(answer); // [클라이언트가 응답 받지 못함]
		signalingClient.sendSdpAnswer(peerConnection.localDescription, remoteClientId); // [접속 시도한 기기 아이디를 지정해 줘야함]


		console.log("-");
		console.log("=========================================");
		console.log("[setSystem] : [로컬 <-> 원격 연결 신호 확인] : [signalingClient] : [sdpOffer] : [Start]");
		console.log("-----------------------------------------");
		console.log("[VIEWER] Received SDP Offer from Viewer : ", remoteClientId);
		console.log("-----------------------------------------");
		console.log("[설 명] : 뷰어 SDP Offer 확인 및 Answer 응답 전송 수행");
		console.log("=========================================");
		console.log("-");

	});


	// [Viewer 의 ICE Candidate 수신 대기]    
	signalingClient.on('iceCandidate', (candidate, remoteClientId) => {
		console.log(">>>>>>>>>>>>>>>>>>>>>>>> [iceCandidate] : [원격 접속 연결 시도 리스트 추가] : ["+JSON.stringify(candidate)+"] >>>>>>>>>>>>>>>>>>>>>>>>");
		/*
		console.log("-");
		console.log("=========================================");
		console.log("[setSystem] : [로컬 <-> 원격 연결 신호 확인] : [signalingClient] : [iceCandidate] : [Start]");
		console.log("-----------------------------------------");
		console.log("[VIEWER] Received ICE candidate : ", JSON.stringify(candidate));
		console.log("-----------------------------------------");
		console.log("[설 명] : 원격 접속 연결 시도 리스트 추가");
		console.log("-----------------------------------------");
		console.log("[로 직] : ", "peerConnection.addIceCandidate 연결에 추가");
		console.log("=========================================");
		console.log("-");
		// */

		const peerConnection = viewerConnections[remoteClientId];
		if (peerConnection) { 
			peerConnection.addIceCandidate(candidate);
		}

	});

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





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

[자바스크립트 AWS Kvs WebRTC 디바이스 역할 (master) 뷰어 다중 연결 접속 처리 - RTCPeerConnection]

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


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

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


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

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


[Aws Security Token Service] Aws STS 임시 보안 자격 증명 설명 정리

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


[Aws Kinesis Video Streams] Aws KVS WebRTC 신호 채널 당 최대 연결 마스터, 뷰어 제한 정리

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

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

 

---

[참고 사이트]

​

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

392. (javaScript) 자바스크립트 AWS Kvs WebRTC 디바이스 역할 (master) 뷰어 다중 연결 접속 처리 - RTCPeerCon

---