157. (TWOK/WORK) [업무 이슈] 자바스크립트 AWS KVS signalingClient sendSdpAnswer 오퍼 응답 이슈 - remoteClientId 누락

---

[제 목]

​

[업무 이슈] 자바스크립트 AWS KVS signalingClient sendSdpAnswer 오퍼 응답 이슈 - remoteClientId 누락

 

---

[내 용]

​

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

- 제목 : [업무 이슈] 자바스크립트 AWS KVS signalingClient sendSdpAnswer 오퍼 응답 이슈 - remoteClientId 누락

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

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





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

1. 자바스크립트에서 Aws Kvs 연동 및 Device WebRTC 실시간 비디오 영상 재생 관련 master 에서 sendSdpAnswer 전송 시 

   viewer 쪽에서 응답 이벤트를 받지 못해 실시간 영상을 재생하지 못하는 이슈 발생


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. [환경] : Aws Kvs WebRTC 실시간 영상 재생에 필요한 정보 유효성 검증

  >> AccessKeyId : 일치 정보 확인
  >> SecretKey : 일치 정보 확인
  >> Channel ARN : Aws KVS 콘솔에서 정상적으로 ARN 주소 일치 확인
  >> Region : Aws KVS WebRTC 영상 재생 수행 환경이 구축 된 리전 정보 확인


2. [디바이스] : 자바스크립트에서 Aws Kvs WebRTC Role MASTER 지정 확인


3. [디바이스] : 자바스크립트에서 navigator.mediaDevices.getUserMedia 사용해 비디오 스트림 재생 권한 부여 확인 및 실시간 Video 스트림 재생 확인


4. [디바이스] : SignalingClient open 후 정상적으로 viewer 접속 대기 상태 진입 확인


5. [디바이스] : viewer 에서 sdpOffer 요청 상태 확인


6. [디바이스] : master sendSdpAnswer(peerConnection.localDescription) 으로 응답 전송 수행 확인


7. [클라이언트] : sdpAnswer 콜백 부분에서 응답이 내려오지 않은 것 확인

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





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

1. 코드 구문 변경 : master sendSdpAnswer 응답 전송 시 offer 요청이 들어온 remoteClientId 값 추가 지정 필요


2. 변경 된 소스 코드 : 디바이스 master 기준

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

		// [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(peerConnection.localDescription, remoteClientId); // [접속 시도한 기기 아이디를 지정해 줘야함]

	});


3. 클라이언트 view sdpAnswer 콜백 부분에서 정상 응답이 내려 온 것 확인

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





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

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


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

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

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

 

---

[참고 사이트]

​

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

387. (javaScript) 자바스크립트 AWS Kvs WebRTC 디바이스 역할 (master) sdp answer 응답 및 실시간 비디오 스

---