[공통프로젝트]5주차: React Openvidu 구현

*Openvidu v2 기준

📌Openvidu의 구성요소

Openvidu의 구성요소는 크게 Openvidu Server, Application Server(BE), Application Client(FE)로 구분할 수 있다.

• Openvidu Server: 실시간 오디오 및 비디오 스트리밍에 필요한 모든 인프라를 제공한다. 화상회의 서비스 개발을 위해서 단순히 배포만 하면 된다.
• Application Server(BE): client의 요청에 따라 openvidu server와 상호작용하며 세션을 생성하고 관리한다. Openvidu Server에서 제공하는 REST API를 통해서 Openvidu Server와 통신한다.
• Application Client(FE): 사용자와 직접 상호작용하는 부분으로, Openvidu library를 사용하여 비디오 세션을 생성하고 관리한다.

 

📌SFU

webRTC의 연결방식에는 Mesh, MCU, SFU 등 여러 방식이 존재한다. Openvidu는 이 중 SFU 방식을 사용한다. SFU 방식에서 각 peer는 Server에게만 자신의 stream을 보내며, 서버는 해당 stream을 다른 client들에게 보낸댜. (1개의 uplink와 N-1개에 해당하는 downlink)

 

📌Openvidu with React

openvidu-react - OpenVidu Docs

 

1.의존성 설치

위에서 언급했듯이 Openvidu library를 이용해서 비디오 세션을 생성하고 관리해야 한다. 따라서 관련된 library를 먼저 설치한다.

npm i openvidu-browser

 

 

2.세션 생성

• Session → 화상회의 방
• Connection → 각 참가자
• Stream → 참가자 간의 연결
• Token → 화상회의 방에 입장하기 위해서 발급받아야 함

다른 사용자들과 통신하기 위해서 가장 먼저 Session을 생성해야 한다. Session이랑 화상회의 방과 같은 개념이다. 화상회의 방이 먼저 생성되어야 참가자들이 입장할 수 있다~ 정도로 이해하면 될 것 같다. 이를 위해 FE에서는 BE에 session 생성을 위한 요청을 보낸다.

 

3. Token 발급

화상회의 방이 생성되었다면 이제 참가자가 화상회의 방에 입장해야 한다. Openvidu에서는 session(화상회의 방) 입장을 위해서 token 발급을 필요로 한다. 이를 위해 FE에서 BE에 token 발급을 요청하고 BE에서 token을 발급받는다. 이제 이 token을 이용해서 연결을 형성할 수 있다.

 

4. 연결 형성

연결을 형성할 때 Openvidu v2를 기준으로 Publish와 Subscriber의 개념이 나온다. 나는 Publish는 자신의 영상의 uplink를 만드는 것이고, Subscribe는 downlink들을 받는 것으로 이해했다.

참가자 A가 참가자 B, 참가자 C가 있는 화상회의 방에 입장한 상황을 가정해보자.

참가자 A가 자신의 stream을 publish(발행)한다.

→ 참가자 B와 참가자 C: 이미 화상회의 방에 참여 중이던 참가자 B와 참가자 C는 새로운 downlink가 생기게 되고, 참가자 A의 stream을 Subscribe(구독)한다.

→ 참가자 A: 참가자 A 또한 Openvidu Server로부터 참가자 B, 참가자 C의 downlink를 전달받게 되고 이들의 stream을 Subscribe(구독)한다.

그리고 연결을 형성하는 단계(session 생성)에서 내 서비스를 위한 여러가지 custom(채팅 등등)을 할 수 있다. session 생성시 event를 수신했을 때 로직을 설정할 수 있다.

var mySession = this.state.session;

// --- 3) Specify the actions when events take place in the session ---

// On every new Stream received...
mySession.on('streamCreated', (event) => {
    // Subscribe to the Stream to receive it. Second parameter is undefined
    // so OpenVidu doesn't create an HTML video by its own
    var subscriber = mySession.subscribe(event.stream, undefined);

    //We use an auxiliar array to push the new stream
    var subscribers = this.state.subscribers;

    subscribers.push(subscriber);

    // Update the state with the new subscribers
    this.setState({
        subscribers: subscribers,
    });
});

    // On every Stream destroyed...
mySession.on('streamDestroyed', (event) => {
    event.preventDefault();

    // Remove the stream from 'subscribers' array
    this.deleteSubscriber(event.stream.streamManager);
});

// On every asynchronous exception...
mySession.on('exception', (exception) => {
    console.warn(exception);
});

// See next step

 

 

이번 프로젝트에서 채팅 기능이 있었는데 Openvidu 내의 채팅 기능을 활용했다. 채팅 이벤트를 정의하고, 세션 생성 단계에서 채팅 이벤트 수신 로직을 달아주면 채팅 기능을 구현할 수 있다.

특히 text messages와 관련해서 target를 지정할 수 있고, message의 type을 구분할 수 있어 이를 활용해서 다음과 같은 기능들을 구현했었다.

• 강사가 타이머를 조작하면 수강생들의 타이머가 설정되어 돌아간다.
• 수강생이 도와주세요/완료했어요를 표시하면 강사가 이를 확인할 수 있다.
• 강사가 다음단계로 넘어가면 수강생이 progress bar를 통해서 이를 확인할 수 있다.
• 채팅시 참여자 모두에게 전달되는 채팅과 특정 사용자에게만 전달되는 private 채팅을 구분할 수 있다.

Send text messages - OpenVidu Docs

 

5. 연결 종료

참가자가 화상회의 방에서 나가면 세션이 종료되어야 한다. 이를 위해 session 객체가 사라질 때 leaveSession이 호출되어 연결을 끊고 참가자가 페이지를 나갈 수 있도록 하였다.

useEffect(()=>{
   return () => {
     leaveSession();
   };
},[session]);

const leaveSession = async() => {
    if (session) {
      session.disconnect();
    }
}

사실 이게 제대로 구현이 안되서 3시간정도를 날렸다.

 

기존 코드

기존 코드에서는 자꾸 session이 소멸되고, leaveSession이 호출되어 참가자의 연결이 제대로 끊어지지를 않았다.

useEffect(()=>{
   return () => {
     leaveSession();
   };
},[]);

 

변경 코드

변경 코드에서는 의존성 배열에 session을 넣어줬다. 사실 생각해보면 사용자가 페이지를 나가서 페이지 컴포넌트가 unmount될 때 leaveSession이 호출되어야 하는 것이 아니라, session이 사라질 때 leaveSession이 호출되어야 한다. 즉, session이 변경될 때마다 기존의 session을 정리해야 한다.

useEffect(()=>{
   return () => {
     leaveSession();
   };
},[session]);

 

 

📌화상회의

• Openvidu v2를 활용해서 화상회의, 채팅 기능을 구현했습니다.

문제 해결

• session 종료: 의존성 배열에 session을 추가하여 참가자가 화상회의 방에서 나갈 때 leaveSession이 호출되도록 하였습니다.