<!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>Conference remote attendance</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>Conference remote attendance <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 consists of two parts:</p> <p><ol> <li>Live streaming of a conference room.</li> <li>Live audio capture - a virtual microphone - sent back to same conference room.</li> </ol></p> <p>The audio feed is shared among all participants. Make sure to mute your input when you are not the one speaking.<pi> <p>Press the <code>Start</code> button above to launch the service, choose the room you're interested in and press the <code>Watch</code> button to start the playout, and provide your name to connect to the shared audio feedback.<br/> Stopping the video feed will allow you to switch to a different room.</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">Rooms <i id="update-streams" class="fa fa-refresh" title="Update list of streams" style="cursor: pointer;"></i></h3> </div> <div class="panel-body"> <div class="btn-group btn-group-sm"> <button class="btn btn-primary" autocomplete="off" id="watch">Attend</button> <div class="btn-group btn-group-sm"> <button autocomplete="off" id="streamset" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> list of talk rooms<span class="caret"></span> </button> <ul id="streamslist" class="dropdown-menu" role="menu"> </ul> </div> </div> </div> </div> <div class="row hide" id="audiojoin"> <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 virtual microphone</button> </span> </div> </div> </div> <div class="row hide" id="room"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Virtual microphone <span class="label label-info hide" id="participant"></span> <button class="btn-xs btn-success hide pull-right" autocomplete="off" id="toggleaudio">Unmute</button></h3> </div> <div class="panel-body"> <ul id="list" class="list-group"> </ul> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Attended conference room <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 class="panel-body" id="mixedaudio"></div> </div> </div> </div> </div> </div> </div> <hr> <div class="footer"> <p>source: <a href=https://source.redpill.dk/media-stream-hosting.git>https://source.redpill.dk/media-stream-hosting.git</a>.</p> </div> </div> </body> </html>