# 그룹통화 만들기(Web)

## 그룹통화란?

다수의 참여자가 통화에 참여하는 서비스를 위한 기능입니다. Remon SDK를 이용하여 통화 또는 방송 구현 경험이 있으면 이해에 도움이 됩니다. 통화 또는 방송 튜토리얼을 학습한 후에 그룹통화를 학습하기를 권장합니다.

## 그룹통화 샘플 앱

* <https://sample.remotemonster.com/conference.html>

## 가이드의 주요 내용

1. **그룹통화를 위한 방(room) 만들기**
2. **방의 참여자 목록 조회**
3. **각의 참여자와 연결 수립하기**
4. **방으로부터 참여자 입장(join), 퇴장(leave) 이벤트 수신**

## 그룹통화를 위한 방(room) 만들기

* 모든 시작은 Remon 클래스에서  시작합니다. Remon클래스의  객체를 생성하는  방법은 다른 페이지등을 통해 참고하세요.
* Remon객체를 생성하면 바로 방(ROOM)을 개설할 수 있습니다.

```
remon.createRoom("Room name");
```

* 위 코드는  'Room name'에 해당하는 방이름으로 그룹 통화방을 개설하는 코드입니다.
* 지정된 videoTag의 local  영상이  해당  방에  송출됩니다.  여기까지는  나의  영상을 Room에  송출하는 것까지 완료되는 것입니다.

## 방의 참여자 목록 조회

* 'room name' 방으로부터 참여자 목록을 조회합니다.&#x20;
* fetchRooms는 참여자 목록을 담은 배열을 리턴합니다. 배열의 각 항목은 id 속성을 갖고 있습니다.
* 참여자 목록은 앱 사용자 자신을 포함합니다. 나를 포함하여 총 3명이 방에 있으면, 3개의 항목이 조회됩니다.

```
var searchResult= await remon.fetchRooms("Room name");
searchResult.forEach( ({id}, i) => {
  // id에 대한  처리
};
```

* 앱 사용자 자신의 id를 확인하려면 onConnect 콜백을 이용합니다.

```
var listener= {
  onConnect(chid) {
    console.log(`My ID is ${chid} in the room`);
  },
}

// 또는, 연결이 진행된 후, getChannelId 메소드를 이용합니다.
// var myid = remon.getChannelId();


// 권장하는 방법은 아니지만, 연결이 진행된 후 Remon 객체에서도 확인할 수 있습니다.
// remon = new Remon({ config, listener });
// var myid = remon.context.channel.id;
```

* 이제 그룹 통화 방에 속해있는 모든 참여자의 채널id를 확보하였습니다.

## 각 참여자와 연결 수립하기

* 각 참여자와의 연결은 리모트몬스터의 방송을 이용합니다.
* 각 참여자의 id는 리모트몬스터 방송 채널ID입니다.
* 위에서 조회한 각 참여자의 채널ID에 대해 Remon 객체의 시청 메소드 joinCast를 호출합니다.
* 각 참여자별로 Remon 객체를 만들어야합니다. 하나의 Remon 객체를 이용하면 안 됩니다.

```
searchResult.forEach( ({id}, i) => {
  remon1.joinCast(id);
}
```

## 방으로부터 참여자 입장(join), 퇴장(leave) 이벤트 수신

* 그룹통화 중 수시로 참여자가 입장하고 퇴장할 수 있습니다. 참여자의 입장과 퇴장 이벤트 수신은 onRoomEvent 콜백을 이용합니다.

```
var listener= {
  onRoomEvent(evt){
    console.log('event type: '+ evt.event); // 'join' or 'leave'
    console.log('channel id: '+ evt.channel.id); // 퇴장한 참여자의 ID
  }
}
```

* 현재 지원하는 이벤트 종류는 join과 leave입니다. 이 이벤트를 통해 새롭게 들어온 채널과 종료된 채널을 실시간으로 알 수 있습니다.

자세한 이용 방법은 그룹통화 샘플 앱의 소스코드를 참고하시기 바랍니다.

<https://sample.remotemonster.com/conference.html>