ChatForYou 기능 추가 - datachannel(1)

한동안 글이 뜸했습니다ㅠㅠ

물론 바빠서 그랫던것도 있지만...그래도 무작정 놀았던 것은 아닙니다!

여러가지 기능을 추가하려고 이것저것 시도도 해보았고, 실제로 적용해보았는데 아무래도 제가 원하는 만큼 퍼포먼스가 나오지 못해서 차마 정리하지 못 했습니다.

 

대표적으로 카메라의 모션인식을 통한 게임 구현과 datachannl 이 있었는데 결국 모션인식쪽은 한달동안(2월 내내) 미친듯이 해매다가 이제는 때려쳤습니다ㅋㅋ 이게 도저히 안되겠더라구요. 그리고 datachannl 부분은 이제 열심히 하고 있습니다.

 

사실 한달에 5개 정도의 글을 쓰고 싶었는데 2월내내 아무런 글이 없다보니까 블로그가 텅 비어있는게 아쉽기도 하고 허전하기도 하고 무엇보다 프로젝트에 넣을 기능에 대해서 정리하는 겸해서 간략하게 일지를 써보기로 했습니다!

 

1. DataChannel 추가

- WebRTC의 또다른 기능인 datachannel 을 추가하기 위한 작업.

- 처음에는 kms 를 통해서 datachannel 을 생성하고 데이터를 보내려고 작업을 시도하였다.

• 다만 kurento media server 가 datachannel 을 지원하지 않는다는걸 모르고...ㅠㅠ
• 물론 추가로 서버에 모듈을 설치하고 이것저것 하면 된다고는 하는데, 도커 컨테이너 방식으로 올려서 그런지 도저히 모듈을 추가할 수 없어 일단 패스

 

- 다음으로 js 쪽에서 WebRTC 참여자의 peerConnection 객체에서 createDataChannel 을 통해서 생성하는 방법으로 진행 중.

- 대략 아래처럼 datachannel 을 생성해서 send 하고 onmessage 를 통해 메시지를 받는 방식으로 만드려고 했는데 역시 잘 안된다.

• 안되는 원인은 여전히 파악 중. 다만 onmessage 를 통해서 '받는게' 안되는게 아니라 send 를 통해서 '보내는' 쪽이 문제라고 생각이됨

const initializeDataChannel = (participant) => {

    participant.dataChannel = participant.rtcPeer.peerConnection.createDataChannel('channel', dataChannelOptions);

    initializeDataChannelListeners(participant.dataChannel);
};

const initializeDataChannelListeners = (dataChannel) => {
    dataChannel.onopen = () => {
        console.log(' dataChannel opened');
        const message = {
            "data": "dataChannel is activated"
        };
        dataChannel.send(JSON.stringify(message));
    };

    dataChannel.onclose = () => console.log(' dataChannel closed');
    dataChannel.onerror = (error) => console.error(' dataChannel error:', error);
    dataChannel.onmessage = (event) => {
        console.log(' dataChannel message received:', event.data);
    };
};

 

2. openvidu

- 아주 간단하다고 생각했던 datachannel 의 구현이 너무 오래걸리고 힘들어지는 관계로 차선책을 찾기 시작했다.

- 일단 가장 유력한 방법은 openvidu 를 사용하는 것인데, 이 프레임워크에서는 datachannel 을 어느정도 지원한다고 확인했다.

- 그런데 또 이렇게되면 코드를 전면 수정해야해서 고민중.