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/streaming-ui/ |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="../../../dependencies/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style>
.fp-demoH1 {
font-size: 36px;
margin-top: 20px !important;
margin-left: 230px;
font-weight: 500;
text-align: left;
color:grey;
}
</style>
<!-- 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>
<!-- ****** -->
<!-- Other scripts -->
<script src="../../../dependencies/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../Flashphoner.js"></script>
<script type="text/javascript" src="../../ConfigurationLoader.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript" src="Streaming.js"></script>
<script type="application/javascript">
var streaming = new Streaming();
ConfigurationLoader.getInstance(function (configuration) {
trace("Configuration loaded");
configuration.localMediaElementId = 'localVideoPreview';
configuration.remoteMediaElementId = 'remoteVideo';
Flashphoner.getInstance().init(configuration);
streaming.init();
});
document.cancelFullScreen = document.webkitCancelFullScreen ||
document.mozCancelFullScreen;
function enterFullScreen() {
var elem = document.getElementById("remoteVideo");
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else {
/**
* On ESC pressed
*/
$(document).keyup(function (e) {
if (e.keyCode == 27) {
$('.videoDiv').css({'height': '480px', 'width': '640px'});
$('.panel-visit').css('margin-top', '439px');
$('#full').removeClass('ex-size-min').addClass('ex-size');
}
});
/**
* Full screen button
*
*/
document.getElementById('full').onclick = exitFullScreen;
var marHeight = screen.height - 41;
var playHeight = screen.height - 298;
var videoH = screen.height;
var videoW = screen.width;
$('.videoDiv').css({'height': '' + videoH + 'px', 'width': '' + videoW + 'px'});
$('.panel-visit').css('margin-top', '' + marHeight + 'px');
$('.info-anchor').css('margin-top', '' + playHeight + 'px');
$('#full').removeClass('ex-size').addClass('ex-size-min');
}
}
/**
* Full screen
*/
function exitFullScreen() {
document.cancelFullScreen();
$('.videoDiv').css({'height': '480px', 'width': '640px'});
$('.panel-visit').css('margin-top', '439px');
document.getElementById('full').onclick = enterFullScreen;
$('#full').removeClass('ex-size-min').addClass('ex-size');
$('.info-anchor').css('margin-top', '141px');
}
$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 4));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});
</script>
<head>
<title>WebRTC Live Video And Broadcasting Client For Live events and Webinars</title>
</head>
<body onload="init()">
<div id="video" class="video">
<h1 class="fp-demoH1">Streaming WebRTC</h1>
<div id="notify" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title text-center text-danger">Warning!</h2>
</div>
<div class="modal-body text-center">
<h2 class="text-primary">Your browser doesn't support WebRTC.</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="text-previu"><span></span></div>
<div class="info-previu"><span></span></div>
<!-- Main div for video -->
<div id="videoDiv" class="videoDiv">
<!-- Remote video-->
<video id="remoteVideo" autoplay class="player-communication-2"></video>
<!-- Local video preview-->
<video id="localVideoPreview" autoplay class="player-communication"></video>
<!-- Just black TV window without any elements -->
<div class="black-window"></div>
<!-- Play stream again if the stream has been stopped -->
<div class="play-stop">
<div class="button-play-stop">
<span></span>
<div></div>
</div>
<div class="info-anchor"><span id="tarop" data-clipboard-text=""></span></div>
</div>
<!-- WebRTC session is established and inbound stream is playing back -->
<div class="visit-translation">
<div class="icon-visit">
<span></span>
</div>
<div class="panel-visit">
<div class="full-align">
<div class="visit-code">
<span id="tarvisit" data-clipboard-text=""></span>
</div>
<div class="stop-y">
<div class="stop-text"></div>
</div>
<div id="full" class="ex-size" onclick="enterFullScreen()"></div>
</div>
</div>
</div>
<!-- WebRTC session is established and outbound stream is being publishing -->
<div class="publish-translation">
<div class="icon-translation">
<span></span>
</div>
<div class="panel-translation">
<div class="copy-code">
<span id="publishStreamName"></span>
<div class="copy-code-button" data-clipboard-target="publishStreamName"></div>
</div>
<div class="stop-x">
<div class="stop-text"></div>
</div>
</div>
</div>
<!-- WebRTC session establishment pre-loader for inbound playback stream -->
<div id="preload-visit" class="preload-visit">
<img src="images/preloader3.gif">
<div class="panel-bottom-visit">
<span>Processing...</span>
<div class="stop-z">
<div class="stop-text"></div>
</div>
</div>
</div>
<!-- WebRTC session establishment pre-loader for outbound publishing stream-->
<div id="preload-connect" class="preload-connect">
<img src="images/preloader2.gif">
<div class="panel-bottom">
<span>Processing...</span>
<div class="stop-x">
<div class="stop-text"></div>
</div>
</div>
</div>
<!-- The pre-loader is being used while Websocket connection -->
<div class="preload-intro">
<img src="images/preloader.gif">
<span>Connecting...</span>
</div>
<!-- Allow camera and microphone or cancel -->
<div id="allow" class="access-video">
<div class="access-img"></div>
<span></span>
</div>
<!-- Window with 'Start' stream button -->
<div class="connect-translation">
<span></span>
<div class="connect-img" id="publishButton"></div>
</div>
<!-- Flashphoner logo -->
<div class="flash-img" flag="ok" scrybe="ok"><img src="images/flashphoner.png"></div>
</div>
</div>
</body>
</html>