Javascript Developer Guide - Audio Conference

Omnitalk·2023년 5월 25일
2
post-thumbnail

옴니톡은 WebRTC 기반의 통신 플랫폼을 제공합니다. 자사의 서비스로 간편하게 통신 서비스를 개발 할 수 있도록 잘 갖추어진 SDK를 제공합니다. 매일 1시간 동안 무료로 사용 가능한 테스트키도 발급해 드리니 많은 이용 부탁드립니다. 감사합니다 :D


안녕하세요 😀 옴니톡 입니다. 오늘은 옴니톡 SDK를 이용해서 어떻게 음성회의실을 구현할 수 있는지 설명해 보고자 합니다. Javascript로 구현 된 음성 회의실 데모는 이 곳에서 예제 코드는 이 곳에서 확인 가능합니다.


그럼 쉽고 간단하게 음성 회의실을 구현하러 가보실까요?


*참고 아래의 글은 음성 회의실 기능 개발에 대한 레퍼런스를 제공하며, 인원수 제한없는 로드밸런싱 기술이 적용됩니다.
*feature: html, vanila js


전체 코드 작성


HTML 문서 작성

index.html 문서를 작성하고 아래의 Omnitalk SDK CDN 주소를 추가합니다.

https://cdn.jsdelivr.net/npm/omnitalk-js-sdk@latest/omnitalk.min.js

그 후 음성 회의실을 생성하고 참여하는 두개의 버튼을 추가합니다.

예제 | index.html

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/omnitalk-js-sdk@latest/omnitalk.min.js"></script>
    <script src="audio-conference/conference.js"></script>
  </head>
  <body>
    <input type="text" id="roomName" />
    <button type="button" id="regiBtn">음성 컨퍼런스 생성</Button>
    <input type="text" id="roomId" />
    <button type="button" id="joinBtn">컨퍼런스 참여</Button>
 
    <div id=log></div>
  </body>
</html>
 

HTML문서에서 필수 구현 요소는 2가지 입니다.

  • 컨퍼런스 등록버튼 : room을 생성하기 위한 버튼입니다.
  • 컨퍼런스 참여버튼 : 세션생성 이후 roomList()를 이용하여 조회되는 모든 컨퍼런스 중 이용하고자 하는 컨퍼런스에 참여하기 위한 버튼입니다.

JS 문서 작성

전체 코드를 살펴보고 세부적인 기능을 설명합니다. 설명의 편의성을 위해 javascript 파일은 call.js에 정의합니다.

예제 | call.js

'use strict'
window.onload = async function(){
    // pass argument(s)
    // service id for web
    // service id, service key for app
    const omnitalk = new Omnitalk("service_id","service_key");
    omnitalk.onmessage = async (evt) => {
        const log = document.querySelector("#log");
        switch (evt.cmd) {
            case "SESSION_EVENT":
                log.insertAdjacentHTML('beforeend', `<p>Session: ${evt.session}</p>`);
                break;
            case "BROADCASTING_EVENT":
                log.insertAdjacentHTML('beforeend', `<p>Join: ${evt.user_id}</p>`);
                break;
            case "LEAVE_EVENT":
                log.insertAdjacentHTML('beforeend', `<p>Bye: ${evt.session}</p>`);
                break;
        }
    }
 
    // start session. create web socket
    const session = await omnitalk.createSession();
 
    const regiBtn = document.querySelector("#regiBtn");
    const joinBtn = document.querySelector("#joinBtn");
 
    
    regiBtn.addEventListener("click", async function() {
        const roomName = document.getElementById('roomName').value;
        const roomObj = await omnitalk.createRoom("audioroom", roomName);
        const roomlist = await omnitalk.roomList("audioroom");
        log.insertAdjacentHTML('beforeend', `<p>Audio RoomId: ${roomObj.room_id}</p>`);
 
        roomlist.map((item, index) => {
            log.insertAdjacentHTML('beforeend', `<p>Roomlist-${index}: ${item.subject}, ${item.room_id}</p>`);
        })
        regiBtn.disabled = true;
        document.getElementById("roomId").value = roomObj.room_id;
    });
 
    joinBtn.addEventListener("click", async function() {
        const roomId = document.getElementById('roomId').value;
        const result = await omnitalk.joinRoom(roomId);
        const pubResult = await omnitalk.publish("audiocall", false);
        const partilist = await omnitalk.partiList(roomId);        
 
        partilist.map((item, index) => {
            log.insertAdjacentHTML('beforeend', `<p>Participant-${index}: ${item.user_id}</p>`);
        })
    });
}





전체 코드 설명

선행 작업: 서비스 키 발급

옴니톡의 통신 서비스를 사용하기 위해서는 서비스 키가 반드시 필요합니다. 회원가입이 승인된 후 발급 받거나, 1시간 동안 사용 가능한 임시 테스트키를 발급받아 주세요. 임시 테스트키 발급은 https://omnitalk.io/demo/audio 에서 진행할 수 있습니다.

옴니톡 객체 생성과 이벤트 메시지

옴니톡 SDK는 통신 서비스를 제공하기 위해 Offer-Answer 구조로 설계되어 있으며, 이를 위해 반드시 async, await 구조를 지원하여야 합니다. 옴니톡 객체가 정상적으로 생성되고 세션이 초기화 되면 이벤트 메시지를 통해서 통신에 대한 모든 응답을 받을 수 있습니다.

예제 | call.js

//omnitalk 객체 생성 (웹용은 서비스 아이디만 넣으셔도 무방합니다. app은 모두 필요)
const omnitalk = new Omnitalk('service_id','service_key');

 
omnitalk.onmessage = async (evt) => {
            
 // ... Event Message
            
    }
        })
  1. 발급받은 Service ID로 Omnitalk 객체를 생성합니다.
  2. 객체가 생성되었다면 omnitalk.onmessage에 특정 이벤트가 발생했을 때 처리하고 싶은 내용을 작성하면 됩니다.
    옴니톡에서 응답하는 메시지의 목록들은 API reference에 정리되어 있습니다.


세션 생성: createSession()


 const session = await omnitalk.createSession(user_name: optional);
 //리턴값은 세션 아이디이며, 세션이 정상적으로 생성되면 onmessage에 "SESSION_EVENT" 메시지가 전달됩니다.

createSession() 메소드를 호출하여 사용자의 세션을 만듭니다. 세션이 정상적으로 생성되면 자동으로 옴니톡 서버와의 통신이 시작됩니다. createSession() 메소드를 호출할 때, 인수로 사용자를 구분하는 값(user_name: optional)을 전달할 수 있습니다. 아무런 값도 넣어주지 않으면 옴니톡에서 임의의 랜덤값을 배정합니다. createSession()의 리턴값은 세션 아이디이며, 세션이 정상적으로 생성되면 onmessage에 "SESSION_EVENT" 메시지가 전달됩니다.

방 만들기: createRoom()

createRoom() 메소드는 인수로 room_type을 전달 받습니다. 예를 들어 "audioroom"를 전달하면 음성 회의실이 "videoroom"을 전달하면 영상 회의실이 생성됩니다. 두번째 인수인 room_name은 optional입니다. 방을 만든 후에는 해당 방의 ID가 담긴 객체를 반환합니다. 또한 생성된 모든 방의 정보는 roomList() 메소드를 통해 조회 가능합니다.

   regiBtn.addEventListener("click", async function() {
        const roomName = document.getElementById('roomName').value;
        const roomObj = await omnitalk.createRoom("audioroom", roomName);
        const roomlist = await omnitalk.roomList("audioroom");
        log.insertAdjacentHTML('beforeend', `<p>Audio RoomId: ${roomObj.room_id}</p>`);
 
        roomlist.map((item, index) => {
            log.insertAdjacentHTML('beforeend', `<p>Roomlist-${index}: ${item.subject}, ${item.room_id}</p>`);
        })
        regiBtn.disabled = true;
        document.getElementById("roomId").value = roomObj.room_id;
        })



방 참여하기: joinRoom()

생성된 오디오 회의실에 참여하고 싶다면 joinRoom()을 호출하면됩니다. 이때 반드시 입장할 방의 ID를 인수로 전달해 주어야 합니다. 해당 회의실에 참여 중인 사용자의 목록을 조회하고 싶다면 partiList()메서드를 호출하면 됩니다. 방에 정상적으로 입장 되었다면publish('audiocall') 메소드를 호출합니다. publish는 로컬의 음성을 송출하는 메서드입니다. 인수로는 필수적으로 call_type을 전달 받습니다.

 joinBtn.addEventListener("click", async function() {
        const roomId = document.getElementById('roomId').value;
        const result = await omnitalk.joinRoom(roomId);
        const pubResult = await omnitalk.publish("audiocall", false);
        const partilist = await omnitalk.partiList(roomId);        
 
        partilist.map((item, index) => {
            log.insertAdjacentHTML('beforeend', `<p>Participant-${index}: ${item.user_id}</p>`);
        })
    });



Summary

  1. 서비스 키를 발급받는다. 발급 받은 서비스 키로 옴니톡 객체를 생성한다.

  2. 옴니톡의 모든 함수는 async - await 구조이며, 응답은 onmessage 내에서 이벤트 메시지로 전달 받는다.

  3. omnitalk.createSession()을 통해서 세션을 초기화한다. 세션이 초기화 되면 자동으로 옴니톡 서버와 통신이 이루어지며

    omnitalk 라이브러리가 제공하는 모든 함수의 사용이 가능하다.

  4. omnitalk.createRoom()을 통해서 영상 회의실을 생성할 수 있다. 인수로는 room_type을 전달한다. 생성된 방의 ID를 리턴한다.

  5. omnitalk.roomList()를 통해서 생성된 모든 방의 목록을 조회할 수 있다. 모든 방의 정보를 리턴한다.

  6. omnitalk.joinRoom()을 통해서 특정 방에 참여할 수 있다. 인수로 참여하고 싶은 방의ID를 전달한다.

  7. omnitalk.partiList()를 통해서 방에 참여한 모든 사용자을 조회할 수 있다. 참여중인 사용자의 정보를 리턴한다.

  8. omnitalk.publish()를 호출하면 로컬의 음성을 송출이 시작된다.



여기까지 옴니톡 SDK와 html, vanila js만 사용하여 음성 회의실 기능을 구현해 보았는데 어떠셨나요? 정말 간단하지 않나요? 서비스키를 발급 받아서 객체를 생성한 후 직관적인 함수들만 호출해주면 정말 간단하게 통신 서비스가 구현 된답니다😀 글을 읽으시면서 궁금한 점이 있거나 구현 시 어려운 부분이 있다면 언제든지 댓글 남겨주세요 친절하게 설명해 드리겠습니다. 감사합니다!

Omnitalk 홈페이지 바로가기

대표번호: 1533-5251
email: jason@omnistory.net

profile
옴니톡의 기술 블로그입니다.

0개의 댓글