Added tools
This commit is contained in:
parent
4d4591fb2d
commit
470147c5cd
GPG Key ID:
C4B28FD2729941CE
24
static/camera.html
Normal file
24
static/camera.html
Normal 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
40
static/canvas.html
Normal 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
25
static/css/style.css
Normal 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;
|
||||||
|
}
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Display</title>
|
<title>LOLED - Display</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|||||||
@ -3,37 +3,22 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="/css/style.css">
|
||||||
<title>LOLED</title>
|
<title>LOLED</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas></canvas>
|
<h1>Loled</h1>
|
||||||
<p>To send canvas of the page to LOLED click the following link :
|
<hr>
|
||||||
<a id="link" href="">LOLED that canvas !</a>
|
<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>
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
42
static/js/rtc.js
Normal file
42
static/js/rtc.js
Normal 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
24
static/screenshare.html
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user