Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuyujulin
yuyujulin committed Sep 2, 2024
1 parent d423dd2 commit 7095b97
Show file tree
Hide file tree
Showing 34 changed files with 43,473 additions and 0 deletions.
5 changes: 5 additions & 0 deletions examples/2.click_to_call_phone/config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
let serverConfig = {
domain: 'audiocodes.com',
addresses: ['wss://webrtclab.audiocodes.com'],
iceServers: ['74.125.140.127:19302', '74.125.143.127:19302']
}
Binary file added examples/2.click_to_call_phone/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions examples/2.click_to_call_phone/phone.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
#panels {
max-width: 500px;
}

.panel,
#local_video,
#remote_video {
display: none;
}

#hangup_btn,
#cancel_outgoing_call_btn {
background-color: lightpink;
border-color: lightpink;
}
70 changes: 70 additions & 0 deletions examples/2.click_to_call_phone/phone.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<!--
Tutorial
Click to call phone
-->
<html>

<head>
<title>Click to call</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="phone.css">
<link rel="icon" href="favicon.png">
</head>

<body onload="documentIsReady()">
<!-- Check that browser is not IE -->
<script>
var ua = window.navigator.userAgent;
if (ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0) {
alert("Internet Explorer is not supported. Please use Chrome or Firefox");
}
</script>

<script src="../../js/ac_webrtc.min.js"></script>
<script src="config.js"></script>
<script src="phone.js"></script>
<!--
HTML components
-->
<div id="status_line">
</div>

<!-- All panels are hidden, except one -->
<div id="panels">
<div id="call_terminated_panel" class="panel">
<p>Thank you</p>
</div>
<div id="outgoing_call_panel" class="panel">
<fieldset>
<legend>calling</legend>
<p id="outgoing_call_user"></p>
<p id="outgoing_call_progress"></p>
<br>
<input id="cancel_outgoing_call_btn" type="button" value="Cancel">
</fieldset>
</div>

<div id="call_established_panel" class="panel">
<div>
<fieldset>
<legend>open call</legend>
<p id="call_established_user"></p>
<br>
<input id="hangup_btn" type="button" value="Hangup">
<br>
<input id="mute_audio_btn" type="button" value="Mute">
<br>
</fieldset>
</div>
</div>
</div>

<div id="video_view">
<video id="local_video" playsinline></video>
<video id="remote_video" autoplay playsinline></video>
</div>
</body>

</html>
226 changes: 226 additions & 0 deletions examples/2.click_to_call_phone/phone.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
'use strict';

/*
Tutorial
Simple click-to-Call phone
URL parameters:
'call' call to user name (or phone number). Must be set.
'caller' caller user name. Optional (default 'Anonymous')
'callerDN' caller display name. Optional (default 'Anonymous')
'server' Optional. Replace default SBC server address (from config.js) to the parameter value.
*/

let phone = new AudioCodesUA(); // phone API
let activeCall = null; // not null, if exists active call
let callTo; // call to user

// Run when document is ready
function documentIsReady() {
phone.setAcLogger(ac_log);
phone.setJsSipLogger(console.log);

ac_log(`------ Date: ${new Date().toDateString()} -------`);
ac_log(`AudioCodes WebRTC SDK. Simple click-to-call`);
ac_log(`SDK: ${phone.version()}`);
ac_log(`SIP: ${JsSIP.C.USER_AGENT}`);
ac_log(`Browser: ${phone.getBrowserName()} Internal name: ${phone.getBrowser()}`);

// Check WebRTC support.
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
let noWebRTC = 'WebRTC API is not supported in this browser !';
guiError(noWebRTC);
ac_log(noWebRTC);
return;
}

// Get call parameters from URL
callTo = getParameter('call');
if (callTo === null) {
let missedCallParameter = 'Missed "call" parameter in URL';
guiError(missedCallParameter);
ac_log(missedCallParameter);
return;
}

// For testing. Replace default SBC address to some other.
let server = getParameter('server', null);
if (server !== null) {
serverConfig.addresses = [server];
}

guiInit();

// Check devices: microphone must exists, camera is optional
// Note: the method implementation moved to phone API.
phone.checkAvailableDevices()
.then(() => {
let caller = getParameter('caller', 'Anonymous');
let callerDN = getParameter('callerDN', 'Anonymous');
initSipStack({ user: caller, displayName: callerDN, password: '' });
})
.catch((e) => {
ac_log('error', e);
guiError(e);
})
}

function ac_log() {
let args = [].slice.call(arguments)
console.log.apply(console, ['%c' + args[0]].concat(['color: BlueViolet;'], args.slice(1)));
}

function getParameter(name, defValue = null) {
let s = window.location.search.split('&' + name + '=')[1];
if (!s) s = window.location.search.split('?' + name + '=')[1];
return s !== undefined ? decodeURIComponent(s.split('&')[0]) : defValue;
}

function initSipStack(account) {
phone.setServerConfig(serverConfig.addresses, serverConfig.domain, serverConfig.iceServers);
phone.setAccount(account.user, account.displayName, account.password);

// Set phone API listeners
phone.setListeners({
loginStateChanged: function (isLogin, cause) {
switch (cause) {
case "connected":
ac_log('phone>>> loginStateChanged: connected');
guiMakeCall(callTo);
break;
case "disconnected":
ac_log('phone>>> loginStateChanged: disconnected');
if (phone.isInitialized()) // after deinit() phone will disconnect SBC.
guiError('Cannot connect to SBC server');
break;
case "login failed":
ac_log('phone>>> loginStateChanged: login failed');
break;
case "login":
ac_log('phone>>> loginStateChanged: login');
break;
case "logout":
ac_log('phone>>> loginStateChanged: logout');
break;
}
},

outgoingCallProgress: function (call, response) {
ac_log('phone>>> outgoing call progress');
document.getElementById('outgoing_call_progress').innerText = 'dzzz dzzz';
},

callTerminated: function (call, message, cause, redirectTo) {
ac_log(`phone>>> call terminated callback, cause=${cause}`);
if (call !== activeCall) {
ac_log('terminated no active call');
return;
}
activeCall = null;
guiWarning('Call terminated: ' + cause);
phone.deinit(); // Disconnect from SBC server.
guiShowPanel('call_terminated_panel');
},

callConfirmed: function (call, message, cause) {
ac_log('phone>>> callConfirmed');
guiInfo('');
let remoteVideo = document.getElementById('remote_video');
let vs = remoteVideo.style;
vs.display = 'block';
vs.width = vs.height = call.hasReceiveVideo() ? 'auto' : 0;
guiShowPanel('call_established_panel');
},

callShowStreams: function (call, localStream, remoteStream) {
ac_log('phone>>> callShowStreams');
let remoteVideo = document.getElementById('remote_video');
remoteVideo.srcObject = remoteStream; // to play audio and optional video
},

incomingCall: function (call, invite) {
ac_log('phone>>> incomingCall');
call.reject();
},

callHoldStateChanged: function (call, isHold, isRemote) {
ac_log('phone>>> callHoldStateChanged ' + isHold ? 'hold' : 'unhold');
}
});

guiInfo('Connecting...');
phone.init(false);
}

function onBeforeUnload() {
phone !== null && phone.isInitialized() && phone.deinit();
}

function guiInit() {
window.addEventListener('beforeunload', onBeforeUnload);
document.getElementById('cancel_outgoing_call_btn').onclick = guiHangup;
document.getElementById('hangup_btn').onclick = guiHangup;
document.getElementById('mute_audio_btn').onclick = guiMuteAudio;
}

function guiMakeCall(callTo) {
if (activeCall !== null)
throw 'Already exists active call';
document.getElementById('outgoing_call_user').innerText = callTo;
document.getElementById('outgoing_call_progress').innerText = '';
document.getElementById('call_established_user').innerText = callTo;
guiInfo('');
guiShowPanel('outgoing_call_panel');
activeCall = phone.call(phone.AUDIO, callTo); // Note: Can be used audio or video call.
}

function guiHangup() {
if (activeCall !== null) {
activeCall.terminate();
activeCall = null;
}
}

function guiMuteAudio() {
let muted = activeCall.isAudioMuted();
activeCall.muteAudio(!muted);
document.getElementById('mute_audio_btn').value = !muted ? 'Unmute' : 'Mute';
}

//--------------- Status line -------
function guiError(text) { guiStatus(text, 'Pink'); }

function guiWarning(text) { guiStatus(text, 'Gold'); }

function guiInfo(text) { guiStatus(text, 'Aquamarine'); }

function guiStatus(text, color) {
let line = document.getElementById('status_line');
line.setAttribute('style', `background-color: ${color}`);
line.innerHTML = text;
}
//--------------- Show or hide element -------
function guiShow(id) {
document.getElementById(id).style.display = 'block';
}

function guiHide(id) {
document.getElementById(id).style.display = 'none';
}

function guiIsHidden(id) {
let elem = document.getElementById(id);
let display = window.getComputedStyle(elem).getPropertyValue('display');
return display === 'none';
}

function guiShowPanel(activePanel) {
const panels = ['call_terminated_panel', 'outgoing_call_panel', 'call_established_panel'];
for (let panel of panels) {
if (panel === activePanel) {
guiShow(panel);
} else {
guiHide(panel);
}
}
}
20 changes: 20 additions & 0 deletions examples/2.click_to_call_phone/usage_1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<!--
Tutorial
Click-to-call example (with HTML link)
To use click-to-call phone please add HTML link to customer site.
This page can be in http or https server
phone.html page must be in https server
-->

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="favicon.png">

<a href="phone.html?call=SantaClaus">Click to call SantaClaus</a>
</body>
</html>
Loading

0 comments on commit 7095b97

Please sign in to comment.