README.md

@@ -1,13 +1,5 @@
 # LOLED
 
-Outil de projection sur l'ecran led du LOL
+```
-
+apt install xorg fluxbox lightdm
-L'ecran lED du LOL est controlle par une carte PCI qui prend une portion de l'ecran pour en mapper chaque pixel sur l'ecran LED.
+```
-
-Avec LOLED : un serveur (`loled.js`) execute avec [Deno](https://deno.com/) et mets a disposition les elements suivants :
-
-* Une page `/display` qui doit etre ouverte en plein ecran sur un navigateur interne
-* Une page d'index `/` qui donne quelques details et instructions sur comment utiliser l'outil sur le WEB
-* Un script `/js/grab-canvas.js` qui peut etre execute sur n'importe quel page du web dispose d'un element video ou canvas, le flux video du premier element trouve sera alors envoye a l'ecran
-
-Techniquement, le systeme repose sur une connexion WebRTC et utilise le serveur comme serveur de signalisation. Sur la machine assocee a l'ecran LED nous avons demarre une session fluxbox avec LightDM. Flubox demarre un firefox automatquement qui se connecte au serveur en tant qu'affichage.

loled.js

@@ -82,20 +82,12 @@ app.use((ctx, next) => {
   ctx.response.headers.append("Access-Control-Allow-Headers", "*")
 
   if(ctx.request.method == "OPTION"){
-    ctx.response.status = 204
+    ctx.response.status = 200
   } else {
     return next()
   }
 })
 
-app.use((ctx, next) => {
-  if(ctx.request.url.pathname.startsWith("/_loled")){
-  ctx.response.headers.append("Cache-Control", "no-store")
-  }
-
-  return next()
-})
-
 // Static
 app.use(async (ctx, next) => {
   if(ctx.request.url.pathname.startsWith("/_loled"))

static/index.html

@@ -10,7 +10,7 @@
     <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>
+    <p>You can also drag this link in your bookmarks to call it on any page with a canvas</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>

static/js/display.js

@@ -90,6 +90,6 @@ async function getRegistration(name){
 const args = new URLSearchParams(location.search);
 init(
     args.get("name"),
-    parseInt(args.get("width") || window.innerWidth),
+    parseInt(args.get("width")),
-    parseInt(args.get("height") || window.innerHeight)
+    parseInt(args.get("height"))
 )

static/js/grab-canvas.js

@@ -2,10 +2,9 @@
     const globalConnnection = Symbol("grab-canvas-connection")
 
     const currentScriptSrc = document.currentScript.src;
-    const sourceElt = document.querySelector("canvas,video");
+    const canvas = document.querySelector("canvas");
-    console.log("Grabbing", sourceElt)
 
-    if(!sourceElt){
+    if(!canvas){
         console.error("No canvas found on this page")
     }
 
@@ -23,38 +22,10 @@
     const allCandidatesCollected = new Promise(res => 
         conn.addEventListener("icecandidate", e => e.candidate == null && res() ))
 
-    let captureFn = sourceElt.captureStream;
+    const canvasStream = canvas.captureStream()
-    if(!captureFn){
-        captureFn = sourceElt.mozCaptureStream;
-    }
-
-    if(sourceElt instanceof HTMLCanvasElement){
-        captureFn = sourceElt.captureStream.bind(sourceElt)
-    } else {
-        if(sourceElt.mozCaptureStream){
-            captureFn = sourceElt.mozCaptureStream.bind(sourceElt)
-        } else {
-            captureFn = sourceElt.captureStream.bind(sourceElt)
-        }
-    }
-
-    const canvasStream = captureFn()
     const canvasStreamTracks = canvasStream.getVideoTracks()
     if(canvasStreamTracks.length > 0){
         conn.addTrack(canvasStreamTracks[0], canvasStream)
-    } else {
-        throw new Error("Element don't habe video track")
-    }
-
-    try {
-        const AudioContext = window.AudioContext || window.webkitAudioContext;
-        if(AudioContext){
-            const audioContext = new AudioContext();
-            audioContext.createMediaStreamSource(canvasStream)
-                .connect(audioContext.destination)
-        }
-    } catch(e){
-        console.warn(e)
     }
 
     const offer = await conn.createOffer();