website/mic/index.html



<!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>