237 lines
11 KiB
HTML
237 lines
11 KiB
HTML
<html ng-app>
|
|
<head>
|
|
<title>Live Video Chat</title>
|
|
<script>
|
|
|
|
// Symple client options
|
|
CLIENT_OPTIONS = {
|
|
url: 'http://chat.lookshe.org', // Local testing: http://localhost:4500
|
|
transports: ['websocket', 'polling', 'flashsocket'], // Removing 'websocket' while testing
|
|
peer: {
|
|
// user: 'myusername',
|
|
// name: 'My Name',
|
|
group: 'public'
|
|
}}
|
|
|
|
// WebRTC config
|
|
// This is where you would add TURN servers for use in production
|
|
WEBRTC_CONFIG = {
|
|
'iceServers': [
|
|
{
|
|
'url': 'turn:chat.lookshe.org:3478',
|
|
'credential': 'threetwoone',
|
|
'username': 'onetwothree'
|
|
},
|
|
{
|
|
'url': 'stun:chat.lookshe.org:5555'
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
<script type="text/javascript" src="js/socket.io.min.js"></script>
|
|
<script type="text/javascript" src="js/angular.min.js"></script>
|
|
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
|
|
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="js/symple.js"></script>
|
|
<script type="text/javascript" src="js/symple.client.js"></script>
|
|
<script type="text/javascript" src="js/symple.player.js"></script>
|
|
<script type="text/javascript" src="js/symple.player.webrtc.js"></script>
|
|
<script type="text/javascript" src="js/helpers.js"></script>
|
|
<script type="text/javascript" src="js/app.js"></script>
|
|
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
|
|
<link rel="stylesheet" href="css/symple.player.css">
|
|
<link rel="stylesheet" href="css/app.css">
|
|
</head>
|
|
|
|
<body ng-controller="SympleChat">
|
|
|
|
<div id="loading-overlay" ng-show="isLoading">
|
|
<div class="icon">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container">
|
|
|
|
<nav id="nav">
|
|
<h1 id="logo"><a href="/">Live Video Chat</a></h1>
|
|
<div class="btn-group btn-group-sm pull-right" ng-show="isLoggedIn()">
|
|
<!--div class="btn-group btn-group-sm pull-right" ng-show="isLoggedIn() && !remoteVideoPeer && !localVideoPlaying"-->
|
|
<button type=button class="btn btn-default" id="logout-button" data-toggle="tooltip" data-placement="bottom" data-container="body" title="Logout" ng-click="logout()">Logout</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="alert alert-danger" ng-show="errorText" ng-bind="errorText">You have been disconnected from the server</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
|
|
<div id="login" ng-show="!isLoggedIn()" class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Login</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<form ng-submit="login()">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" ng-model="handle" value="auscaster" placeholder="Enter a name to login..." />
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-primary" type="submit">Login</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="roster">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">People</h3>
|
|
</div>
|
|
<ul class="list-group">
|
|
<li class="list-group-item list-group-item-warning" ng-show="!isLoggedIn()"><small>Please log in...</small></li>
|
|
<li class="list-group-item" ng-repeat="peer in peers">
|
|
<div class="btn-group btn-group-xs pull-right" ng-show="!isSelfUser(peer.user)">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
Action <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="javascript:void(0)" ng-click="setMessageTarget(peer.user)">Direct message</a></li>
|
|
<li><a href="javascript:void(0)" ng-click="startVideoCall(peer.user)" ng-show="!isSelfUser(peer.user) && !remoteVideoPeer && !localVideoPlaying">Video chat</a></li>
|
|
</ul>
|
|
</div>
|
|
<b>@{{peer.user}}</b>
|
|
<!--
|
|
<h4 class="list-group-item-heading">@{{peer.user}}</h4>
|
|
<p class="list-group-item-text">...</p>
|
|
-->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
|
|
<div id="video">
|
|
<div class="panel panel-default" id="panel-height">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Video</h3>
|
|
</div>
|
|
<div class="panel-body" id="panel-hover"></div>
|
|
<div class="panel-body" id="panel-to-hover">
|
|
<div class="hundertproz" id="video-fullscreen">
|
|
<div class="local-video-wrap">
|
|
<div class="local-video">
|
|
</div>
|
|
<button id="start-local-video" class="btn btn-primary" ng-click="startLocalVideo()" ng-show="remoteVideoPeer && !localVideoPlaying">Start video</button>
|
|
</div>
|
|
<div id="control-hover">
|
|
<div class="local-video-control-wrap container-fluid">
|
|
<div class="local-video-control">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-lg" id="toggle-audio-button" data-toggle="tooltip" data-placement="top" data-container="body" title="Toggle audio" ng-click="toggleAudio()">
|
|
<span class="button-audio glyphicon glyphicon-volume-up" area-hidden="true"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-lg" id="toggle-video-button" data-toggle="tooltip" data-placement="top" data-container="body" title="Toggle video" ng-click="toggleVideo()">
|
|
<span class="button-video glyphicon glyphicon-eye-open" area-hidden="true"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-lg" id="toggle-fullscreen-button" data-toggle="tooltip" data-placement="top" data-container="body" title="Toggle fullscreen" ng-click="toggleFullscreen()">
|
|
<span class="button-fullscreen glyphicon glyphicon-resize-full" area-hidden="true"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-lg" id="toggle-callend-button" data-toggle="tooltip" data-placement="top" data-container="body" title="End call" ng-click="toggleCallend2()">
|
|
<span class="button-callend glyphicon glyphicon-remove-circle" area-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="remote-video-wrap">
|
|
<div class="remote-video">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="incoming-call-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Incoming call...</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>You have an incoming video call from <span class="caller"></span></p>
|
|
<div class="btn-group btn-group-justified">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success accept">Accept</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger reject">Reject</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="outgoing-call-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class=modal-title">Outgoing call...</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>to <span class="callee"></span></p>
|
|
<p id="callee-rejected"><span class="rejected"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="messages">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Conversation</h3>
|
|
</div>
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<form id="post-message" ng-submit="sendMessage()">
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default dropdown-toggle direct-user" data-toggle="dropdown" type="button">@</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="javascript:void(0)" ng-click="setMessageTarget()">Send to everyone</a></li>
|
|
<li class="divider"></li>
|
|
<li ng-repeat="peer in peers" ng-show="!isSelfUser(peer.user)">
|
|
<a href="javascript:void(0)" ng-click="setMessageTarget(peer.user)">@{{peer.user}}</a>
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
<input type="text" class="form-control message-text" ng-model="messageText" placeholder="Type your message here" />
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="submit">Send!</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
<li class="list-group-item" ng-class="getMessageClass(message)" ng-repeat="message in messages">
|
|
<span class="time">{{message.time}}</span>
|
|
<span class="user">@{{message.user}}</span>
|
|
<span class="data">{{message.data}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
Built with <a href="http://sourcey.com/symple">Symple</a>,
|
|
<a href="http://socket.io">Socket.io</a>,
|
|
<a href="http://getbootstrap.com">Bootstrap</a> and
|
|
<a href="http://angularjs.org">AngularJS</a>.
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|