webRTC기능구현을 위해서는 이론을 먼저 알아야한다 생각 하기에 webRTC가 정확히 무엇이고, 어떻게 작동하는지 조원들과 다함께 공부를 했던것 같다.

webRTC란?

WebRTC(Web Real-Time Communication)는 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API이다. W3C 에서 제시된 초안이며, 음성 통화, 영상 통화, P2P 파일 공유 등으로 활용될 수 있다.

• P2P 연결은 인터넷을 사용중인 다수의 사용자들이 서버를 거치지 않고 직접 데이터를 전송할 수 있도록 하는 연결 방식

우리 서비스는 다대다 방식의 서비스여서 webrtc 종류 중 에서 sfu방식으로 진행하기로 하였다.

SFU방식

• peer의 부하는 mesh에 비해서 줄어들지만, 그만큼 서버의 부하가 있다.
• 1개의 upstream과 N개의 downstream을 갖는 구조이다.
• 미디어 서버가 필요하다.
• 대규모 연결에 적합하다.

webRTC 서버 구축을 위해선 기본적으로 시그널링 서버, stun 서버, turn 서버, 미디어 서버 이렇게 총 4가지의 서버가 필요하다고 한다.

서버를 4개나..? 이렇게 어려운걸.. 우리가 과연 남은 5주안에 구현을 해낼수있을까? 하는생각에 사로잡혀 다들 프로젝트 방향성에대해 다시한번 생각해보는 시간을 가지기도 했던것 같다.
하지만 왠지 해낼수 있을것같은 근거없는 자신감이 샘솟아 팀원들에게 용기를 돋아주어 다시한번 다같이 마음을 먹고 공부를 시작했다.

webRTC에대해 검색해보던중 openvidu라는 프레임워크가 있는것을 알게되었고, openvidu에대해 알아보니, Openvidu는 웹 또는 모바일 애플리케이션에서 화상 통화를 쉽게 추가할 수 있는 플랫폼으로 애플리케이션에 매우 쉽게 통합할 수 있는 완전한 기술 스택을 제공며 플랫폼이기에 쉽게사용할 수 있다고 한다.
또한, openvidu는 처음 webRTC를 구현할때 사용하기 좋다는 추천글을 보아 우리조는 openvidu를 사용하기로 하였다.

우선 제공되는 튜토리얼로 서버를 연결하여 조원들끼리 캠공유하는데 성공하였고, 백엔드쪽에서 ssl적용하는 작업을 시작하였다.

webRTC는 브라우저와 브라우저간의 통신으로, 백엔드에서 구축해준 서버와 연결한뒤, 카메라 공유,음성공유 등 주요 기능들은 모두 프론트 단에서 작업을 해야했기 때문에 나를 포함한 프론트엔드쪽에서는 어떻게 비디오와 오디오를 사용하는지, subscraber,publisher,streamManager 등 주요 핵심부분들에대한 공부를 더 깊게 시작했다.

이론만 공부가 된 상태라 코드구현이 어떻게 진행되는지 무지한 상태라 우선은 openvidu에서 제공하는 튜토리얼을 먼저 분석하는 시간을 가졌다.
하지만.... 왜 튜토리얼 모두... class형으로 되어있는지...
class형 문법에 익숙하지 않았던 우리는 코드분석하는데 있어서 큰 어려움을 격었다.

react를 처음 배울때 class형을 잠깐 공부했었는데 그때 잠깐 공부했던 지식으론 해석하는데 있어 어려움이있어 class형에대해 같이 공부를 하며 코드분석을 해나갔다.
나중에는 이 class형을 함수형으로 바꿔서 코드작성을 하고싶은데... 아직까진 그게 가능할지.. 잘모르겠지만 시간적으로 여유가 있다면 함수형으로 바꾸는 작업을 해보고자 한다.

튜토리얼 코드분석이 끝난 후 openvidu를 사용하여 webRTC를 구현한 프로젝트들을 찾아 추가적으로 더 코드분석을 했더니 webRTC에대한 이해도가 생겼고, 우리들의 코드를 어떻게 써내려가야할지 감이 조금씩 잡혔다.

하지만, 처음부터 끝까지 하나하나 써내려가진 못했고 필요한부분들을 가져와 우리서비스에 맞게끔 코드를 조금씩 수정해 나가는 방향으로 시작을 했던것 같다.

서버측과 연결 후 코드를 돌려보니 해당오류가 발생하였다.
속성이 정의되어있지않다? 이게 무슨말일까.. 한참을 헤맸던것 같다...

알고보니, openvidu를 연결하는 코드만 작성을 해둔 상태였고, 실제로 비디오가 보여져야할 video태그를 만들어놓지 않았고, video,audio속성을 선언해주지않아 발생한 오류였다.

getUserMedia 메서드를 사용하여, 미디어 입력장치 활성화 시켰고 활성화시킨 video,audio속성을 리덕스에 담아 상태관리가 유용하도록 하였다.

getUserMedia

const getWebcam = (callback) => {
  try {
    const constraints = {
      'video': true,
      'audio': true
    }
    navigator.mediaDevices.getUserMedia(constraints)
      .then(callback);
  } catch (err) {
    console.log(err)

    return undefined;
  }
} 

리덕스

const handleVideo = () => {
      if (myVid === false) {
        dispatch(videoActions.setVideo({audio: videoReducer.audio, video: true}));
        setMyVid(true);        
      } else {
        dispatch(videoActions.setVideo({audio: videoReducer.audio, video: false}));
        setMyVid(false);
      }
  };

  const handleMic = () => {
      if (myMic === false) {
        dispatch(videoActions.setVideo({video: videoReducer.video, audio: true}));
        setMyMic(true);
      } else {
        dispatch(videoActions.setVideo({video: videoReducer.video, audio: false}));
        setMyMic(false);
          
      }
  };

이렇게 코드를 작성해주었더니 해당오류는 없어졌고 오픈비두서버에 무사히 연결 시킬수 있었다.

9주차 회고

처음 접하는 기술 webRTC.. 생각보다 너무 어려운 기술인것 같다. 한주동안 공부하고 코드분석하는데 정말 너무 어려워 토할것같았다.
정말 조원분이 없이 나혼자 이기술을 첼린지한다고 생각하면 절대 못해낼것 같다.

다행히 조원분과 함께 코드분석을하고 함께 공부를 해나가서, 서로가 막히는부분이 생기면 집단지성을 발휘하여 문제를 해결해나갔고, 프론트,백 파트별로 나눠서 공부하지않고 4명에서 다같이 공부를 하니 해내야겠다는 의지도 생기고, 어려워도 힘들지않게 웃으면서 나름 즐겁게 해쳐나갔던것 같다.

한주가 지나고 돌이켜 생각해보니 처음 webRTC를 공부하면서 나또한 엄청 막막하고 앞이 보이지않았었는데 왜그런 자신감이 그순간 솓았던걸까? 곰곰히 생각해 봤는데 그때 그런 자신감이 생겼던건 현재 조원들에 대한 믿음이 있었기 때문에 가능했던것 같다.
조원들 누구하나 남에게 일을 미루지않고 각자 맡은바에 최선을 다하고, 항상 먼저 나서서 행동하는 사람들이기에 그런 근거없는 자신감이 생겼던것이 아닐까? 하는 생각을 한다.

openvidu 서버에 연결을 성공하였지만 진짜 시작은 지금부터 이다. 어떻게 subscraber,publisher를 구별하여 화면단에 뿌릴것인지, video와 audio를 어떻게 제어할것인지 등등 해야할것들이 너무 많고, 많은 어려움이 있을것으로 예상되지만, 우리조는 어떻게든 반드시 성공해 낼것 같다.