WebRTC player

web/static/css/style.css

@@ -56,9 +56,25 @@ h1, h2, h3, h4 {
   padding: 1rem;
   flex-basis: 0;
   flex-grow: 1;
-  position: relative;
-  width: 100%;
   text-align: right;
+
+  /* Limit max width to limit video size */
+  margin: auto;
+  max-width: 1200px;
+}
+
+.video-responsive {
+  position: relative;
+  padding-top: 56.25%; /* 16/9 */
+}
+
+.video-responsive video {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   max-height: 90vh;
 }
 
@@ -80,7 +96,7 @@ h1, h2, h3, h4 {
 }
 
 /* Hide chat toggler on small screen */
-#chatToggle {
+#sideWidgetToggle {
   margin-left: 0.5rem;
   display: none;
 }
@@ -92,7 +108,7 @@ h1, h2, h3, h4 {
     flex: 0 0 33.33333%;
   }
   
-  #chatToggle {
+  #sideWidgetToggle {
     display: inline;
   }
 }

web/static/img/no_stream.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(0 -106.5)">
+    <rect y="106.5" width="1280" height="720"/>
+    <g transform="matrix(6.264 0 0 6.264 439.5 193.3)">
+      <path d="m42.23 46.23c14.05-2.364 18.73-9.9 20.12-19.73 0.776-5.46 0.697-9.927-0.878-15.31 0 0-1.185 1.016-2.38 2.425l-1.806 2.13c-4.686-6.643-9.9-9.712-15.85-8.794s-7.133 4.81-10.58 10.7c-0.19-7e-3 -0.97-0.5-1.73-1.094-1.426-1.115-5.473-3.013-5.473-3.013 1.134 7.108 3.98 14.29 8.513 19.12 3.077 3.176 7.316 4.028 5.272 8.304-0.912 1.907-4.373 1.573-5.327 1.582-0.473 4e-3 -1.217 0.235-1.654 0.51-2.425 3.942 4.377 4.418 11.78 3.172z" fill="#ebe7e7" stroke="#b62525" stroke-linejoin="round" stroke-width="2.214"/>
+      <path d="m8.13 24.1v5e-3a7.55 7.55 0 0 0-7.55 7.55 7.55 7.55 0 0 0 7.549 7.547c1.526 0 2.946-0.456 4.135-1.237h9.408a4.52 4.52 0 0 0 4.518-4.518 4.52 4.52 0 0 0-4.518-4.518h-6.508c-1.092-2.824-3.826-4.828-7.036-4.828zm27.07 13.92-12.49 4.028v6.245l12.49 2.685zm-26.6 13.43v3.402h1.995l-1.035 3.458h2.685l1.04-3.458h3.6l1.04 3.458h2.685l-1.04-3.458h1.53v-3.402z" fill="#214378"/>
+      <path d="m29.61 37.33h-29.54v14.77h29.54z" fill="#37abc8"/>
+      <path d="m35.08 19.04c0.876-1.938 1.78-3.835 4.73-2.73m6.42-0.858c2.54-2.016 4.207-1.66 5.38 0.037m-11.68 8.063c3.783 2.094 7.052 0.7 10.13-1.966" fill="none" stroke="#b62525" stroke-linecap="round" stroke-width="1.107"/>
+    </g>
+    <text x="641.03516" y="675.07147" fill="#000000" font-family="'Noto Mono'" font-size="40px" letter-spacing="0px" text-align="center" text-anchor="middle" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><tspan x="641.03516" y="675.07147" fill="#ffffff" font-family="sans-serif" text-align="center" text-anchor="middle">Ce stream semble inactif.</tspan></text>
+  </g>
+</svg>

web/static/js/sideWidget.js

@@ -0,0 +1,12 @@
+// Side widget toggler
+const sideWidgetToggle = document.getElementById("sideWidgetToggle")
+sideWidgetToggle.addEventListener("click", function () {
+    const sideWidget = document.getElementById("sideWidget")
+    if (sideWidget.style.display === "none") {
+        sideWidget.style.display = "block"
+        sideWidgetToggle.textContent = "»"
+    } else {
+        sideWidget.style.display = "none"
+        sideWidgetToggle.textContent = "«"
+    }
+})

web/static/js/viewer.js

@@ -0,0 +1,45 @@
+// Init peer connection
+let pc = new RTCPeerConnection({
+    iceServers: [
+        {
+            // FIXME: let admin customize the stun server
+            urls: 'stun:stun.l.google.com:19302'
+        }
+    ]
+})
+
+// Create an offer to receive one video and one audio track
+pc.addTransceiver('video', { 'direction': 'sendrecv' })
+pc.addTransceiver('audio', { 'direction': 'sendrecv' })
+pc.createOffer().then(d => pc.setLocalDescription(d)).catch(console.log)
+
+// When local session description is ready, send it to streaming server
+// FIXME: also send stream path
+// FIXME: send to wss://{{.Cfg.Hostname}}/play/{{.Path}}
+pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState)
+pc.onicecandidate = event => {
+    if (event.candidate === null) {
+        document.getElementById('localSessionDescription').value = JSON.stringify(pc.localDescription)
+    }
+}
+
+// When remote session description is received, load it
+window.startSession = () => {
+    let sd = document.getElementById('remoteSessionDescription').value
+    try {
+        pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(sd)))
+    } catch (e) {
+        console.log(e)
+    }
+}
+
+// When video track is received, mount player
+pc.ontrack = function (event) {
+    if (event.track.kind === "video") {
+        const viewer = document.getElementById('viewer')
+        viewer.srcObject = event.streams[0]
+        viewer.autoplay = true
+        viewer.controls = true
+        viewer.muted = true
+    }
+}