화상회의 시작하기

Flipflop 라이브러리는 Conference객체를 반환 받아 비디오 룸을 만들어 다양한 사람들과 비디오 채팅을 진행할 수 있습니다. 자신의 앱에 비디오 채팅 기능을 추가하고 싶다면 아래 단계를 따라 진행하시기 바랍니다.

비디오 화상회의

Conference 객체를 안에서 사용하는 기능은 크게 Video Room 안에서 사용하는 기능과 Video Room 밖에서 사용하는 기능으로 나뉩니다.

Video Room 밖에서 사용하는 대표적인 기능으로는 비디오 룸 생성/삭제, 비디오 리스트 조회, 비디오 룸 비밀번호 체크 등이 있습니다. 위의 기능은 일반적으로는 비디오 룸 밖에서 사용하지만 필요하다면 비디오 룸 안에서도 사용 가능합니다.

반면, Video Room 안에서 사용하는 기능은 반드시 Conference 객체안의 prepare함수와 start함수가 성공적으로 실행된 후에 사용 가능하여야 합니다. Video Room 안에서 사용하는 대표적인 기능로는 참여자 강퇴, 음소거, 카메라on/off 등이 있습니다.

위의 상황에 유의하여 화상회의 SDK를 사용하시기 바랍니다.

Conference 객체 화상회의 밖에서 사용하는 기능 명세서

Conference 객체 화상회의 안에서 사용하는 기능 명세서

1. 화상회의 객체 생성

우선, 화상회의를 시작하기 앞서 SDK에서 Conference 인스턴스를 생성합니다. Conference 객체는 비디오룸 생성, 삭제 등 화상회의 시작할 때 필요한 기능들을 담고 있습니다.

// 화상회의 객체 생성
const conference = sdk.getConference();

2. 비디오 룸 생성

Conference 객체를 생성했으면, 화상회의를 진행하기 위한 비디오 룸을 생성해야 합니다.

/**
 * this.conference.createRoom
 * @param {string} id 
 * @param {string} pin
 */
conference.createRoom(title, pin).then(() => {
    // 성공시 로직
  }).catch(() => {
    // 실패시 로직
  })

3. 비디오 룸 리스트 조회

비디오 룸이 제대로 생성이 되었다면 비디오 룸 리스트 조회 API를 통해 비디오 룸을 조회할 수 있습니다.

conference.getRooms().then((roomList) => {
    // 성공시 로직
  }).catch(() => {
    // 실패시 로직
  })

4. 비디오 룸 입장

비디오룸을 입장하기 위해서는 prepare함수와 start함수를 사용해야 합니다. prepare함수는 비디오 룸에서 사용하는 화상회의 콜백을 등록하고 비디오 오디오 설정들을 초기화해주며, 클라이언트에서 사용하는 브라우저의 지원여부를 체크합니다. start함수는 비디오 룸에 소켓으로 비디오 룸에 접송하여 자신의 비디오/오디오 리소스를 매개변수로 입력받은 비디오 Element에 송출하는 기능을 제공합니다.

 const ConferenceDelegate = {
    // 회의실 준비 이벤트
    onPrepare: () => {},
    // 회의실 참석 시작 이벤트
    onStart: (stream) => {},
    // 회의실 나가기 이벤트
    onStop: () => {},
    // 야누스 Room 소켓 접속 성공
    onConnect: () => {},
    // 야누스 Room 소켓 접속 실패
    onDisconnect: () => {},
    // 누군가 회의실에 비디오 송출을 하거나 끊을 때 이벤트
    onFeedsReceived: (feeds: MediaObject[]) => {},
    // 사용자 커스텀 이벤트 
    onEvent: (key) => {
      switch(key) {
        case "kicked":
          // 강퇴 이벤트
        case "destroyed":
          // 회의룸 종료 이벤트
      },
    }
}

const request = {
  roomId: "string",
  pin: "string",
  delegate: ConferenceDelegate,
  options: {
    useVideo: true, // 입장시 비디오 활성화 여부
    useAudio: true // 입장시 오디오 활성화 여부
  }
}

conference.prepare(request).then(async () => {
  const videoEl = document.getElementById("myvideo");
  const room = await conference.start(videoEl);
})

화상회의 Callback 명세서

• onPrepare()
  브라우저가 WebRtc를 지원하는지 체크, 화상회의 기본 설정 초기화, 콜백 등록합니다.
• onStart(stream)
  플러그인 등록, 회의실에 참가한 비디오 정보들 이용 가능, API 사용 가능
  
• onStop()
  화상회의 룸을 퇴장할 때 이벤트이며, Conference 객체의 stop() 함수 실행시 콜백으로 실행됩니다.
• onConnected()
  화상회의 룸에 소켓 연결 성공시 발생하는 이벤트입니다.
• onDisconnected()
  화상회의 룸에 소켓 연결 해제시 발생하는 이벤트입니다.
• onFeedsReceived(feeds)
  화상회의 룸에 비디오 송출이 들어오거나 비디오 송출을 중지하는 사람이 있으면 발생하는 이벤트입니다.
• onEvent(key, msg)
  강퇴 및 회의실 강제 삭제 등 사용자가 커스텀할 수 있는 이벤트 콜백을입니다.