aboutsummaryrefslogtreecommitdiff
path: root/website/mic/index.html
blob: 7e267d26273e041e30c44c7258b364ccc4341acf (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 consists of two parts:</p>
  36. <p><ol>
  37. <li>Live streaming of a conference room.</li>
  38. <li>Live audio capture - a virtual microphone - sent back to same conference room.</li>
  39. </ol></p>
  40. <p>The audio feed is shared among all participants.
  41. Make sure to mute your input when you are not the one speaking.<pi>
  42. <p>Press the <code>Start</code> button above to launch the service,
  43. choose the room you're interested in and press the <code>Watch</code> button to start the playout,
  44. and provide your name to connect to the shared audio feedback.<br/>
  45. Stopping the video feed will allow you to switch to a different room.</p>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="container hide" id="streams">
  50. <div class="row">
  51. <div class="col-md-6">
  52. <div class="panel panel-default">
  53. <div class="panel-heading">
  54. <h3 class="panel-title">Streams <i id="update-streams" class="fa fa-refresh" title="Update list of streams" style="cursor: pointer;"></i></h3>
  55. </div>
  56. <div class="panel-body">
  57. <div class="btn-group btn-group-sm">
  58. <button class="btn btn-primary" autocomplete="off" id="watch">Watch or Listen</button>
  59. <div class="btn-group btn-group-sm">
  60. <button autocomplete="off" id="streamset" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  61. Streams list<span class="caret"></span>
  62. </button>
  63. <ul id="streamslist" class="dropdown-menu" role="menu">
  64. </ul>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="row" hide id="audiojoin">
  70. <span class="label label-info" id="you"></span>
  71. <div class="col-md-6" id="controls">
  72. <div class="input-group margin-bottom-md hide" id="registernow">
  73. <span class="input-group-addon">@</span>
  74. <input class="form-control" type="text" placeholder="Choose a display name" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
  75. <span class="input-group-btn">
  76. <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
  77. </span>
  78. </div>
  79. </div>
  80. </div>
  81. <div class="row hide" id="room">
  82. <div class="col-md-6">
  83. <div class="panel panel-default">
  84. <div class="panel-heading">
  85. <h3 class="panel-title">Participants <span class="label label-info hide" id="participant"></span>
  86. <button class="btn-xs btn-danger hide pull-right" autocomplete="off" id="toggleaudio">Mute</button></h3>
  87. </div>
  88. <div class="panel-body">
  89. <ul id="list" class="list-group">
  90. </ul>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="col-md-6">
  97. <div class="panel panel-default">
  98. <div class="panel-heading">
  99. <h3 class="panel-title">Stream
  100. <span class="label label-info hide" id="status"></span>
  101. <span class="label label-primary hide" id="curres"></span>
  102. <span class="label label-info hide" id="curbitrate"></span>
  103. </h3>
  104. </div>
  105. <div class="panel-body" id="stream"></div>
  106. <div class="panel-body" id="mixedaudio"></div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. <hr>
  114. <div class="footer">
  115. <p>source: <a href=https://source.redpill.dk/media-stream-hosting.git>https://source.redpill.dk/media-stream-hosting.git</a>.</p>
  116. </div>
  117. </div>
  118. </body>
  119. </html>