160. (TWOK/WORK) [업무 이슈] 자바스크립트 aws kvs webRTC 영상 및 음성 재생 시 실시간 음성이 출력 되지 않는 이슈 - stream 스트림 지정 문제

---

[제 목]

​

[업무 이슈] 자바스크립트 aws kvs webRTC 영상 및 음성 재생 시 실시간 음성이 출력 되지 않는 이슈 - stream 스트림 지정 문제

 

---

[내 용]

​

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

- 제목 : [업무 이슈] 자바스크립트 aws kvs webRTC 영상 및 음성 재생 시 실시간 음성이 출력 되지 않는 이슈 - stream 스트림 지정 문제

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

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





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

1. 자바스크립트에서 Aws Kvs 연동 및 Master 음성 입력 데이터를 Viewer 에서 실시간으로 출력되지 않는다는 이슈 문의

  >> Master : 디바이스 기기

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


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 Master 역할로 자바스크립트에서 Video , Audio 실시간 스트림 전송 상태 확인

  >> navigator mediaDevices getUserMedia 비디오 및 오디오 권한 사용 요청 확인

  >> 자바스크립트 Stream.getTracks().forEach() 사용해 peerConnection 에 입력 받은 스트림 track 에 추가하는 구문 확인


2. [디바이스] : Viewer 가 sdpOffer 요청 시 createAnswer 생성 후 sendSdpAnswer 응답 반환 구문 확인


3. [뷰어] : Aws Kvs 연동 및 WebRTC Viewer 역할로 자바스크립트에서 실시간 양방향 통화를 위한 Video , Audio 권한 사용 요청 확인

  >> 자바스크립트 Stream.getTracks().forEach() 사용해 peerConnection 에 입력 받은 스트림 track 에 추가하는 구문 확인


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


5. [뷰어] : 실시간 Master 비디오 영상 출력 상태 확인


6. [디바이스] : 양방향 통화를 위해 마이크에 실시간 음성 전송 수행


7. [뷰어] : 실시간 비디오 영상은 출력 되지만, 음성 데이터는 출력 되지 않은 것 확인

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





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

1. Viewe 뷰어 peerConnection.addEventListener 'track' 트랙 이벤트 부분에서 remoteView.srcObject 스트림 지정 구문 수정


2. AS-IS : 기존은 실시간 음성 통화 기능 없이 마스터의 비디오 출력 만을 수행 하므로 이미 지정 된 스트림이 있는 경우 다시 스트림을 지정하지 않도록 코드 설정


3. TO-BE : 실시간 음성 통화 기능을 위해 입력 된 track 데이터가 있는 경우 다시 스트림을 지정하도록 코드 수정

    // [원격 트랙이 수신되면 원격 보기에 추가합니다]
    peerConnection.addEventListener('track', event => {
        console.log("");
        console.log("=========================================");
        console.log("[setSystem] : [로컬 <-> 원격 접속 상태 확인] : [peerConnection] : [track] : [Start]");
        console.log("-----------------------------------------");
        console.log("[VIEWER] Received remote track ::", JSON.stringify(event));
        console.log("=========================================");
        console.log("");

        // [스트림 재생 src 지정] : 마스터가 전달한 스트림 데이터 출력
        remoteView.srcObject = event.streams[0];

    });

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





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

[자바스크립트 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 응답 및 실시간 비디오 스

---