mirror of
https://github.com/jech/galene.git
synced 2024-11-22 16:45:58 +01:00
bc23b6f489
Simulcast doesn't seem to work well with screen sharing: only one layer is sent, which has very low throughput since we send the low layer first. Disable simulcast for screen sharing.
287 lines
12 KiB
HTML
287 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Galène</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
|
|
<link rel="stylesheet" type="text/css" href="/common.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/galene.css"/>
|
|
<link rel="author" href="https://www.irif.fr/~jch/"/>
|
|
<link rel="stylesheet" type="text/css" href="/external/fontawesome/css/fontawesome.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/external/fontawesome/css/solid.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/external/fontawesome/css/regular.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/external/toastify/toastify.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/external/contextual/contextual.css"/>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="main" class="app">
|
|
<div class="row full-height">
|
|
<nav id="left-sidebar">
|
|
<div class="users-header">
|
|
<div class="galene-header">Galène</div>
|
|
</div>
|
|
<div class="header-sep"></div>
|
|
<div id="users"></div>
|
|
</nav>
|
|
<div class="container">
|
|
<header>
|
|
<nav class="topnav navbar navbar-expand navbar-light fixed-top">
|
|
<div id="header">
|
|
<div class="collapse" title="Collapse left panel" id="sidebarCollapse">
|
|
<i class="fas fa-align-left" aria-hidden="true"></i>
|
|
</div>
|
|
<h1 id="title" class="header-title">Galène</h1>
|
|
</div>
|
|
|
|
<ul class="nav-menu">
|
|
<li>
|
|
<button id="presentbutton" class="invisible btn btn-success">
|
|
<i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="unpresentbutton" class="invisible btn btn-cancel">
|
|
<i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Disable</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<div id="mutebutton" class="nav-link nav-button">
|
|
<span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
|
|
<label>Mute</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div id="sharebutton" class="invisible nav-link nav-button">
|
|
<span><i class="fas fa-share-square" aria-hidden="true"></i></span>
|
|
<label>Share Screen</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="nav-button nav-link nav-more" id="openside">
|
|
<span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<div class="row full-width" id="mainrow">
|
|
<div class="coln-left" id="left">
|
|
<div id="chat">
|
|
<div id="chatbox">
|
|
<div class="close-chat" id="close-chat" title="Hide chat">
|
|
<span class="close-icon"></span>
|
|
</div>
|
|
<div id="box"></div>
|
|
<div class="reply">
|
|
<form id="inputform">
|
|
<textarea id="input" class="form-reply"></textarea>
|
|
<input id="inputbutton" type="submit" value="➤" class="btn btn-default"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="resizer"></div>
|
|
<div class="coln-right" id="right">
|
|
<span class="show-video blink invisible" id="show-video">
|
|
<i class="fas fa-exchange-alt" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="chat-btn show-chat invisible" id="show-chat">
|
|
<i class="far fa-comment-alt icon-chat" title="Show chat"></i>
|
|
</div>
|
|
<div class="chat-btn collapse-video invisible" id="collapse-video">
|
|
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
|
|
</div>
|
|
<div class="video-container invisible" id="video-container">
|
|
<div id="expand-video" class="expand-video">
|
|
<div id="peers"></div>
|
|
</div>
|
|
</div>
|
|
<div class="login-container invisible" id="login-container">
|
|
<div class="login-box">
|
|
<form id="userform" class="userform">
|
|
<label for="username">Username</label>
|
|
<input id="username" type="text" name="username"
|
|
autocomplete="username" class="form-control"/>
|
|
<label for="password">Password</label>
|
|
<input id="password" type="password" name="password"
|
|
autocomplete="current-password" class="form-control"/>
|
|
<label>Enable at start:</label>
|
|
<div class="present-switch">
|
|
<p class="switch-radio">
|
|
<input id="presentoff" type="radio" name="presentradio" value="" checked/>
|
|
<label for="presentoff">Nothing</label>
|
|
</p>
|
|
<p class="switch-radio">
|
|
<input id="presentmike" type="radio" name="presentradio" value="mike"/>
|
|
<label for="presentmike">Microphone</label>
|
|
</p>
|
|
<p class="switch-radio">
|
|
<input id="presentboth" type="radio" name="presentradio" value="both"/>
|
|
<label for="presentboth">Camera and microphone</label>
|
|
</p>
|
|
</div>
|
|
<div class="clear"></div>
|
|
<div class="connect">
|
|
<input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
|
|
</div>
|
|
</form>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebarnav" class="sidenav">
|
|
<div class="sidenav-header">
|
|
<h2>Settings</h2>
|
|
<a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a>
|
|
</div>
|
|
<div class="sidenav-content" id="optionsdiv">
|
|
<div id="profile" class="profile invisible">
|
|
<div class="profile-user">
|
|
<div class="profile-logo">
|
|
<span><i class="fas fa-user" aria-hidden="true"></i></span>
|
|
</div>
|
|
<div class="profile-info">
|
|
<span id="userspan"></span>
|
|
<span id="permspan"></span>
|
|
</div>
|
|
<div class="user-logout">
|
|
<a id="disconnectbutton">
|
|
<span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
|
|
<span class="logout-text">Logout</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mediaoptions" class="invisible">
|
|
<fieldset>
|
|
<legend>Media Options</legend>
|
|
<label for="videoselect" class="sidenav-label-first">Camera:</label>
|
|
<select id="videoselect" class="select select-inline">
|
|
<option value="">off</option>
|
|
</select>
|
|
|
|
<label for="audioselect" class="sidenav-label">Microphone:</label>
|
|
<select id="audioselect" class="select select-inline">
|
|
<option value="">off</option>
|
|
</select>
|
|
|
|
<form>
|
|
<input id="mirrorbox" type="checkbox" checked/>
|
|
<label for="mirrorbox">Mirror view</label>
|
|
</form>
|
|
|
|
<form>
|
|
<input id="blackboardbox" type="checkbox"/>
|
|
<label for="blackboardbox">Blackboard mode</label>
|
|
</form>
|
|
|
|
<form>
|
|
<input id="preprocessingbox" type="checkbox"/ checked>
|
|
<label for="preprocessingbox">Noise suppression</label>
|
|
</form>
|
|
|
|
<form>
|
|
<input id="hqaudiobox" type="checkbox"/>
|
|
<label for="hqaudiobox">High-quality audio</label>
|
|
</form>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
<fieldset>
|
|
<legend>Other Settings</legend>
|
|
|
|
<form id="filterform">
|
|
<label for="filterselect" class="sidenav-label-first">Filter:</label>
|
|
<select id="filterselect" class="select select-inline">
|
|
<option value="" selected>none</option>
|
|
</select>
|
|
</form>
|
|
|
|
<form id="sendform">
|
|
<label for="sendselect" class="sidenav-label-first">Send:</label>
|
|
<select id="sendselect" class="select select-inline">
|
|
<option value="lowest">lowest</option>
|
|
<option value="low">low</option>
|
|
<option value="normal" selected>normal</option>
|
|
<option value="unlimited">unlimited</option>
|
|
</select>
|
|
</form>
|
|
|
|
<form id="simulcastform">
|
|
<label for="simulcastselect" class="sidenav-label-first">Simulcast:</label>
|
|
<select id="simulcastselect" class="select select-inline">
|
|
<option value="off">off</option>
|
|
<option value="auto" selected>auto</option>
|
|
<option value="on">on</option>
|
|
</select>
|
|
</form>
|
|
|
|
<form id="requestform">
|
|
<label for="requestselect" class="sidenav-label">Receive:</label>
|
|
<select id="requestselect" class="select select-inline">
|
|
<option value="">nothing</option>
|
|
<option value="audio">audio only</option>
|
|
<option value="screenshare">screenshare only</option>
|
|
<option value="everything-low">low quality</option>
|
|
<option value="everything" selected>everything</option>
|
|
</select>
|
|
</form>
|
|
|
|
<form>
|
|
<input id="activitybox" type="checkbox"/>
|
|
<label for="activitybox">Activity detection</label>
|
|
</form>
|
|
|
|
<form>
|
|
<input id="displayallbox" type="checkbox"/>
|
|
<label for="displayallbox">Display audio-only users</label>
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="videocontrols-template" class="invisible">
|
|
<div class="video-controls vc-overlay">
|
|
<div class="controls-button controls-left">
|
|
<span class="video-play" title="Play video">
|
|
<i class="fas fa-play"></i>
|
|
</span>
|
|
<span class="volume" title="Volume">
|
|
<i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
|
|
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
|
|
</span>
|
|
</div>
|
|
<div class="controls-button controls-right">
|
|
<span class="pip" title="Picture In Picture">
|
|
<i class="far fa-clone" aria-hidden="true"></i>
|
|
</span>
|
|
<span class="fullscreen" title="Fullscreen">
|
|
<i class="fas fa-expand" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="topvideocontrols-template" class="invisible">
|
|
<div class="top-video-controls">
|
|
<div class="controls-button controls-right">
|
|
<span class="close-icon video-stop" title="Stop video">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/protocol.js" defer></script>
|
|
<script src="/external/toastify/toastify.js" defer></script>
|
|
<script src="/external/contextual/contextual.js" defer></script>
|
|
<script src="/galene.js" defer></script>
|
|
</body>
|
|
</html>
|