diff options
Diffstat (limited to 'website/mic/index.html')
| -rw-r--r-- | website/mic/index.html | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/website/mic/index.html b/website/mic/index.html new file mode 100644 index 0000000..1d9b16f --- /dev/null +++ b/website/mic/index.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"/> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Streaming with feedback</title> +<script type="text/javascript" src="../js/webrtc-adapter/adapter.min.js" ></script> +<script type="text/javascript" src="../js/jquery/jquery.min.js" ></script> +<script type="text/javascript" src="../js/jquery-blockui/jquery.blockUI.js" ></script> +<script type="text/javascript" src="../js/bootstrap/js/bootstrap.min.js"></script> +<script type="text/javascript" src="../js/bootbox/bootbox.min.js"></script> +<script type="text/javascript" src="../js/spin.js/spin.min.js"></script> +<script type="text/javascript" src="../ext/toastr.min.js"></script> +<script type="text/javascript" src="../js/janus/janus.min.js" ></script> +<script type="text/javascript" src="../mic.js"></script> +<link rel="stylesheet" href="../js/bootswatch/cerulean/bootstrap.min.css" type="text/css"/> +<link rel="stylesheet" href="../css/style.css" type="text/css"/> +<link rel="stylesheet" href="../fonts/font-awesome/css/font-awesome.min.css" type="text/css"/> +<link rel="stylesheet" href="../ext/toastr.min.css"/"> +</head> +<body> + +<div class="container"> + <div class="row"> + <div class="col-md-12"> + <div class="page-header"> + <h1>Streaming with feedback + <button class="btn btn-default" autocomplete="off" id="start">Start</button> + </h1> + </div> + <div class="container" id="details"> + <div class="row"> + <div class="col-md-12"> + <h3>How it works</h3> + <p>This service consist of two parts:</p> + <p><ol> + <li>A live streaming of a conference room.</li> + <li>A live audio feed back to same conference room.</li> + </ol></p> + <p>The audio feed is shared among all participants.<pi> + <p>Press the <code>Start</code> button above to launch the service, + choose the stream you're interested in and press the <code>Watch</code> button to start the playout. + Stopping it will allow you to switch to a different one.</p> + </div> + </div> + </div> + <div class="container hide" id="streams"> + <div class="row"> + <div class="col-md-6"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Streams <i id="update-streams" class="fa fa-refresh" title="Update list of streams" style="cursor: pointer;"></i></h3> + </div> + <div class="panel-body" id="list"> + <div class="btn-group btn-group-sm"> + <button class="btn btn-primary" autocomplete="off" id="watch">Watch or Listen</button> + <div class="btn-group btn-group-sm"> + <button autocomplete="off" id="streamset" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + Streams list<span class="caret"></span> + </button> + <ul id="streamslist" class="dropdown-menu" role="menu"> + </ul> + </div> + </div> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Stream + <span class="label label-info hide" id="status"></span> + <span class="label label-primary hide" id="curres"></span> + <span class="label label-info hide" id="curbitrate"></span> + </h3> + </div> + <div class="panel-body" id="stream"></div> + </div> + </div> + </div> + </div> + <div class="container hide" id="audiojoin"> + <div class="row"> + <span class="label label-info" id="you"></span> + <div class="col-md-12" id="controls"> + <div class="input-group margin-bottom-md hide" id="registernow"> + <span class="input-group-addon">@</span> + <input class="form-control" type="text" placeholder="Choose a display name" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input> + <span class="input-group-btn"> + <button class="btn btn-success" autocomplete="off" id="register">Join the room</button> + </span> + </div> + </div> + </div> + </div> + <div class="container hide" id="room"> + <div class="row"> + <div class="col-md-6"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Participants <span class="label label-info hide" id="participant"></span> + <button class="btn-xs btn-danger hide pull-right" autocomplete="off" id="toggleaudio">Mute</button></h3> + </div> + <div class="panel-body"> + <ul id="list" class="list-group"> + </ul> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Mixed Audio</span></h3> + </div> + <div class="panel-body" id="mixedaudio"></div> + </div> + </div> + </div> + </div> + </div> + </div> + + <hr> + <div class="footer"> + </div> +</div> + +</body> +</html> |