diff --git a/static/camera.html b/static/camera.html
new file mode 100644
index 0000000..5a963c4
--- /dev/null
+++ b/static/camera.html
@@ -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>
\ No newline at end of file
diff --git a/static/canvas.html b/static/canvas.html
new file mode 100644
index 0000000..8e8c424
--- /dev/null
+++ b/static/canvas.html
@@ -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>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..0628cc3
--- /dev/null
+++ b/static/css/style.css
@@ -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;
+}
\ No newline at end of file
diff --git a/static/display/index.html b/static/display/index.html
index abf54d6..aeae2cc 100644
--- a/static/display/index.html
+++ b/static/display/index.html
@@ -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 {
diff --git a/static/index.html b/static/index.html
index 734be2b..8f87ece 100644
--- a/static/index.html
+++ b/static/index.html
@@ -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>
\ No newline at end of file
diff --git a/static/js/rtc.js b/static/js/rtc.js
new file mode 100644
index 0000000..c1ceb0c
--- /dev/null
+++ b/static/js/rtc.js
@@ -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
+}
\ No newline at end of file
diff --git a/static/screenshare.html b/static/screenshare.html
new file mode 100644
index 0000000..35480fc
--- /dev/null
+++ b/static/screenshare.html
@@ -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>
\ No newline at end of file
