JSFiddle - React, Tailwind, and code Playground
by bistri
HTML
<script src="https://docs.google.com/uc?export=view&id=1sAenjIRa62hqkU0O4ZrVdXz-86EFSO4_"></script>
<button id="startCallBt">Start Call</button>
<button id="endCallBt">End Call</button>
CSS
#endCallBt {
display: none;
}
JavaScript
var startCallBt = document.querySelector ( "#startCallBt" ),
endCallBt= document.querySelector ( "#endCallBt" );
var phoneNumber = "33680909078";
//var phoneNumber = "infinito";
function startCall () {
// initiate a new web2pstn session
web2pstn.init ( "38077edb", "4f304359baa6d0fd1f9106aaeb116f33", true )
.then ( () => {
// start a new phone call
// 1 argument: route-prefix + phone number
// 2 argument: audio tag parent node
web2pstn.call ( "outbound-it-" + phoneNumber, document.body )
.then ( call => {
// on negociating phone call
call.onConnecting = () => {
startCallBt.disabled = true;
}
// on phone call ready
call.onConnected = () => {
startCallBt.style.display = "none";
startCallBt.disabled = false;
endCallBt.style.display = "inline";
endCallBt.onclick = call.end.bind ( call );
}
// on ending phone call
call.onEnding = () => {
endCallBt.disabled = true;
}
// phone call has ended
call.onEnded = () => {
endCallBt.style.display = "none";
endCallBt.disabled = false;
startCallBt.style.display = "inline";
// end web2pstn session
web2pstn.close ()
.then ( () => {
// web2pstn session is closed
} );
}
} )
.catch ( error => {
// something went wrong when calling
console.log ( "Call Error:", error );
} )
} )
.catch ( error => {
// something went wrong when openning session
console.log ( "Session Error:", error );
} )
};
startCallBt.onclick = startCall;