added laplace binary
This commit is contained in:
180
files/main.html
Normal file
180
files/main.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Laplace</title>
|
||||
<link rel="stylesheet" href="/static/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/static/main.css?v=0.0.5">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar">
|
||||
<a class="navbar-brand text-dark" href="/">Laplace</a>
|
||||
<span class="navbar-brand header-room" id="room-text"></span>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel" id="panel">
|
||||
<p class="help-text">
|
||||
<b>Laplace</b> is an open-source project to enable screen sharing directly via browser.
|
||||
Made possible using WebRTC for low latency peer-to-peer connections,
|
||||
and websocket implemented in golang for WebRTC signaling.
|
||||
<a href="https://github.com/adamyordan/laplace">Read more</a>
|
||||
</p>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<h4>Start sharing your screen</h4>
|
||||
<p class="help-text">
|
||||
Click the button below to create a new streaming room,
|
||||
where you can share your screen with your peers.
|
||||
A RoomID will be generated, and you can share the RoomID to your peers.
|
||||
</p>
|
||||
|
||||
<button type="button" class="btn btn-dark btn-block" id="btnStream">Start sharing</button>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<h4>Join streaming room</h4>
|
||||
<p class="help-text">
|
||||
Enter a RoomID to join the streaming room.
|
||||
You can get the RoomID from your peer that is doing a screen sharing.
|
||||
</p>
|
||||
<form id="joinForm">
|
||||
<div class="form-group">
|
||||
<input id="inputRoomID" type="text" class="form-control form-control-lg text-center" placeholder="Enter room ID" required>
|
||||
</div>
|
||||
<h4>Connect to Barrier KVM (Beta)</h4>
|
||||
<p class="help-text">
|
||||
This is a feature is still on beta testing. This feature will ensure that you can share the keyboard
|
||||
and mouse of the server machine.
|
||||
<br>
|
||||
<span class="text-success font-weight-bold"> Note: This only works if the laplace server has barrierc installed and the room name you are connecting
|
||||
too belongs to the server.</span>
|
||||
</p>
|
||||
<h6>Host Name: <span id="hostname"> Not detected </span></h6>
|
||||
<div class="form-group">
|
||||
<input id="barrierIP" type="text" class="form-control form-control-lg text-center" placeholder="IPV6 or IPV4 address">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-dark btn-block" value="submit">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container container-small" id="stream-serve-page-ui">
|
||||
<div class="config-panel">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h4>Screen sharing configuration</h4>
|
||||
<p class="help-text">
|
||||
For most people, using the default "balanced" preset is enough,
|
||||
then click the "Start sharing" button to start.
|
||||
For the curious, You may also choose configuration preset that will affect the performance and quality of the streaming.
|
||||
For advance user, you can modify the options inside the textbox directly, please note that it may incur errors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for=optionPreset>Preset</label>
|
||||
<br>
|
||||
<select name="optionPreset" id="inputOptionPreset" class="form-control"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for=displayMediaOption>DisplayMedia option</label>
|
||||
<textarea name="displayMediaOption" id="inputDisplayMediaOption" cols="30" rows="5" class="form-control"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for=RTPPeerConnection>RTPPeerConnection option</label>
|
||||
<textarea name="RTPPeerConnectionOption" id="inputRTPPeerConnectionOption" cols="30" rows="5" class="form-control"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<button type="button" class="btn btn-dark btn-block-xs-only" id="btnStartStream">Start stream</button>
|
||||
<span> </span>
|
||||
<button type="button" class="btn btn-outline-dark btn-block-xs-only" id="btnStream" onclick="leaveRoom()">Cancel</button>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<p class="help-text">
|
||||
<b>Some notes</b><br>
|
||||
After clicking the "Start stream" button, if your device is supported, you may be asked to choose which screen you want to share.
|
||||
<br>
|
||||
As of now, mobile devices (Android & iOS) are usually not supported for screen sharing.
|
||||
<br>
|
||||
Sharing system audio is tested to be working only with latest Google Chrome running in Windows OS.
|
||||
<br>
|
||||
Remember to tick the "Share audio" checkbox.
|
||||
<br>
|
||||
In case the streaming does not work, reload the page, the WebRTC maybe unstable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid" id="video-container">
|
||||
<div id="video-wrapper">
|
||||
<video id="mainVideo" autoplay playsinline controls>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="container container-small" id="stream-page-ui">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<h4>How to Join this Room</h4>
|
||||
<p class="help-text">
|
||||
You can share the RoomID to your peers (it is on the top-right position on this page).
|
||||
They can also join with the following link or QRCode:
|
||||
</p>
|
||||
<a href="#" id="join-link" target="_blank"></a>
|
||||
<br><br>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div id="qrcode"></div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h6>Status</h6>
|
||||
<table class="table table-borderless table-sm table-meta">
|
||||
<tr>
|
||||
<td>Number of connections:</td>
|
||||
<td id="statusNumConn">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Connected peers:</td>
|
||||
<td id="statusPeers"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ping:</td>
|
||||
<td id="statusPing">0 ms</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button type="button" class="btn btn-dark btn-block-xs-only" id="btnStream" onclick="leaveRoom()">Leave Room</button>
|
||||
</div>
|
||||
<hr>
|
||||
<pre id="output"></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<hr>
|
||||
<div class="text-center small" id="footer">
|
||||
<span>Laplace Project by Adam Jordan.</span>
|
||||
<a href="https://github.com/adamyordan/laplace">Source Code</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/qrcode.min.js"></script>
|
||||
<script src="/static/main.js?v=0.0.5"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user