ChatForYou 기능 추가 - datachannel(2)

기능 추가에 관한 정리 2탄!

 

1. DataChannel 추가

- 여전히 해결 방법을 못 찾았다ㅠㅠ

- 다만 kurento-utils.js 에서 관련돤 내용을 찾을 수 있었는데 아래 링크

https://doc-kurento.readthedocs.io/en/latest/features/kurento_utils_js.html#overview

Kurento Utils JS — Kurento 7.0.0 documentation

 

- 그렇게해서 아래와 같이 datachannel 을 사용하기 위해 설정 관련된 코드를 추가. 문제는 여전히 에러가 발생한다.

function onExistingParticipants(msg) {
    console.log(name + " registered in room " + roomId);
    var participant = new Participant(name);
    participants[name] = participant;
    var video = participant.getVideoElement();

    var options = {
        localVideo: video,
        mediaConstraints: constraints,
        onicecandidate: participant.onIceCandidate.bind(participant),
        dataChannels : true,
        dataChannelConfig: {
            id : roomId,
            onmessage : onMessage,
            onopen : () => onOpen(participant),
            onclose : onClosed,
            onbufferedamountlow : onbufferedamountlow,
            onerror : onError,
        }
    }

    participant.rtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options,
        function (error) {
            if (error) {
                return console.error(error);
            }

            this.generateOffer(participant.offerToReceiveVideo.bind(participant));

        });


    msg.data.forEach(sender => receiveVideo(sender));
}

function receiveVideo(sender) {
    var participant = new Participant(sender);
    participants[sender] = participant;
    var video = participant.getVideoElement();

    var options = {
        remoteVideo: video,
        onicecandidate: participant.onIceCandidate.bind(participant),
        dataChannels: true,
        dataChannelConfig: {
            id: roomId,
            onmessage: onMessage,
            onopen: () => onOpen(participant),
            onclose: onClosed,
            onbufferedamountlow: onbufferedamountlow,
            onerror: onError,
        }
    }

    participant.rtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options,
        function (error) {
            if (error) {
                return console.error(error);
            }


            this.generateOffer(participant.offerToReceiveVideo.bind(participant));

        });
}

 

이쪽은 KMS 쪽 에러 로그

 

여기는 개발자 도구 js 쪽 에러 로그

 

- 최종적으로 에러 로그를 확인한 결과 아래와 같이 정리가능하다.

1. application UDP/DTLS/SCTP 를 다룰 수 없다. 이유는 m= 가 여러개의 라인이 있기 때문?

2. application 미디어를 rejecting 즉 거절했다는 내용. 아마 바로 위 로그인 can not handle media 와 관련된게 아닐까 싶다

3. js 로그를 보면 mid=2 인 애 - data channel - 을 전송하는걸 거절했다는 내용.

4. 추가적으로 확인한 부분은 sdpOffer 할 때 생성된 메시지를 통해서 추가적인 내용을 확인했는데...로그에 찍히는 내용이 아주 정확했다.

m=audio 9 UDP/TLS/RTP/SAVPF 111 63 9 0 8 13 110 126

아주 많은 내용 ------>

m=video 9 UDP/TLS/RTP/SAVPF 96 97 102 103 104 105 106 107 108 109 127 125 39 40 45 46 98 99 100 101 112 113 114 115 116

아주 더 많은 내용 ------>

m=application 9 UDP/DTLS/SCTP webrtc-datachannel

몇몇 내용 ----->

a=mid:2
a=sctp-port:5000
a=max-message-size:262144

5. 종합해보면 m= 가 여러개있기 때문에 application 이라는 이름의 datachanenl 을 거절했다. 이 부분은 실제로 m=audio, video, application 총 3개가 있기 때문에가 아닐까 싶다.

동시에 kms 에서 거절한 mid=2 가 datachannel 이고, 개발자 도구에 찍힌 건 바로 이 내용인데 sdp 의 내용을 보면 실제로 mid:2 인 애가 sctp 프로토콜을 사용하고 있고, 5000 포트를 잡고있다.

 

6. 정말 막다른 길에 도착한듯하다. chatGPT 와 함께 약 3주간 도전했지만...내 머리가 부족한건지 아직도 해결 불가ㅠㅠ

일단 담주까지만 더 해보고 안되면 포기하고 다른 방법을 찾아보련다