Communication

기본 설정

통신을 하기 전에 프로젝트 설정을 진행 합니다.​

개발

통신을 기능은 이용하기 위해서는 RemonCall 클래스를 이용합니다. RemonCall클래스의 connect() 함수를 이용하여 채널 생성 및 접속이 가능합니다.

전체적인 구성과 흐름은 아래를 참고하세요.​​

pageFlowpageStructure

View 등록

통화중 스스로의 모습을 보거나 상대방의 모습을 보기위한 뷰가 필요합니다. 자기 자신의 모습은 Local View, 상대방의 모습은 Remote View로 등록을 합니다.

<!-- local view -->
<video id="localVideo" autoplay muted></video>
<!-- remote view -->
<video id="remoteVideo" autoplay></video>

보다 더 자세한 내용은 아래를 참고하세요.

pageWeb - MediapageAndroid - MediapageiOS - Media

통화 걸기

connect() 함수에 전달한 channelId 값에 해당하는 채널이 존재하지 않으면 채널이 생성되고, 다른 사용자가 해당 채널에 연결 하기를 대기 하는 상태가 됩니다. 이때 해당 channelId로 다른 사용자가 연결을 시도 하면 연결이 완료 되고, 통신이 시작 됩니다.

// <video id="localVideo" autoplay muted></video>
// <video id="remoteVideo" autoplay></video>
let myChid

const config = {
  credential: {
    serviceId: 'MY_SERVICE_ID',
    key: 'MY_SERVICE_KEY'
  },
  view: {
    local: '#localVideo',
    remote: '#remoteVideo'
  }
}

const listener = {
  onConnect(channelId) {
    myChannelId = channelId
  },
  onComplete() {
    // Do something
  }
}

const caller = new Remon({ listener, config })
caller.connectCall()

통화 받기

connect() 함수에 접속을 원하는 channelId값을 넣습니다. 대기상태에 있던 사용자와 연결을 진행하고, 정상 연결이 완료되면 onComplete 콜백이 호출됩니다.

// <video id="localVideo" autoplay muted></video>
// <video id="remoteVideo" autoplay></video>
const config = {
  credential: {
    serviceId: 'MY_SERVICE_ID',
    key: 'MY_SERVICE_KEY'
  },
  view: {
    local: '#localVideo',
    remote: '#remoteVideo'
  }
}

const listener = {
  onComplete() {
    // Do something
  }
}

const callee = new Remon({ listener, config })
callee.connectCall('MY_CHANNEL_ID')

Callbacks

개발중 다양한 상태 추적을 돕기 위한 Callback을 제공 합니다.

  • 안드로이드 2.4.13, iOS 2.6.9 버전부터 콜백은 모두 UI Thread 에서 호출됩니다.

const listener = {
  onInit(token) {
    // UI 처리등 remon이 초기화 되었을 때 처리하여야 할 작업
  },

  onConnect(channelId) {
    // 통화 생성 후 대기 혹은 응답
  },

  onComplete() {
    // Caller, Callee간 통화 시작
  },

  onClose() {
    // 종료
  }
}

더 많은 내용은 아래를 참조 하세요.​

pageCallbacks

Channel

랜덤채팅등과 같은 서비스에서는 전체 채널 목록을 필요로 하게 됩니다. 이를 위한 전체 채널 목록을 제공합니다.

const remonCall = new Remon()
const calls = await remonCall.fetchCalls()

채널에 대한 더 자세한 내용은 아래를 참고하세요.​

pageChannel

종료

모든 통신이 끝났을 경우 꼭 RemonCast객체를 close()해주어야 합니다. close를 통해서 모든 통신자원과 미디어 스트림 자원이 해제됩니다.

const remonCall = new Remon()
remonCall.close()

기타

아래를 통해 보다 자세한 설정, 실 서비스를 위한 프렉티스등 다양한 내용을 확인해 보세요.

pageConfig/RemonConfigpageNetwork Environment

Last updated