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/video-chat/ |
<!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="video-chat.css">
<title>Video Chat</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>
<!-- ****** -->
<script type="text/javascript" src="../../../dependencies/js/utils.js"></script>
<!-- WCS JavaScript API -->
<script type="text/javascript" src="../../ConfigurationLoader.js"></script>
<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="video-chat.js"></script>
</head>
<body>
<!-- full size container -->
<div class="container-fluid">
<div class="row" style="max-width: 1024px">
<div class="col-sm-7 text-center">
<h1>Video Chat</h1>
<div id="notify" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title text-center text-info">Info</h3>
</div>
<div class="modal-body text-center">
<p class="text-primary">Please, setup url_ws_server param in flashphoner.xml according to your IP from properties.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<h2 id="notifyFlash" class="text-danger"></h2>
<!-- Connection fields -->
<fieldset id="connectionFieldSet" class="scheduler-border">
<!-- Include from connect-fieldset.html by jquery. See js file. -->
</fieldset>
<div class="row" style="margin-top: 20px">
<div class="col-sm-12">
<div class="form-group">
<div id="chat" style="overflow-y: scroll; height: 100px;" class="text-left form-control"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea id="message" class="form-control" rows="1" style="resize: none;"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-sm-offset-7">
<div class="pull-right">
<button id="sendBtn" type="button" class="btn btn-default" onclick="sendMessage(); return false;">Send</button>
</div>
</div>
</div>
</div>
<!-- Video block -->
<div class="col-sm-4 text-left fp-videoBlock participant free">
<div class="text-center text-info">
<span class="glyphicon fp-userState"></span>
<span class="p-login">Offline</span>
</div>
<!-- 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 text-center" id="videoControls">
<div class="row" style="margin-top: 20px">
<div class="col-sm-12">
<button id="publishBtn" type="button" class="btn btn-default">Start</button>
</div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-sm-12 text-center">
<span id="publishStatus"></span>
</div>
</div>
<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 class="col-sm-12 text-left" style="margin-top:20px">
<div class="form-group">
<label class="control-label col-sm-2" for="inviteLink">Invite Link</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inviteLink"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>