react-native

Omnitalk React-Native SDK

옴니톡은 webRTC 표준 기술을 이용하여 web/app에서 쉽고 간편하게 실시간 통신을 구현할 수 있는 SDK입니다.

Feature Overview

feature	implemented	ios	android
Audio Call	✔️	✔️	✔️
Video Call	✔️	✔️	✔️
Chatting room	✔️	✔️	✔️
Audio Conference	✔️	✔️	✔️
Video Conference	✔️	✔️	✔️
AudioMute	✔️	✔️	✔️
VideoMute	✔️	✔️	✔️
Video Switch	✔️	✔️	✔️

Pre-Requisite

• 서비스 아이디 & 옴니톡 서비스 키

  • 옴니톡 홈페이지 를 방문하여 서비스 id와 서비스 key를 발급받아야 합니다.
  • 혹은 이곳 에서 1시간 동안 무료로 사용 가능한 테스트용 id, key를 발급받을 수 있습니다.

• 최소 지원 사양

  • android compileSdkVersion >= 33

  • ios platform >= 12.0

    
    

Getting Started

상세한 사용법은 여기를 참고하시면 됩니다.

0. 프로젝트 환경 설정

   react-native 프로젝트 작업 폴더를 만들고 ios, android 각각 장치 권한 설정을 마칩니다.

1. 옴니톡 객체 생성 발급받은 Service Id와 Service Key로 omnitalk 객체를 생성합니다. (Service Id와 Service Key는 console 페이지에서 발급 가능하며 노출되지 않도록 주의하여야 합니다.)

   import Omnitalk from 'omnitalk-rn-sdk';
   const SERVICE_ID = '발급받은 service id';
   const SERVICE_KEY = '발급받은 service key'; 
   Omnitalk.sdkInit(SERVICE_ID, SERVICE_KEY);
   const omnitalk = Omnitalk.getInstance();
   

2. 세션 생성 인수로 전달한 user_id의 세션을 생성하게 됩니다. user_id 생략시 Omnitalk 서버에서 임의의 id를 부여합니다.

   
   await omnitalk.createSession(user_id)
                 
   

3. 룸 생성 인수로 전달한 룸 타입의 방을 생성합니다.

   import {DEFAULT_ROOM_TYPE} from 'omnitalk-rn-sdk';
   
   await omnitalk.createRoom(DEFAULT_ROOM_TYPE.VIDEO_ROOM)
                 
   

4. 룸 참여 룸에 참여하게 되면 자동으로 오디오 방송을 시작하고 채팅 메시지를 주고 받을 수 있는 상태가 됩니다.

   await omnitalk.joinRoom(roomId);
   

5. 방송 시작 (video) 오디오 방송은 룸에 참여하는 것만으로 시작 가능하며 영상 방송은 자신의 방송 영상 스트림을 담을 객체를 전달해 방송을 발행하는 것으로 시작합니다. publish API호출이 성공하면 해당 방송의 세션 id가 담긴 객체를 리턴 받게 됩니다.

   const [localStreamRef, setLocalStreamRef] = useState<typeof RTCView>({streamURL: ''});
   await omnitalk.publish(localStreamRef)
   

6. 이벤트 메시지 수신 옴니톡 SDK에서 전달하는 이벤트 메시지 규격과 메시지 수신 방법은 여기를 참고하시기 바랍니다. 다음은 방송 이벤트 발생시 방송 세션을 저장하는 예시입니다.

   useEffect(() => {
       const eventListener = async (msg: any) => {
         console.log('Event Message : ', msg);
         switch (msg.cmd) {
           case 'RINGING_EVENT':
             setCaller(msg.caller);
             setCallee(msg.callee);
             break;
           case 'CONNECTED_EVENT':
             setLocalOn(true);
             break;
           case 'BROADCASTING_EVENT':
             setpublisherSession(msg.session);
             break;
         }
       };
   
       omnitalk?.on('event', eventListener);
       return () => {
         omnitalk?.off('event', eventListener);
       };
     }, []);
   

7. 방송 구독 구독하고자는 방송의 세션 id를 인수로 전달하면 해당 방송을 구독할 수 있습니다. 방송의 세션 id는 publish의 리턴 객체나 BROADCASTING_EVENT의 이벤트 메시지에서 확인할 수 있습니다.

   const [remoteStreamRef, setRemoteStreamRef] = useState<typeof RTCView>({streamURL: ''});
   
   await omnitalk?.subscribe(publisherSession, remoteStreamRef);
   

8. 음성 통화 1:1 음성 통화를 구현하기 위한 발신 기능은 offerCall API를 이용하여 구현합니다. 상세 call flow는 여기를 참조바랍니다. 세션이 만들어진 상태에서 call type과 착신 상대방인 callee의 user_id를 전달합니다. offerCall 호출이 성공하면 caller에게는 RINGBACK_EVENT가, callee에게는 RINGING_EVENT가 전달됩니다. callee측이 answerCall을 호출하면 caller, caller는 CONNECTED_EVENT를 수신하고 음성통화가 연결됩니다. callee는 leave API를 이용하여 수신거절할 수 있습니다. 상세 음성 통화 구현 예시는 여기를 참고바랍니다.

   import {CALL_TYPE} from 'omnitalk-rn-sdk';
   
   await omnitalk.offerCall(CALL_TYPE.AUDIO_CALL, callee); //발신측
   
   await omnitalk.answerCall();  // 착신측
   
   await omnitalk.leave(); // 수신 거절 및 통화 종료
   

9. 영상 통화 1:1 영상 통화를 구현하기 위한 발신 기능은 offerCall API를 이용하여 구현합니다. 상세 call flow는 여기를 참조바랍니다. 세션이 만들어진 상태에서 call type과 착신 상대방인 callee의 user_id, 그리고 각각의 영상 스트림 URL을 담을 객체를 전달합니다. offerCall 호출이 성공하면 caller에게는 RINGBACK_EVENT가, callee에게는 RINGING_EVENT가 전달됩니다. 착신측인 callee 또한 caller와 callee의 영상 스트림 URL을 담을 객체를 전달하여 answerCall을 호출하면 영상 통화가 연결됩니다.

   const [localStreamRef, setLocalStreamRef] = useState<typeof RTCView>({
       streamURL: '',
     });
     const [remoteStreamRef, setRemoteStreamRef] = useState<typeof RTCView>({
       streamURL: '',
     });
   
   await omnitalk.offerCall(
             CALL_TYPE.VIDEO_CALL,
             callee,
       false,
             localStreamRef,
             remoteStreamRef,
           );
   

   착신측은 RINGING_EVENT를 받고 answerCall API를 이용해 통화를 수락하거나 leave API를 이용해 거절할 수 있습니다.

   await omnitalk.answerCall(
                 CALL_TYPE.VIDEO_CALL,
                 caller,
                 localStreamRef,
                 remoteStreamRef,
               );
   

10. 채팅 메시지

    어떤 타입이든 룸에 참여하게 되면 채팅 메시지를 주고 받을 수 있습니다. sendMessage API를 이용하여 action type을 명시하면 룸 전체에 채팅 메시지 발송 및 특정 상대로의 귓속말 기능을 구현할 수 있습니다. 귓속말은 상대의 session id를 target 인수로 전달하면 됩니다.

    await omnitalk.sendMessage(MESSAGE_ACTION.SEND, text); // 룸 전체 메시지 전송
    await omnitalk.sendMessage(
                    MESSAGE_ACTION.WHISPER,
                    whispermsg,
                    target,
                  );  // 특정 상대에 귓속말 메시지 전송
    

11. 방송 종료

자신의 방송을 종료하는 API입니다. await omnitalk.leave();

Documentation

쉽고 자세한 문서를 제공하고 있습니다.

Issue

옴니톡을 사용하면서 발생하는 이슈나 궁금점은 issue 페이지를 이용해 주세요.

Example Projects

옴니톡 SDK로 구현된 간단한 기능 테스트 데모를 제공합니다.