Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /usr/local/FlashphonerWebCallServer/client/examples/demo/phone/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap css-->
<link rel="stylesheet" href="../../../dependencies/bootstrap/css/bootstrap.css">
<!-- custom css -->
<link rel="stylesheet" href="phone.css">
<title>Phone Video Minimal</title>
<!-- swfobject -->
<script type="text/javascript" src="../../../dependencies/swf/swfobject.js"></script>
<!--[if IE 8]>
<script type="text/javascript" src="../../../dependencies/ie8/objectkeys.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript" src="../../../dependencies/ie9/web_socket.js"></script>
<script type="text/javascript">
WEB_SOCKET_SWF_LOCATION = "../../dependencies/ie9/WebSocketMain.swf";
</script>
<script type="text/javascript" src="../../../dependencies/ie9/typedarray.js"></script>
<![endif]-->
<!-- JQuery -->
<script type="text/javascript" src="../../../dependencies/jquery/jquery-1.12.0.js"></script>
<script type="text/javascript" src="../../../dependencies/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="../../../dependencies/jquery/jquery.websocket.js"></script>
<script type="text/javascript" src="../../../dependencies/jquery/jquery.json.js"></script>
<!-- ****** -->
<!-- WCS JavaScript API -->
<script type="text/javascript" src="../../../Flashphoner.js"></script>
<!-- Bootstrap -->
<script src="../../../dependencies/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../dependencies/bootstrap/js/switch.js"></script>
<!-- Minimum script for calls -->
<script type="text/javascript" src="phone.js"></script>
<script>
/**
* Here we add Flashphoner API initialization code
*/
function initAPI() {
setURL();
f.addListener(WCSEvent.ErrorStatusEvent, errorEvent);
f.addListener(WCSEvent.ConnectionStatusEvent, connectionStatusListener);
f.addListener(WCSEvent.RegistrationStatusEvent, registrationStatusListener);
f.addListener(WCSEvent.CallStatusEvent, callStatusListener);
f.addListener(WCSEvent.OnCallEvent, callListener, this);
if (detectIE()) {
detectFlash();
}
// Configure remote and local video elements
var configuration = new Configuration();
configuration.remoteMediaElementId = 'remoteVideo';
configuration.localMediaElementId = 'localVideo';
configuration.elementIdForSWF = "flashVideoDiv";
configuration.pathToSWF = "../../../dependencies/flash/MediaManager.swf";
configuration.flashBufferTime = 0.0;
f.init(configuration);
// Hide WebRTC elements for IE and Flash based browsers. Hide flash elements for WebRTC based browsers.
if (webrtcDetectedBrowser) {
document.getElementById('remoteVideo').style.visibility = "visible";
document.getElementById('flashVideoWrapper').style.visibility = "hidden";
document.getElementById('flashVideoDiv').style.visibility = "hidden";
} else {
document.getElementById('remoteVideo').style.visibility = "hidden";
document.getElementById('flashVideoWrapper').style.visibility = "visible";
document.getElementById('localVideo').style.visibility = "hidden";
}
}
//New video call
function call() {
var call = new Call();
call.callee = field("callee");
// set true to make a video call
call.hasVideo = true;
currentCall = f.call(call);
}
//Answer with video
function answer() {
// set true to answer with video
currentCall.hasVideo = true;
f.answer(currentCall);
}
</script>
</head>
<body onload="initAPI()">
<!-- full size container -->
<div class="container-fluid">
<div class="row" style="max-width: 1024px">
<div class="col-sm-7 text-center">
<h1>Phone Video Minimal</h1>
<h2 id="notifyFlash" class="text-danger"></h2>
<!-- Connection fields -->
<fieldset id="callFieldSet" class="scheduler-border">
<!-- Include from call-fieldset.html by jquery. See js file. -->
</fieldset>
<!-- Call controls -->
<div id="callControls">
<!-- Include from call-controls.html. See js file. -->
</div>
</div>
<!-- Video block -->
<div class="col-sm-4 text-left fp-videoBlock">
<!-- 320x240 Flash Video Block -->
<div id="flashVideoWrapper" class="fp-flashVideoWrapper">
<div id="flashVideoDiv">
</div>
</div>
<!-- 320x240 WebRTC video block for remote video -->
<video id="remoteVideo" width="320" height="240" autoplay="" class="fp-remoteVideo"></video>
<!-- 80x60 WebRTC Self captured video block -->
<video id="localVideo" width="80" height="60" autoplay=""
class="fp-localVideo">
</video>
<!-- Mute video controls -->
<div class="fp-muteVideoControls" id="videoControls">
<div class="row row-space">
<div class="col-sm-6 fp-buttonVerticalAlign">
Mute Audio
</div>
<div class="col-sm-6">
<input id="muteAudioToggle" type="checkbox" disabled/>
</div>
</div>
<div class="row row-space">
<div class="col-sm-6 fp-buttonVerticalAlign">
Mute Video
</div>
<div class="col-sm-6">
<input id="muteVideoToggle" type="checkbox" disabled/>
</div>
</div>
<!-- Plug-in bootstrap-switch here -->
<script src="../../../dependencies/bootstrap/js/switch.js"></script>
<script>
var $muteAudioToggle = $("#muteAudioToggle");
$muteAudioToggle.change(function () {
if (this.checked) {
mute();
} else {
unmute();
}
});
$muteAudioToggle.bootstrapSwitch({
on: 'on',
off: 'off',
size: 'md'
});
var $muteVideoToggle = $("#muteVideoToggle");
$muteVideoToggle.change(function () {
if (this.checked) {
muteVideo();
} else {
unmuteVideo();
}
});
$muteVideoToggle.bootstrapSwitch({
on: 'on',
off: 'off',
size: 'md'
});
</script>
</div>
</div>
</div>
</div>
</body>
</html>