In less than a year, the new social network Clubhouse has gained more than 6 million members - and everything continues to grow. What is the secret of such popularity?
Clubhouse — , . , Clubhouse , . . .
“ ” . () , , , - , , .
Clubhouse . , . , ? ?
, , , , – Clubhouse, . Voximplant .
, - Clubhouse Web SDK, .
, Voximplant SDK, Web, iOS, Android Flutter, React Native Unity. Unity, - .
VoxEngine
. 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 !