Меньше чем за год новая социальная сеть Clubhouse набрала больше 6 миллионов участников — и всё продолжает расти. В чём же секрет такой популярности?
Clubhouse — принципиально новый формат социальных сетей, такого ещё не было. Во время пандемии людям стало не хватать живого общения, поэтому в Clubhouse всё общение происходит голосом, через так называемые комнаты. Никаких привычных нам сообщений и диалогов. Всё общение происходит в реальном времени.
Комнаты могут быть закрытыми “для своих” или открытыми для всех желающих. Создатель (модератор) комнаты сам выбирает, кто может говорить, а присоединившиеся участники могут поднять руку, чтобы выразить желание что-то сказать, и если модератор захочет, включит желающему микрофон.
Однако попасть в Clubhouse могут не все. В настоящий момент официальное приложение доступно лишь владельцам айфонов, а зарегистрироваться можно только по приглашению от уже зарегистрированного пользователя. Но что, если у меня андроид? Или я хочу сидеть в соцсетях с компьютера?
Можно, конечно, терпеливо ждать, когда они решат выпустить версию для андроидов и десктопную версию, а можно поступить креативно – написать свой Clubhouse, с блэкджеком записью разговоров и поддержкой любых платформ. А Voximplant поможет с этим.
В этой статье я покажу, как можно создать комнату-конференцию наподобие Clubhouse для Web SDK, в качестве клиента я буду использовать браузер.
Обратите внимание, что Voximplant поддерживает множество SDK, начиная с Web, iOS, Android и заканчивая Flutter, React Native и даже Unity. То есть если вы пишете игру на Unity, есть возможность встроить аудио- или даже видеочат прямо в неё.
Настройки VoxEngine
Создаём комнату. Заходим в свой аккаунт Voximplant (или регистрируем новый) и создаём там приложение, нового пользователя для авторизации и начинаем писать сценарий.
Сначала подключим модуль конференций Voximplant и обработаем отключение участников:
require(Modules.Conference)
let owner = null;
const onEndpointDisconnected = (event)=>{
const members = conference.getList();
if(members.length === 1){
VoxEngine.terminate();
return;
}
}Затем обработаем проверку разрешений:
const checkPermissions = ({call,headers}) =>{
return new Promise((resolve)=>{
setTimeout(()=>{resolve(true)},500);
});
}Создание новой конференции и подключение нового участника к комнате:
let logURL = ''; // for debug reason
let conference = null;
VoxEngine.addEventListener(AppEvents.Started, event => {
logURL = event.logURL;
conference = VoxEngine.createConference({hd_audio:true});
})
VoxEngine.addEventListener(AppEvents.CallAlerting, async event => {
const permissions = await checkPermissions(event);
if(permissions) {
event.call.addEventListener(CallEvents.Disconnected, onEndpointDisconnected);
event.call.answer();
conference.add({
call: event.call,
displayName: event.headers['X-Name'],
mode: "FORWARD",
direction: "BOTH",
scheme: event.scheme
});
if(conference.getList().length === 1){
owner = conference.getList()[0].id();
conference.getList()[0].getCall().sendMessage('owner');
}
conference.get(owner).getCall()
.sendMessage(conference.getList().length);)
} else {
event.call.hangup({'X-Reason':'DENIED'});
}
});На этом с настройкой VoxEngine всё.
Настройка клиента
Далее перейдём к клиентской части. Мы используем Web SDK, так что клиент будет представлять собой HTML-страницу. Кнопки управления конференцией скроем до инициализации SDK:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hidden {
display: none !important;
}
</style>
<meta charset="UTF-8">
<title>The demo</title>
</head>
<body>
<div id="btns" class="hidden">
<p id="myname">Avi</p>
<button id="viewer">Join as listener</button>
<button id="speaker">Join as speaker</button>
<button id="leave" disabled>Leave</button>
</div>
<div id="audio"></div>
<h3>Current speakers <span id="countSpeakers">0</span></h3>
<div id="endpoints"></div>
</body>
<script src="*****"></script>Далее самое интересное. Пишем сценарий в теге <script>. Для начала инициализируем наш SDK, авторизуемся и отобразим кнопки:
<script>
// sdk init
const sdk = VoxImplant.getInstance();
let user = 'user*****';
const init = async () => {
await sdk.init({ showDebugInfo: true, serverIp: 'url*****' });
await sdk.connect();
await sdk.login(`${user}@app**.acc**.voximplant.com`, 'pass*****');
}
init().then(() => {
document.getElementById('btns').classList.remove('hidden');
});Задаём нужные константы для конференции. Имя пользователя для участника комнаты я возьму из тега с id=”myname”. Затем определим, когда видны определённые кнопки:
let currentCall;
let currentRole;
let countSpeakers = 0;
const confNumber = 'Test room';
const speakerBtn = document.getElementById('speaker');
const viewerBtn = document.getElementById('viewer');
const leaveBtn = document.getElementById('leave');
document.getElementById('myname').innerText = myName;
let setRole = (role) => {
currentRole = role;
if(role === 'speaker') {
speakerBtn.disabled = true;
leaveBtn.disabled = false;
viewerBtn.disabled = false;
}
if(role === 'viewer') {
speakerBtn.disabled = false;
leaveBtn.disabled = false;
viewerBtn.disabled = true;
}
if(role === 'start') {
speakerBtn.disabled = false;
viewerBtn.disabled = false;
leaveBtn.disabled = true;
}
}Обработаем завершение конференции:
let endCall = () => {
if(currentCall && currentCall.state() !== 'ENDED') {
document.getElementById('endpoints').innerText = '';
currentCall.hangup();
setRole('start');
}
}Обработаем добавление нового участника в комнату и удаление из нее:
let onEndpointAdded = (e) => {
console.warn('Endpoint added', e.endpoint.id);
const nameTable = document.getElementById('endpoints');
let p = document.createElement('p');
p.id = e.endpoint.id;
p.innerText = `Name: ${e.endpoint.displayName}, id: ${e.endpoint.id}`;
nameTable.append(p);
document.getElementById('countSpeakers').innerText = countSpeakers + 1;
e.endpoint.addEventListener(VoxImplant.EndpointEvents.RemoteMediaAdded, (ev)=> {
console.warn('RemoteMediaAdded', ev.mediaRenderer);
const nodeCall = document.getElementById('audio');
ev.mediaRenderer.render(nodeCall);
})
e.endpoint.addEventListener(VoxImplant.EndpointEvents.RemoteMediaRemoved, (ev)=>{
console.warn(`Endpoint ${e.endpoint.id} media removed ${ev.mediaRenderer}`);
})
// ENDPOINT REMOVED
e.endpoint.addEventListener(VoxImplant.EndpointEvents.Removed, (ev)=>{
console.warn(`Endpoint ${e.endpoint.id} removed`);
let removeP = document.getElementById(e.endpoint.id);
nameTable.removeChild(removeP);
})
}Обрабатываем действие по кнопке выхода из комнаты и другие события:
const setCall = () => {
leaveBtn.onclick = endCall;
currentCall.addEventListener(VoxImplant.CallEvents.EndpointAdded, onEndpointAdded);
currentCall.addEventListener(VoxImplant.CallEvents.MessageReceived, (e) => {
console.warn('MessageReceived', e.text);
});
//handle connection
currentCall.addEventListener(VoxImplant.CallEvents.Connected, () => {
console.warn(`Call connected successfully`);
});
//other call event listeners
currentCall.addEventListener(VoxImplant.CallEvents.Disconnected, () => {
console.warn(`Call disconnected`);
endCall();
});
currentCall.addEventListener(VoxImplant.CallEvents.Failed, (e) => {
console.warn(`Call failed`);
endCall();
});
}И напоследок обработаем кнопки, которые задают роль участника комнаты (говорящий или слушатель):
speakerBtn.onclick = async () => {
document.getElementById('endpoints').innerText = '';
if(currentCall) {
document.getElementById('endpoints').innerText = '';
await currentCall.hangup();
}
setTimeout(() => {
setRole('speaker');
currentCall = sdk.callConference({
number: confNumber,
extraHeaders: {'X-Name': myName}
});
setCall();
}, 300)
}
viewerBtn.onclick = async () => {
if(currentCall) {
document.getElementById('endpoints').innerText = '';
await currentCall.hangup();
}
setTimeout(() => {
setRole('viewer');
currentCall = sdk.joinAsViewer(confNumber);
setCall();
}, 300)
}
</script>
</html>Готово. На выходе получаем комнату-аудиоконференцию, в которой участники могут быть говорящими или просто слушателями, управление ролями происходит с помощью кнопок, а ниже виден список говорящих с их именами и ID.
Остаётся только сделать базу данных пользователей и комнат, красивый выделяющийся интерфейс — и ваш собственный конкурент Clubhouse для любой платформы готов!
