Quick Start

Omnitalk SDK는 쉽고 간편하게 webrtc 기술을 이용할 수 있도록 만들어진 패키지입니다. Omnitalk SDK의 모든 API는 async ~ await 구조로 작성되었습니다. 요청이 실패하면 에러를 throw 합니다. 상세 API 사용법은 REACT_NATIVE API Reference를 참조바랍니다.

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 sdk = Omnitalk.getInstance();

2. 세션 생성

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

const [session, setSession] = useState('');
await sdk.createSession(user_id)
              .then((session: any) => setSession(session.session));

3. 룸 생성

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

import {DEFAULT_ROOM_TYPE} from 'omnitalk-rn-sdk';

const [roomId, setRoomId] = useState('');
await sdk.createRoom(DEFAULT_ROOM_TYPE.VIDEO_ROOM)
              .then((res: any) => setRoomId(res.room_id));

4. 룸 참여

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

await sdk.joinRoom(roomId);

5. 방송 시작 (video)

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

const [localStreamRef, setLocalStreamRef] = useState<typeof RTCView>({streamURL: ''});
await sdk.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;
      }
    };

    sdk?.on('event', eventListener);
    return () => {
      sdk?.off('event', eventListener);
    };
  }, []);

7. 방송 구독

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

const [remoteStreamRef, setRemoteStreamRef] = useState<typeof RTCView>({streamURL: ''});

await sdk?.subscribe(publisherSession, remoteStreamRef);

8. 음성 통화

1:1 음성 통화를 구현하기 위한 발신 기능은 offerCall API를 이용하여 구현합니다. 상세 기능 구현 예시는 Dev guide의 audio call 항목을 참조 바랍니다. 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 sdk.offerCall(CALL_TYPE.AUDIO_CALL, callee); //발신측

await sdk.answerCall();  // 착신측

await sdk.leave(caller); // 수신 거절

9. 영상 통화

1:1 영상 통화를 구현하기 위한 발신 기능은 offerCall API를 이용하여 구현합니다. 상세 기능 구현 예시는 Dev guide의 video call 항목을 참조 하시기 바랍니다. 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 sdk.offerCall(
          CALL_TYPE.VIDEO_CALL,
          callee,
	  false,
          localStreamRef,
          remoteStreamRef,
        );

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

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

10. 채팅 메시지

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

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

11. 방송 종료

방송을 종료하는 API입니다. 종료시키고 싶은 session id를 전달하면 수신 거절이나 강제 퇴장 등의 기능으로 활용할 수 있습니다. session id를 전달하지 않으면 자신의 방송을 종료하게 됩니다.

await sdk.leave();