init

2023-04-20 12:05:32 +02:00
commit 9975bbb42c
30 changed files with 11480 additions and 0 deletions
--- a/archive/video-stream.js
+++ b/archive/video-stream.js
@@ -0,0 +1,98 @@
+import {VideoRTC} from "./video-rtc.js";
+
+class VideoStream extends VideoRTC {
+    set divMode(value) {
+        this.querySelector(".mode").innerText = value;
+        this.querySelector(".status").innerText = "";
+    }
+
+    set divError(value) {
+        const state = this.querySelector(".mode").innerText;
+        if (state !== "loading") return;
+        this.querySelector(".mode").innerText = "error";
+        this.querySelector(".status").innerText = value;
+    }
+
+    /**
+     * Custom GUI
+     */
+    oninit() {
+        console.debug("stream.oninit");
+        super.oninit();
+
+        this.innerHTML = `
+        <style>
+        video-stream {
+            position: relative;
+        }
+        .info {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 12px;
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            pointer-events: none;
+        }
+        </style>
+        <div class="info">
+            <div class="status"></div>
+            <div class="mode"></div>
+        </div>
+        `;
+
+        const info = this.querySelector(".info")
+        this.insertBefore(this.video, info);
+    }
+
+    onconnect() {
+        console.debug("stream.onconnect");
+        const result = super.onconnect();
+        if (result) this.divMode = "loading";
+        return result;
+    }
+
+    ondisconnect() {
+        console.debug("stream.ondisconnect");
+        super.ondisconnect();
+    }
+
+    onopen() {
+        console.debug("stream.onopen");
+        const result = super.onopen();
+
+        this.onmessage["stream"] = msg => {
+            console.debug("stream.onmessge", msg);
+            switch (msg.type) {
+                case "error":
+                    this.divError = msg.value;
+                    break;
+                case "mse":
+                case "mp4":
+                case "mjpeg":
+                    this.divMode = msg.type.toUpperCase();
+                    break;
+            }
+        }
+
+        return result;
+    }
+
+    onclose() {
+        console.debug("stream.onclose");
+        return super.onclose();
+    }
+
+    onpcvideo(ev) {
+        console.debug("stream.onpcvideo");
+        super.onpcvideo(ev);
+
+        if (this.pcState !== WebSocket.CLOSED) {
+            this.divMode = "RTC";
+        }
+    }
+}
+
+customElements.define("video-stream", VideoStream);