ChatForYou - Git 이슈 해결 및 기능 개선(feat. datachannel 성공!)

1. 시작하면서

이번에도 오랜만에 글을 쓰는 것 같네요! 그래도 이제는 한달에 한번 포스팅하는 것은 꼭 지켜보려고 합니다ㅎ

오늘은 프로젝트가 어떻게 개선되고 있는지 일지를 적으려고 합니다.

 

이번 글은 git 이슈 해결 및 datachannel 구현과 관련된 내용입니다!

자세한 코드는 다음에 더 적을거구 이번에는 대략적으로 어떻게 진행되었는지 정도만...?

 

 

특히나 몇달전에 저를 괴롭히고 또 괴롭히던 dataChannel 이 나쁜놈을 제가 이기고 결국 구현에 성공했습니다...!! 솔직히 지난번에 그렇게 도전하다가 결국 실패해서 정말로 그냥 포기하려고 했었습니다. 채팅정도야 그냥 websocket 을 사용하자 라고 생각했었구요.

그러다가 이번에 git 이슈 중 하나였던 '#12 화상채팅 시 화면 공유 기능 개선' 을 작업하면서 우연히 datachannel 구현하기 위해서 커밋해두었던 branch 를 발견했고, 이전보다 그래도 조금 더 발전되었기에 혹시나...? 하는 마음에 다시 한번 시도 해봤던 것 같습니다.

2. git 이슈 해결하기

1) #12 화상채팅 시 화면 공유 기능 개선

- 화상 채팅 시 화면 공유 기능 개선은 이전부터 계속 있었던 이슈이다. 1:1 채팅을 할 때도 굉장히 불안했었는데 이번에 N:M 화상채팅으로 전환하면서 결국 일이 터져버렸다. 이전에도 살짝 언급했었지만 오디오만으로 채팅이 가능하도록 하면서 정말로 화면 공유 기능 자체가 먹통이 되어버렸다.

기존에 화면 공유를 하던 방법은 오디오 트랙과 비디오 트랙이 모두 있는 미디어 스트림에서 비디오 트랙만 캠 화면의 비디오 트랙에서 화면 공유 비디오 트랙으로 교체하는 방식을 썼었는데, 이 부분을 새롭게 짠 코드에 어떻게 적용하면 좋을지 정말 많이 고민했었던 것 같다. 왜냐하면 결국 새로운 코드, 즉 비디오 권한이 없거나 장비가 없는 경우 오디오만 사용하는 경우 정말 오디오 트랙만 보내주고 비디오 트랙을 안 보내주기 때문이다. 

이렇게 저렇게 고민하다가 해결책으로 dummyVideoTrack 를 생성해서 오디오 트랙과 함께 묶어서 보내주는 방식을 사용했다. 즉 cavas 를 사용해서 dummyVideoTrack 을 생성한 다음 오디오 트랙과 함께 묶어서 다른 사용자에게 전달한다. 이렇게되면 어찌되었던 '비디오 트랙'을 보내게 됨으로 추후 자연스럽게 비디오 트랙 교체가 가능하다!!

 

물론 이게 좋은 방법인가에 대해서는 의문이 남는다. 이 방법은 결국 무조건 720p 의 비디오 트랙을 보내는 것이기 때문에 데이터 적으로도 네트워크 적으로도 좋다고 보이지는 않는다ㅠㅠ

차선책으로 생각했던 방법은 처음에는 오디오 트랙만 보내고, 화면 공유했을 때만 비디오 트랙을 추가(addTrack) 하는 방법이었는데...일단 지금은 기능 동작이 우선이니 이렇게 두고 추후 리팩토링 시 우선 개선 요소로 고려할 예정이다.

2) #14 비어있는 채팅 방 삭제 & 잠금 방 삭제 기능

이 부분도 꼭! 필요했던 부분 중 하나이다. '대화가 끝난 방은 삭제해주세요ㅠㅠ' 했는데 매번 보면 누군가는 방을 남겨두었더라ㅠㅠ사실 내가 삭제해주세요 하는게 이상하긴했지ㅋㅋㅋㅋ

이번 개선을 통해서 추가된 기능은 총 2가지이다.

첫번째는 @Schedule springBatch 기능을 사용해서 특정한 시간마다 인원이 없는 방, 즉 userCnt 가 0 이거나 0 보다 작은 방(가끔 오류가 나면 -1 로 표시되서...)은 삭제 해버리도록 만들었다. 이때 특정한 시간은 cron 표기법을 사용해서 매 시간 정각과 30분마다 batchJob 을 수행한다.

두번째는 chattingRoom 과 관련된 restfulAPI 를 개발했다. 현재로서는 3가지 api 만 존재한다.

### api 사용을 위한 JWT 생성
POST http://localhost:8443/gentoken/{{key}}

### 전체 roomlist return
POST http://localhost:8443/allrooms

### roomId 기준 chatting room 삭제
POST http://localhost:8443/delete/{{roomId}}

 

3. WebRTC DataChannel 기능!

사실상 이번 플젝 일지를 쓴 이유이자 메인 주제이다.

때는 2023년 화상채팅을 만들다가 우연히 datachannel 에 대한 내용을 듣고 공부하게 되었고, 어떻게든 구현해보려했으나...결국 패배하고 다음을 기약하며 포기하고 말았다. 솔직히 이번에도 딱 datachannel 을 구현하고 싶어서 어찌어찌 했던게 아니라 되게 우연찮게 다시 시작하게 되었다.

계기는 화상채팅 화면공유 기능 개선을 진행하면서 datachannel 에 대한 내용이 남아있는 local brach 를 발견하게 되었던 것이다. 이걸 보면서 이전과는 또 다르게 많은 부분이 바뀌었기에 혹시나...? 하는 마음에 다시 datachannel 기능을 만져보게 되었다.

코딩이란게 참 신기하게도 그렇게 많은 시간이 지나고 다른것들을 하다가 돌아왔는데도 내 코드를 보니까 또 기억나는 부분들이....있을리가 있나. 없었다. 정말, 정말 기억이 안났다. 딱 하나 option 부분에 뭔가를 어떻게 추가했던거 같은데...? 하면서 열심히 이전 커밋내역을 찾아가면서 나름대로 다시 고쳐나가기 시작했다.

이번에 많은 도움을 받았던 것은 의외로 chatGPT 가 아닌 과거의 내가 쓴 datachannel 과 관련된 글이었다. 특히 거기서 특정 레퍼런스가 정말 많이 도움이 되었다. 과거의 나님 정말 고마워ㅠㅠㅠ 앞으로도 기록하는 습관 잊지 않도록 하겠습니다

 

반대로 정말정말 도움이 하나도 안된 레퍼런스 가 있었는데 바로 'datachannel-send' 와 'datachannel-show' 에 대한 레퍼런스이다. 물론 '저거 레퍼런스 잘 읽어보면 관련 내용 아닌거 알 수 있지 않냐?'라고 이야기하신다면 할말이 없습니다...그런데 솔직히 datachannel-send 와 show 면 속을만 하잖아요ㅠㅠ

 

여튼 아래와 같이 java kurentoSession class 에서 WebRtcEndpoint 부분과 kurento-service.js 부분을 아래와 같이 수정하였고, datachannel 구현에 성공하였다.

1) kurento-service.js

rtcpeer 에 관한 option 부분에 dataChannels : true 와 config 추가 

var options = {
    remoteVideo: video,
    remoteAudio : audio,
    onicecandidate: participant.onIceCandidate.bind(participant),
    dataChannels : true, // dataChannel 사용 여부
    dataChannelConfig: { // dataChannel event 설정
        id : dataChannel.getChannelName,
        onopen : dataChannel.handleDataChannelOpen,
        onclose : dataChannel.handleDataChannelClose,
        onmessage : dataChannel.handleDataChannelMessageReceived,
        onerror : dataChannel.handleDataChannelError
    },
    configuration: { // 이 부분에서 TURN 서버 연결 설정
        iceServers: [
            {
                urls: turnUrl,
                username: turnUser,
                credential: turnPwd
            }
        ]
    }
}

 

2) kurentoSession.class

- kurento server 버전은 7.0 이상으로해야하며 java 에서는 아래 코드처럼 .useDataChannels() 를 꼭! 설정해주어야 한다.

- 일전에 나를 미치게 만들었던 "Rejected data Channel transport with mid=2"  에러는  .useDataChannels() 설정을 통해서 해결되었다.

// 외부로 송신하는 미디어?
this.outgoingMedia = new WebRtcEndpoint.Builder(pipeline)
        .useDataChannels()
        .build();
        
        ----- 중략 ----
        
// 새로 incoming , 즉 webRtcEndpoint 를 만들고
incoming = new WebRtcEndpoint.Builder(pipeline)
         .useDataChannels()
         .build();

 

4. DataChannel 동작!

현재는 임시적으로 console 을 통해서만 채팅이 가도록 해두었다. 더 하기에는 채팅을 보내고 받을 수 있도록 ui 까지 작업해야할거같아서 일단은 입장 이벤트, 채팅 동작, 퇴장 이벤트 3가지만 작업해두었다.

- 퇴장 이벤트 처리가 미흡하다. 이 부분은 확실하게 개선해서 merge 예정!!

연휴 내내 고생하다가...그래도 성공하니 뿌듯하네요ㅎ

---

Reference

- chrome 에서 사용할 수 있는 WebRTC 를 다룰 때 꼭 필요한 웹 기능

- 주소창에 아래 주소를 넣고 들어가서 webrtc 기능을 켜면 디버깅 및 통계 등 다양한 내용 확인이 가능하다!

chrome://webrtc-internals/

 

- 아주 중요한 kurento utils doc

https://doc-kurento.readthedocs.io/en/latest/features/kurento_utils_js.html#using-data-channels

Kurento Utils JS — Kurento 7.0-dev documentation

 

- 참고할만한 kurento git issue

https://github.com/Kurento/kurento/issues/43

Send datachannel open indication missing · Issue #43 · Kurento/kurento

 

- 속아버린 doc : datachannel-send-qr

https://doc-kurento.readthedocs.io/en/latest/tutorials/java/tutorial-datachannel-send-qr.html

Java - Send DataChannel — Kurento 7.0-dev documentation

 

- 속아버린 doc2 :  datachannel-show-text

https://doc-kurento.readthedocs.io/en/latest/tutorials/java/tutorial-datachannel-show-text.html

Java - Show DataChannel — Kurento 7.0-dev documentation