옴니톡은 WebRTC 기반의 통신 플랫폼을 제공합니다. 자사의 서비스로 간편하게 통신 서비스를 개발 할 수 있도록 잘 갖추어진 SDK를 제공합니다. 매일 1시간 동안 무료로 사용 가능한 테스트키도 발급해 드리니 많은 이용 부탁드립니다. 감사합니다 :D
안녕하세요 😀 옴니톡 입니다. 오늘은 옴니톡 SDK를 이용해서 어떻게 음성회의실을 구현할 수 있는지 설명해 보고자 합니다. Javascript로 구현 된 음성 회의실 데모는 이 곳에서 예제 코드는 이 곳에서 확인 가능합니다.
그럼 쉽고 간단하게 음성 회의실을 구현하러 가보실까요?
*참고 아래의 글은 음성 회의실 기능 개발에 대한 레퍼런스를 제공하며, 인원수 제한없는 로드밸런싱 기술이 적용됩니다.
*feature: html, vanila js
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가지 입니다.
전체 코드를 살펴보고 세부적인 기능을 설명합니다. 설명의 편의성을 위해 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
}
})
const session = await omnitalk.createSession(user_name: optional);
//리턴값은 세션 아이디이며, 세션이 정상적으로 생성되면 onmessage에 "SESSION_EVENT" 메시지가 전달됩니다.
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()을 호출하면됩니다. 이때 반드시 입장할 방의 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>`);
})
});
서비스 키를 발급받는다. 발급 받은 서비스 키로 옴니톡 객체를 생성한다.
옴니톡의 모든 함수는 async - await 구조이며, 응답은 onmessage 내에서 이벤트 메시지로 전달 받는다.
omnitalk.createSession()을 통해서 세션을 초기화한다. 세션이 초기화 되면 자동으로 옴니톡 서버와 통신이 이루어지며
omnitalk 라이브러리가 제공하는 모든 함수의 사용이 가능하다.
omnitalk.createRoom()을 통해서 영상 회의실을 생성할 수 있다. 인수로는 room_type을 전달한다. 생성된 방의 ID를 리턴한다.
omnitalk.roomList()를 통해서 생성된 모든 방의 목록을 조회할 수 있다. 모든 방의 정보를 리턴한다.
omnitalk.joinRoom()을 통해서 특정 방에 참여할 수 있다. 인수로 참여하고 싶은 방의ID를 전달한다.
omnitalk.partiList()를 통해서 방에 참여한 모든 사용자을 조회할 수 있다. 참여중인 사용자의 정보를 리턴한다.
omnitalk.publish()를 호출하면 로컬의 음성을 송출이 시작된다.
여기까지 옴니톡 SDK와 html, vanila js만 사용하여 음성 회의실 기능을 구현해 보았는데 어떠셨나요? 정말 간단하지 않나요? 서비스키를 발급 받아서 객체를 생성한 후 직관적인 함수들만 호출해주면 정말 간단하게 통신 서비스가 구현 된답니다😀 글을 읽으시면서 궁금한 점이 있거나 구현 시 어려운 부분이 있다면 언제든지 댓글 남겨주세요 친절하게 설명해 드리겠습니다. 감사합니다!
대표번호: 1533-5251
email: jason@omnistory.net