vertinho
Version:
Library to make conference apps and softphones through WebSockets with FreeSWITCH mod_verto.
191 lines (175 loc) • 7.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertinho</title>
<meta name="description" content="Simple demonstration of the Verto JS free source lib, making a video conference through a FreeSWITCH server.">
<meta name="author" content="Mazuh">
<style>
#main {
display: flex;
margin-bottom: 100px;
}
.dashboard {
margin-right: 100px;
}
.conference > * {
margin: auto;
}
#main-footer {
margin-top: 50px;
}
</style>
</head>
<body>
<div id="main">
<!-- left side -->
<div class="dashboard">
<h1>Vertinho, <small>the demo</small>.</h1>
<form id="create-verto-form" onsubmit="try { onCreateVertinhoClientFormSubmit(this); } catch(e) { console.error('verto config form error', e) } finally { return false; }">
<span>Server authentication:</span>
<br/>
<label for="login">Login:</label>
<input type="text" id="login" name="login" placeholder="user@domain" value="1008@cantina.freeswitch.org" required/>
<br/>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="password" value="1234" required/>
<br/>
<label for="socket-url">Socket URL:</label>
<input type="text" id="socket-url" name="socketUrl" placeholder="wss://your.server" value="wss://cantina.freeswitch.org/wss2" required/>
<br/>
<button type="submit" id="create-verto-btn">Create the VertinhoClient instance</button>
</form>
<form id="call-form" onsubmit="try { onDialerFormSubmit(this); } catch(e) { console.error('dialer form error', e) } finally { return false; }">
<span>Make the call:</span><br/>
<input type="search" id="extension" name="extension" value="3590" placeholder="Type an extension..."/>
<br/>
<button type="submit" id="call-btn">Call</button>
<button type="button" id="hangup-btn" onclick="onHangupClick(this)">Hangup</button>
<br/>
<button type="button" id="destroy-verto-btn" onclick="vertoInstance = null;">Destroy the VertinhoClient instance</button>
</form>
</div>
<!-- right side -->
<div class="conference">
<video id="local-video" autoplay="autoplay" width="250px"></video>
<video id="remote-video" autoplay="autoplay" width="800px"></video>
</div>
</div>
<aside>
Basically, there isn't any VertinhoClient error handling implemented, so pay attention to the browser's console.
</aside>
<footer id="main-footer">
(c) mazuh <a target="_blank" href="https://github.com/Mazuh/SimpleDemo-jQueryVertoJS">https://github.com/Mazuh/SimpleDemo-jQueryVertoJS</a>
</footer>
<!-- Verto dependencies -->
<script src="./bundle.js"></script>
<!-- Aesthetic interface behaviours -->
<script>
function onCreateVertinhoClientFormSubmit(form) {
createGlobalVertinhoClientInstance(form.login.value, form.password.value, form.socketUrl.value);
}
function onDialerFormSubmit(form) {
makeCall(form.extension.value);
}
function onHangupClick() {
if (vertoInstance !== undefined) {
vertoInstance.hangup();
}
}
setInterval(function() {
if (vertoInstance) {
document.getElementById('create-verto-form').style.display = 'none';
document.getElementById('call-form').style.display = '';
} else {
document.getElementById('create-verto-form').style.display = '';
document.getElementById('call-form').style.display = 'none';
}
if (vertoInstance && Object.keys(vertoInstance.calls).length) {
document.getElementById('extension').disabled = true;
document.getElementById('call-btn').disabled = true;
document.getElementById('hangup-btn').disabled = false;
document.getElementById('destroy-verto-btn').disabled = true;
} else {
document.getElementById('extension').disabled = false;
document.getElementById('call-btn').disabled = false;
document.getElementById('hangup-btn').disabled = true;
document.getElementById('destroy-verto-btn').disabled = false;
}
}, 150);
</script>
<!-- Bootstraping my own VertinhoClient instance. -->
<script>
console.log(new Date());
var vertoInstance, currentCall, conferenceManager;
function deactivateVideoFn(id) {
function deactivate() {
var element = document.getElementById(id);
if (element && element.srcObject && element.srcObject.active) {
element.style.display = 'none';
element.srcObject.getTracks().forEach(track => track.stop());
element.srcObject = null;
}
}
return deactivate;
}
function activateVideoFn(id) {
function activate(stream) {
var element = document.getElementById(id);
if (element && stream !== undefined) {
element.style.display = 'block';
element.srcObject = stream;
}
}
return activate;
}
function createGlobalVertinhoClientInstance(login, password, socketUrl) {
function bootstrap(status) {
vertoInstance = new VertinhoClient({
webSocket: {
login: login,
password: password,
url: socketUrl,
},
deviceParams: {
useMic: 'any',
useSpeak: 'any',
useCamera: 'any',
},
remoteVideo: 'remote-video',
localVideo: 'local-video',
}, {
onClientReady: (feedback) => console.log('Client ready', feedback),
onInfo: (info) => console.log('Info received', info),
onDisplay: (display) => console.log('Displaying remote video', display),
onCallStateChange: (diff) => console.log('Call state changed', diff),
}, {
onReady: x => console.log('Conference is ready', x),
onDestroyed: x => console.log('Conference destroyed', x),
onBootstrappedMembers: x => console.log('Received conference all members', x),
onAddedMember: x => console.log('Received new conference member', x),
onModifiedMember: x => console.log('Received conference member update', x),
onRemovedMember: x => console.log('Received conference member removed', x),
onChatMessage: x => console.log('Received conference chat message', x),
onInfo: x => console.log('Received conference info', x),
onModeration: x => console.log('Received conference moderation', x),
});
};
bootstrap();
}
function makeCall(extension) {
currentCall = vertoInstance.makeCall({
to: extension,
callerName: 'Vertinho Tester',
from: '1008',
},
{ // highly optional
playRemoteVideo: activateVideoFn('remote-video'),
stopRemoteVideo: deactivateVideoFn('remote-video'),
playLocalVideo: activateVideoFn('local-video'),
stopLocalVideo: deactivateVideoFn('local-video'),
});
};
</script>
</body>
</html>