diff options
Diffstat (limited to 'client-website/index.html')
| -rw-r--r-- | client-website/index.html | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/client-website/index.html b/client-website/index.html new file mode 100644 index 0000000..1f7f428 --- /dev/null +++ b/client-website/index.html @@ -0,0 +1,237 @@ +<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> |