epickiwi/loled
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added tools

Browse Source
This commit is contained in:
EpicKiwi 2023-10-31 19:44:06 +01:00
parent 4d4591fb2d
commit 470147c5cd
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
7 changed files with 169 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
static/camera.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>LOLED - Camera</title>
</head>
<body>
<h1>LOLED</h1>
<button id="stream-camera">Use your Camera</button>
<script type="module">
import {connectSomeStream} from "/js/rtc.js"
document.getElementById("stream-camera")
.addEventListener("click", async () => {
let stream = await navigator.mediaDevices.getUserMedia({
video: true
})
await connectSomeStream(stream)
})
</script>
</body>
</html>

40
static/canvas.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>LOLED - Canvas</title>
</head>
<body>
<canvas></canvas>
<p>To send canvas of the page to LOLED click the following link :
<a id="link" href="">LOLED that canvas !</a>
</p>
<p>You can also drag this link in your bookmarks to call it on any page with a canvas. Like <a href="https://hydra.ojack.xyz/">Hydra</a> or <a href="https://topos.raphaelforment.fr/">Topos</a>.</p>
<script>
document.getElementById("link").href = `javascript:(function(){let s = document.createElement('script');s.src = '${new URL("/js/grab-canvas.js", document.documentElement.baseURI).toString()}';document.body.appendChild(s);})()`
</script>
<script>
const canvas = document.querySelector("canvas");
canvas.width = 500
canvas.height = 500
const ctx = canvas.getContext("2d");
let incr = 0;
function draw(){
ctx.fillStyle = `hsl(${incr}deg 100% 50%)`;
ctx.fillRect(-50, -50, 100, 100)
incr += 1;
requestAnimationFrame(draw)
}
ctx.translate(canvas.width/2, canvas.height/2),
draw()
</script>
</body>
</html>

25
static/css/style.css Normal file
View File

@ -0,0 +1,25 @@
:root {
font-family: monospace;
color: white;
background: black;
}
html, body {
margin: 0;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
}
body {
padding: 15px;
}
a {
color: yellow;
}
hr {
border: none;
height: 2em;
}

2
static/display/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display</title>
<title>LOLED - Display</title>
<style>
body {

41
static/index.html
View File

@ -3,37 +3,22 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>LOLED</title>
</head>
<body>
<canvas></canvas>
<p>To send canvas of the page to LOLED click the following link :
<a id="link" href="">LOLED that canvas !</a>
<h1>Loled</h1>
<hr>
<p>
Getting started with loled by streaming some video on the screen.
Multiple solutions exists:
</p>
<p>
<ul>
<li><a href="canvas.html">Use a canvas or a video from a website</a></li>
<li><a href="camera.html">Use your device camera</a></li>
<li><a href="screenshare.html">Share your device screen</a></li>
</ul>
</p>
<p>You can also drag this link in your bookmarks to call it on any page with a canvas. Like <a href="https://hydra.ojack.xyz/">Hydra</a> or <a href="https://topos.raphaelforment.fr/">Topos</a>.</p>
<script>
document.getElementById("link").href = `javascript:(function(){let s = document.createElement('script');s.src = '${new URL("/js/grab-canvas.js", document.documentElement.baseURI).toString()}';document.body.appendChild(s);})()`
</script>
<script>
const canvas = document.querySelector("canvas");
canvas.width = 500
canvas.height = 500
const ctx = canvas.getContext("2d");
let incr = 0;
function draw(){
ctx.fillStyle = `hsl(${incr}deg 100% 50%)`;
ctx.fillRect(-50, -50, 100, 100)
incr += 1;
requestAnimationFrame(draw)
}
ctx.translate(canvas.width/2, canvas.height/2),
draw()
</script>
</body>
</html>

42
static/js/rtc.js Normal file
View File

@ -0,0 +1,42 @@
export async function connectSomeStream(canvasStream){
const globalConnnection = Symbol("grab-canvas-connection")
const conn = new RTCPeerConnection({
iceServers: [
{urls: ["stun:stun.nextcloud.com:443"]}
]
});
const iceCandidates = []
conn.addEventListener("icecandidate", e => {
iceCandidates.push(e.candidate)
})
const allCandidatesCollected = new Promise(res =>
conn.addEventListener("icecandidate", e => e.candidate == null && res() ))
const canvasStreamTracks = canvasStream.getVideoTracks()
if(canvasStreamTracks.length > 0){
conn.addTrack(canvasStreamTracks[0], canvasStream)
} else {
throw new Error("Stream don't have video track")
}
const offer = await conn.createOffer();
await conn.setLocalDescription(offer);
await allCandidatesCollected
const res = await fetch(new URL("/_loled/grab-display", window.location), {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({
offer,
iceCandidates
})
})
const response = new RTCSessionDescription(await res.json());
conn.setRemoteDescription(response);
window[globalConnnection] = conn
}

24
static/screenshare.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>LOLED - Camera</title>
</head>
<body>
<h1>LOLED <small>Share your screen</small></h1>
<button id="stream-camera">Share your screen</button>
<script type="module">
import {connectSomeStream} from "/js/rtc.js"
document.getElementById("stream-camera")
.addEventListener("click", async () => {
let stream = await navigator.mediaDevices.getDisplayMedia({
video: true
})
await connectSomeStream(stream)
})
</script>
</body>
</html>