From 07983a1c713952f3dc22d0e8c349233c8b7ca2c6 Mon Sep 17 00:00:00 2001
From: Yohann D'ANELLO <yohann.danello@gmail.com>
Date: Tue, 6 Oct 2020 00:06:52 +0200
Subject: [PATCH] Try to add a quality selector (WIP), see #4

---
 stream/webrtc/webrtc.go       |  9 +++++++++
 web/static/js/videoQuality.js |  8 ++++++++
 web/static/js/viewer.js       |  2 +-
 web/template/viewer.html      | 14 ++++++++++++++
 web/web.go                    |  2 +-
 5 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 web/static/js/videoQuality.js

diff --git a/stream/webrtc/webrtc.go b/stream/webrtc/webrtc.go
index 4697560..6945d79 100644
--- a/stream/webrtc/webrtc.go
+++ b/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
diff --git a/web/static/js/videoQuality.js b/web/static/js/videoQuality.js
new file mode 100644
index 0000000..af4060f
--- /dev/null
+++ b/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)
+    }
+})
diff --git a/web/static/js/viewer.js b/web/static/js/viewer.js
index d83e910..b9b7f20 100644
--- a/web/static/js/viewer.js
+++ b/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',
diff --git a/web/template/viewer.html b/web/template/viewer.html
index 50632dc..d2f9bb1 100644
--- a/web/template/viewer.html
+++ b/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>
diff --git a/web/web.go b/web/web.go
index f28b3da..f717c22 100644
--- a/web/web.go
+++ b/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