aboutsummaryrefslogtreecommitdiff
path: root/website/mic/index.html
blob: 1d9b16f955947feaa3c65a10fff761badee30af4 (plain)
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <title>Streaming with feedback</title>
  8. <script type="text/javascript" src="../js/webrtc-adapter/adapter.min.js" ></script>
  9. <script type="text/javascript" src="../js/jquery/jquery.min.js" ></script>
  10. <script type="text/javascript" src="../js/jquery-blockui/jquery.blockUI.js" ></script>
  11. <script type="text/javascript" src="../js/bootstrap/js/bootstrap.min.js"></script>
  12. <script type="text/javascript" src="../js/bootbox/bootbox.min.js"></script>
  13. <script type="text/javascript" src="../js/spin.js/spin.min.js"></script>
  14. <script type="text/javascript" src="../ext/toastr.min.js"></script>
  15. <script type="text/javascript" src="../js/janus/janus.min.js" ></script>
  16. <script type="text/javascript" src="../mic.js"></script>
  17. <link rel="stylesheet" href="../js/bootswatch/cerulean/bootstrap.min.css" type="text/css"/>
  18. <link rel="stylesheet" href="../css/style.css" type="text/css"/>
  19. <link rel="stylesheet" href="../fonts/font-awesome/css/font-awesome.min.css" type="text/css"/>
  20. <link rel="stylesheet" href="../ext/toastr.min.css"/">
  21. </head>
  22. <body>
  23. <div class="container">
  24. <div class="row">
  25. <div class="col-md-12">
  26. <div class="page-header">
  27. <h1>Streaming with feedback
  28. <button class="btn btn-default" autocomplete="off" id="start">Start</button>
  29. </h1>
  30. </div>
  31. <div class="container" id="details">
  32. <div class="row">
  33. <div class="col-md-12">
  34. <h3>How it works</h3>
  35. <p>This service consist of two parts:</p>
  36. <p><ol>
  37. <li>A live streaming of a conference room.</li>
  38. <li>A live audio feed back to same conference room.</li>
  39. </ol></p>
  40. <p>The audio feed is shared among all participants.<pi>
  41. <p>Press the <code>Start</code> button above to launch the service,
  42. choose the stream you're interested in and press the <code>Watch</code> button to start the playout.
  43. Stopping it will allow you to switch to a different one.</p>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="container hide" id="streams">
  48. <div class="row">
  49. <div class="col-md-6">
  50. <div class="panel panel-default">
  51. <div class="panel-heading">
  52. <h3 class="panel-title">Streams <i id="update-streams" class="fa fa-refresh" title="Update list of streams" style="cursor: pointer;"></i></h3>
  53. </div>
  54. <div class="panel-body" id="list">
  55. <div class="btn-group btn-group-sm">
  56. <button class="btn btn-primary" autocomplete="off" id="watch">Watch or Listen</button>
  57. <div class="btn-group btn-group-sm">
  58. <button autocomplete="off" id="streamset" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  59. Streams list<span class="caret"></span>
  60. </button>
  61. <ul id="streamslist" class="dropdown-menu" role="menu">
  62. </ul>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="col-md-6">
  69. <div class="panel panel-default">
  70. <div class="panel-heading">
  71. <h3 class="panel-title">Stream
  72. <span class="label label-info hide" id="status"></span>
  73. <span class="label label-primary hide" id="curres"></span>
  74. <span class="label label-info hide" id="curbitrate"></span>
  75. </h3>
  76. </div>
  77. <div class="panel-body" id="stream"></div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="container hide" id="audiojoin">
  83. <div class="row">
  84. <span class="label label-info" id="you"></span>
  85. <div class="col-md-12" id="controls">
  86. <div class="input-group margin-bottom-md hide" id="registernow">
  87. <span class="input-group-addon">@</span>
  88. <input class="form-control" type="text" placeholder="Choose a display name" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
  89. <span class="input-group-btn">
  90. <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
  91. </span>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="container hide" id="room">
  97. <div class="row">
  98. <div class="col-md-6">
  99. <div class="panel panel-default">
  100. <div class="panel-heading">
  101. <h3 class="panel-title">Participants <span class="label label-info hide" id="participant"></span>
  102. <button class="btn-xs btn-danger hide pull-right" autocomplete="off" id="toggleaudio">Mute</button></h3>
  103. </div>
  104. <div class="panel-body">
  105. <ul id="list" class="list-group">
  106. </ul>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="col-md-6">
  111. <div class="panel panel-default">
  112. <div class="panel-heading">
  113. <h3 class="panel-title">Mixed Audio</span></h3>
  114. </div>
  115. <div class="panel-body" id="mixedaudio"></div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <hr>
  123. <div class="footer">
  124. </div>
  125. </div>
  126. </body>
  127. </html>