Try to add a quality selector (WIP), see #4

stream/webrtc/webrtc.go

@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"log"
 	"math/rand"
+	"strings"
 
 	"github.com/pion/webrtc/v3"
 	"gitlab.crans.org/nounous/ghostream/internal/monitoring"
@@ -120,6 +121,14 @@ func newPeerHandler(remoteSdp struct {
 	}
 
 	streamID := remoteSdp.StreamID
+	split := strings.SplitN(streamID, "@", 2)
+	streamID = split[0]
+	quality := "source"
+	if len(split) == 2 {
+		quality = split[1]
+	}
+	log.Printf("New WebRTC session for stream %s, quality %s", streamID, quality)
+	// TODO Consider the quality
 
 	// Set the handler for ICE connection state
 	// This will notify you when the peer has connected/disconnected

web/static/js/videoQuality.js

@@ -0,0 +1,8 @@
+document.getElementsByName("quality").forEach(function (elem) {
+    elem.onclick = function () {
+        // Restart the connection with a new quality
+        peerConnection.createOffer({"iceRestart": true}).then(offer => {
+            return peerConnection.setLocalDescription(offer)
+        }).catch(console.log)
+    }
+})

web/static/js/viewer.js

@@ -52,7 +52,7 @@ startPeerConnection = () => {
             // The server replies with its description
             // After setRemoteDescription, the browser will fire ontrack events
             console.log("Sending session description to server")
-            fetch(window.location.href, {
+            fetch(window.location.href + document.quality_form.quality.value, {
                 method: 'POST',
                 headers: {
                     'Accept': 'application/json',

web/template/viewer.html

@@ -6,6 +6,19 @@
       <video id="viewer" poster="/static/img/no_stream.svg" muted controls autoplay></video>
     </div>
 
+    <div class="quality-selector">
+      <form name="quality_form">
+        <input type="radio" id="quality_source" name="quality" value="" checked>
+        <label for="quality_source">Source</label>
+        <input type="radio" id="quality_720p" name="quality" value="@720p">
+        <label for="quality_720p">720p</label>
+        <input type="radio" id="quality_480p" name="quality" value="@480p">
+        <label for="quality_480p">480p</label>
+        <input type="radio" id="quality_240p" name="quality" value="@240p">
+        <label for="quality_240p">240p</label>
+      </form>
+    </div>
+
     <!-- Links under video -->
     <p>
       <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="#d7d7d7" xmlns="http://www.w3.org/2000/svg">
@@ -44,6 +57,7 @@
 </div>
 
 {{if .WidgetURL}}<script src="/static/js/sideWidget.js"></script>{{end}}
+<script src="/static/js/videoQuality.js"></script>
 <script src="/static/js/viewer.js"></script>
 <script src="/static/js/viewersCounter.js"></script>
 <script>

web/web.go

@@ -40,7 +40,7 @@ var (
 	templates *template.Template
 
 	// Precompile regex
-	validPath = regexp.MustCompile("^\\/[a-z0-9_-]*\\/?$")
+	validPath = regexp.MustCompile("^/[a-z0-9@_\\-]*/?$")
 )
 
 // Load templates with pkger