193 lines
7.8 KiB
HTML
193 lines
7.8 KiB
HTML
<!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>RemoteGamePlay</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="/">RemoteGamePlay</a>
|
|
<span class="navbar-brand header-room" id="room-text"></span>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div class="panel" id="panel">
|
|
<p> based on the open source project Laplace </p>
|
|
<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>
|
|
<h4>Use keyboard and mouse</h4>
|
|
<p>
|
|
Ensure you have an SSH client installed on your machine
|
|
</p>
|
|
<h4>Run the following command on terminal:</h4>
|
|
<p>ssh -XC <span id="Username"></span>@<span id="IP"></span> x2x -west -to :0.0</p>
|
|
<p>Password: <span id="SSHPassword"></span></p>
|
|
<p class="help-text">
|
|
Move your mouse to the west, and you should have access to the other computer.
|
|
</p>
|
|
|
|
|
|
<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><a href="https://github.com/Akilan1999/remotegameplay">RemoteGamePlay</a> Project by <a href="https://akilan.io">Akilan Selvacoumar</a> based on the fork
|
|
of <a href="https://github.com/Akilan1999/laplace/tree/keyboard_mouse">Laplace</a>.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/qrcode.min.js"></script>
|
|
<script src="/static/main.js?v=0.0.5"></script>
|
|
</body>
|
|
</html> |