WebRTC offers multiple quality

Websocket

See merge request nounous/ghostream!7

.gitignore

@@ -17,3 +17,9 @@ pkged.go
 # Profiler and test files
 *.prof
 *.test
+
+# Javascript tools
+.eslintrc.js
+node_modules
+package.json
+package-lock.json

.gitlab-ci.yml

@@ -2,8 +2,18 @@ stages:
   - test
   - quality-assurance
 
+.go-cache:
+  variables:
+    GOPATH: $CI_PROJECT_DIR/.go
+  before_script:
+    - mkdir -p .go
+  cache:
+    paths:
+      - .go/pkg/mod/
+
 unit_tests:
   image: golang:1.15-alpine
+  extends: .go-cache
   stage: test
   before_script:
     - apk add --no-cache -X http://dl-cdn.alpinelinux.org/alpine/edge/community build-base ffmpeg gcc libsrt-dev
@@ -18,6 +28,7 @@ unit_tests:
 
 linters:
   image: golang:1.15-alpine
+  extends: .go-cache
   stage: quality-assurance
   script:
     - go get -u golang.org/x/lint/golint

go.mod

@@ -4,6 +4,7 @@ go 1.13
 
 require (
 	github.com/go-ldap/ldap/v3 v3.2.3
+	github.com/gorilla/websocket v1.4.0
 	github.com/haivision/srtgo v0.0.0-20200731151239-e00427ae473a
 	github.com/markbates/pkger v0.17.1
 	github.com/pion/rtp v1.6.0

go.sum

@@ -113,6 +113,7 @@ github.com/googleapis/gax-go v2.0.0+incompatible/go.mod h1:SFVmujtThgffbyetf+mdk
 github.com/googleapis/gax-go/v2 v2.0.3/go.mod h1:LLvjysVCY1JZeum8Z6l8qUty8fiNwE08qbEPm1M08qg=
 github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1 h1:EGx4pi6eqNxGaHF6qqu48+N2wcFQ5qg5FXgOdqsJ5d8=
 github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
+github.com/gorilla/websocket v1.4.0 h1:WDFjx/TMzVgy9VdMMQi2K2Emtwi2QcUQsztZ/zLaH/Q=
 github.com/gorilla/websocket v1.4.0/go.mod h1:E7qHFY5m1UJ88s3WnNqhKjPHQ0heANvMoAMk2YaljkQ=
 github.com/gregjones/httpcache v0.0.0-20180305231024-9cad4c3443a7/go.mod h1:FecbI9+v66THATjSRHfNgh1IVFe/9kFxbXtjV0ctIMA=
 github.com/grpc-ecosystem/go-grpc-middleware v1.0.0/go.mod h1:FiyG127CGDf3tlThmgyCl78X/SZQqEOJBCDaAfeWzPs=

messaging/quality.go

@@ -10,6 +10,12 @@ import (
 // Quality holds a specific stream quality.
 // It makes packages able to subscribe to an incoming stream.
 type Quality struct {
+	// Type of the quality
+	Name string
+
+	// Source Stream
+	Stream *Stream
+
 	// Incoming data come from this channel
 	Broadcast chan<- []byte
 
@@ -27,8 +33,9 @@ type Quality struct {
 	WebRtcRemoteSdp chan webrtc.SessionDescription
 }
 
-func newQuality() (q *Quality) {
-	q = &Quality{}
+func newQuality(name string, stream *Stream) (q *Quality) {
+	q = &Quality{Name: name}
+	q.Stream = stream
 	broadcast := make(chan []byte, 1024)
 	q.Broadcast = broadcast
 	q.outputs = make(map[chan []byte]struct{})

messaging/stream.go

@@ -40,7 +40,7 @@ func (s *Stream) CreateQuality(name string) (quality *Quality, err error) {
 	}
 
 	s.lockQualities.Lock()
-	quality = newQuality()
+	quality = newQuality(name, s)
 	s.qualities[name] = quality
 	s.lockQualities.Unlock()
 	return quality, nil

stream/srt/handler.go

@@ -24,6 +24,17 @@ func handleStreamer(socket *srtgo.SrtSocket, streams *messaging.Streams, name st
 		socket.Close()
 		return
 	}
+
+	// Create sub-qualities
+	for _, qualityName := range []string{"audio", "480p", "360p", "240p"} {
+		_, err := stream.CreateQuality(qualityName)
+		if err != nil {
+			log.Printf("Error on quality creating: %s", err)
+			socket.Close()
+			return
+		}
+	}
+
 	log.Printf("New SRT streamer for stream '%s' quality 'source'", name)
 
 	// Read RTP packets forever and send them to the WebRTC Client

stream/webrtc/ingest.go

@@ -14,33 +14,61 @@ import (
 
 func ingest(name string, q *messaging.Quality) {
 	// Register to get stream
-	videoInput := make(chan []byte, 1024)
-	q.Register(videoInput)
+	input := make(chan []byte, 1024)
+	// FIXME Stream data should already be transcoded
+	source, _ := q.Stream.GetQuality("source")
+	source.Register(input)
 
-	// Open a UDP Listener for RTP Packets on port 5004
-	videoListener, err := net.ListenUDP("udp", &net.UDPAddr{IP: net.ParseIP("127.0.0.1"), Port: 5004})
-	if err != nil {
-		log.Printf("Faited to open UDP listener %s", err)
-		return
+	// FIXME Bad code
+	port := 5000
+	var tracks map[string][]*webrtc.Track
+	qualityName := ""
+	switch q.Name {
+	case "audio":
+		port = 5004
+		tracks = audioTracks
+		break
+	case "source":
+		port = 5005
+		tracks = videoTracks
+		qualityName = "@source"
+		break
+	case "480p":
+		port = 5006
+		tracks = videoTracks
+		qualityName = "@480p"
+		break
+	case "360p":
+		port = 5007
+		tracks = videoTracks
+		qualityName = "@360p"
+		break
+	case "240p":
+		port = 5008
+		tracks = videoTracks
+		qualityName = "@240p"
+		break
 	}
-	audioListener, err := net.ListenUDP("udp", &net.UDPAddr{IP: net.ParseIP("127.0.0.1"), Port: 5005})
+
+	// Open a UDP Listener for RTP Packets
+	listener, err := net.ListenUDP("udp", &net.UDPAddr{IP: net.ParseIP("127.0.0.1"), Port: port})
 	if err != nil {
 		log.Printf("Faited to open UDP listener %s", err)
 		return
 	}
 
-	// Start ffmpag to convert videoInput to video and audio UDP
-	ffmpeg, err := startFFmpeg(videoInput)
+	// Start ffmpag to convert input to video and audio UDP
+	ffmpeg, err := startFFmpeg(q, input)
 	if err != nil {
 		log.Printf("Error while starting ffmpeg: %s", err)
 		return
 	}
 
-	// Receive video
+	// Receive stream
 	go func() {
 		inboundRTPPacket := make([]byte, 1500) // UDP MTU
 		for {
-			n, _, err := videoListener.ReadFromUDP(inboundRTPPacket)
+			n, _, err := listener.ReadFromUDP(inboundRTPPacket)
 			if err != nil {
 				log.Printf("Failed to read from UDP: %s", err)
 				break
@@ -51,49 +79,13 @@ func ingest(name string, q *messaging.Quality) {
 				continue
 			}
 
-			if videoTracks[name] == nil {
-				videoTracks[name] = make([]*webrtc.Track, 0)
-			}
-
-			// Write RTP srtPacket to all video tracks
+			// Write RTP srtPacket to all tracks
 			// Adapt payload and SSRC to match destination
-			for _, videoTrack := range videoTracks[name] {
-				packet.Header.PayloadType = videoTrack.PayloadType()
-				packet.Header.SSRC = videoTrack.SSRC()
-				if writeErr := videoTrack.WriteRTP(packet); writeErr != nil {
-					log.Printf("Failed to write to video track: %s", err)
-					continue
-				}
-			}
-		}
-	}()
-
-	// Receive audio
-	go func() {
-		inboundRTPPacket := make([]byte, 1500) // UDP MTU
-		for {
-			n, _, err := audioListener.ReadFromUDP(inboundRTPPacket)
-			if err != nil {
-				log.Printf("Failed to read from UDP: %s", err)
-				break
-			}
-			packet := &rtp.Packet{}
-			if err := packet.Unmarshal(inboundRTPPacket[:n]); err != nil {
-				log.Printf("Failed to unmarshal RTP srtPacket: %s", err)
-				continue
-			}
-
-			if audioTracks[name] == nil {
-				audioTracks[name] = make([]*webrtc.Track, 0)
-			}
-
-			// Write RTP srtPacket to all audio tracks
-			// Adapt payload and SSRC to match destination
-			for _, audioTrack := range audioTracks[name] {
-				packet.Header.PayloadType = audioTrack.PayloadType()
-				packet.Header.SSRC = audioTrack.SSRC()
-				if writeErr := audioTrack.WriteRTP(packet); writeErr != nil {
-					log.Printf("Failed to write to audio track: %s", err)
+			for _, track := range tracks[name+qualityName] {
+				packet.Header.PayloadType = track.PayloadType()
+				packet.Header.SSRC = track.SSRC()
+				if writeErr := track.WriteRTP(packet); writeErr != nil {
+					log.Printf("Failed to write to track: %s", writeErr)
 					continue
 				}
 			}
@@ -105,24 +97,47 @@ func ingest(name string, q *messaging.Quality) {
 		log.Printf("Faited to wait for ffmpeg: %s", err)
 	}
 
-	// Close UDP listeners
-	if err = videoListener.Close(); err != nil {
+	// Close UDP listener
+	if err = listener.Close(); err != nil {
 		log.Printf("Faited to close UDP listener: %s", err)
 	}
-	if err = audioListener.Close(); err != nil {
-		log.Printf("Faited to close UDP listener: %s", err)
-	}
-	q.Unregister(videoInput)
+	q.Unregister(input)
 }
 
-func startFFmpeg(in <-chan []byte) (ffmpeg *exec.Cmd, err error) {
-	ffmpegArgs := []string{"-hide_banner", "-loglevel", "error", "-i", "pipe:0",
-		"-an", "-vcodec", "libvpx", "-crf", "10", "-cpu-used", "5", "-b:v", "6000k", "-maxrate", "8000k", "-bufsize", "12000k", // TODO Change bitrate when changing quality
-		"-qmin", "10", "-qmax", "42", "-threads", "4", "-deadline", "1", "-error-resilient", "1",
-		"-auto-alt-ref", "1",
-		"-f", "rtp", "rtp://127.0.0.1:5004",
-		"-vn", "-acodec", "libopus", "-cpu-used", "5", "-deadline", "1", "-qmin", "10", "-qmax", "42", "-error-resilient", "1", "-auto-alt-ref", "1",
-		"-f", "rtp", "rtp://127.0.0.1:5005"}
+func startFFmpeg(q *messaging.Quality, in <-chan []byte) (ffmpeg *exec.Cmd, err error) {
+	// FIXME Use transcoders to downscale, then remux in RTP
+	ffmpegArgs := []string{"-hide_banner", "-loglevel", "error", "-i", "pipe:0"}
+	switch q.Name {
+	case "audio":
+		ffmpegArgs = append(ffmpegArgs, "-vn", "-c:a", "libopus", "-b:a", "160k",
+			"-f", "rtp", "rtp://127.0.0.1:5004")
+		break
+	case "source":
+		ffmpegArgs = append(ffmpegArgs, "-an", "-c:v", "copy",
+			"-f", "rtp", "rtp://127.0.0.1:5005")
+		break
+	case "480p":
+		ffmpegArgs = append(ffmpegArgs,
+			"-an", "-c:v", "libx264", "-b:v", "1200k", "-maxrate", "2000k", "-bufsize", "3000k",
+			"-preset", "ultrafast", "-profile", "main", "-tune", "zerolatency",
+			"-vf", "scale=854:480",
+			"-f", "rtp", "rtp://127.0.0.1:5006")
+		break
+	case "360p":
+		ffmpegArgs = append(ffmpegArgs,
+			"-an", "-c:v", "libx264", "-b:v", "800k", "-maxrate", "1200k", "-bufsize", "1500k",
+			"-preset", "ultrafast", "-profile", "main", "-tune", "zerolatency",
+			"-vf", "scale=480:360",
+			"-f", "rtp", "rtp://127.0.0.1:5007")
+		break
+	case "240p":
+		ffmpegArgs = append(ffmpegArgs,
+			"-an", "-c:v", "libx264", "-b:v", "500k", "-maxrate", "800k", "-bufsize", "1000k",
+			"-preset", "ultrafast", "-profile", "main", "-tune", "zerolatency",
+			"-vf", "scale=360:240",
+			"-f", "rtp", "rtp://127.0.0.1:5008")
+		break
+	}
 	ffmpeg = exec.Command("ffmpeg", ffmpegArgs...)
 
 	// Handle errors output

stream/webrtc/webrtc.go

@@ -40,7 +40,7 @@ func removeTrack(tracks []*webrtc.Track, track *webrtc.Track) []*webrtc.Track {
 
 // GetNumberConnectedSessions get the number of currently connected clients
 func GetNumberConnectedSessions(streamID string) int {
-	return len(videoTracks[streamID])
+	return len(audioTracks[streamID])
 }
 
 // newPeerHandler is called when server receive a new session description
@@ -75,7 +75,7 @@ func newPeerHandler(name string, localSdpChan chan webrtc.SessionDescription, re
 	}
 
 	// Create video track
-	codec, payloadType := getPayloadType(mediaEngine, webrtc.RTPCodecTypeVideo, "VP8")
+	codec, payloadType := getPayloadType(mediaEngine, webrtc.RTPCodecTypeVideo, "H264")
 	videoTrack, err := webrtc.NewTrack(payloadType, rand.Uint32(), "video", "pion", codec)
 	if err != nil {
 		log.Println("Failed to create new video track", err)
@@ -117,21 +117,20 @@ func newPeerHandler(name string, localSdpChan chan webrtc.SessionDescription, re
 		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
 	peerConnection.OnICEConnectionStateChange(func(connectionState webrtc.ICEConnectionState) {
 		log.Printf("Connection State has changed %s \n", connectionState.String())
-		if videoTracks[streamID] == nil {
-			videoTracks[streamID] = make([]*webrtc.Track, 0, 1)
+		if videoTracks[streamID+"@"+quality] == nil {
+			videoTracks[streamID+"@"+quality] = make([]*webrtc.Track, 0, 1)
 		}
 		if audioTracks[streamID] == nil {
 			audioTracks[streamID] = make([]*webrtc.Track, 0, 1)
 		}
 		if connectionState == webrtc.ICEConnectionStateConnected {
 			// Register tracks
-			videoTracks[streamID] = append(videoTracks[streamID], videoTrack)
+			videoTracks[streamID+"@"+quality] = append(videoTracks[streamID+"@"+quality], videoTrack)
 			audioTracks[streamID] = append(audioTracks[streamID], audioTrack)
 			monitoring.WebRTCConnectedSessions.Inc()
 		} else if connectionState == webrtc.ICEConnectionStateDisconnected {
@@ -205,7 +204,7 @@ func Serve(streams *messaging.Streams, cfg *Options) {
 
 		// Get specific quality
 		// FIXME: make it possible to forward other qualities
-		qualityName := "source"
+		for _, qualityName := range []string{"source", "audio", "480p", "360p", "240p"} {
 			quality, err := stream.GetQuality(qualityName)
 			if err != nil {
 				log.Printf("Failed to get quality '%s'", qualityName)
@@ -217,6 +216,7 @@ func Serve(streams *messaging.Streams, cfg *Options) {
 			go listenSdp(name, quality.WebRtcLocalSdp, quality.WebRtcRemoteSdp, cfg)
 		}
 	}
+}
 
 func listenSdp(name string, localSdp, remoteSdp chan webrtc.SessionDescription, cfg *Options) {
 	// Handle new connections

stream/webrtc/webrtc_test.go

@@ -26,7 +26,7 @@ func TestServe(t *testing.T) {
 	peerConnection, _ := api.NewPeerConnection(webrtc.Configuration{})
 
 	// Create video track
-	codec, payloadType := getPayloadType(mediaEngine, webrtc.RTPCodecTypeVideo, "VP8")
+	codec, payloadType := getPayloadType(mediaEngine, webrtc.RTPCodecTypeVideo, "H264")
 	videoTrack, err := webrtc.NewTrack(payloadType, rand.Uint32(), "video", "pion", codec)
 	if err != nil {
 		t.Error("Failed to create new video track", err)

web/handler.go

@@ -21,76 +21,20 @@ var (
 	validPath = regexp.MustCompile("^/[a-z0-9@_-]*$")
 )
 
-// Handle WebRTC session description exchange via POST
-func viewerPostHandler(w http.ResponseWriter, r *http.Request) {
-	// Limit response body to 128KB
-	r.Body = http.MaxBytesReader(w, r.Body, 131072)
-
-	// Get stream ID from URL, or from domain name
-	path := r.URL.Path[1:]
-	host := r.Host
-	if strings.Contains(host, ":") {
-		realHost, _, err := net.SplitHostPort(r.Host)
-		if err != nil {
-			log.Printf("Failed to split host and port from %s", r.Host)
-			return
-		}
-		host = realHost
-	}
-	host = strings.Replace(host, ".", "-", -1)
-	if streamID, ok := cfg.MapDomainToStream[host]; ok {
-		path = streamID
-	}
-
-	// Decode client description
-	dec := json.NewDecoder(r.Body)
-	dec.DisallowUnknownFields()
-	remoteDescription := webrtc.SessionDescription{}
-	if err := dec.Decode(&remoteDescription); err != nil {
-		http.Error(w, "The JSON WebRTC offer is malformed", http.StatusBadRequest)
+// Handle site index and viewer pages
+func viewerHandler(w http.ResponseWriter, r *http.Request) {
+	// Validation on path
+	if validPath.FindStringSubmatch(r.URL.Path) == nil {
+		http.NotFound(w, r)
+		log.Printf("Replied not found on %s", r.URL.Path)
 		return
 	}
 
-	// Get requested stream
-	stream, err := streams.Get(path)
-	if err != nil {
-		http.Error(w, "Stream not found", http.StatusNotFound)
-		log.Printf("Stream not found: %s", path)
-		return
+	// Check method
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed.", http.StatusMethodNotAllowed)
 	}
 
-	// Get requested quality
-	// FIXME: extract quality from request
-	qualityName := "source"
-	q, err := stream.GetQuality(qualityName)
-	if err != nil {
-		http.Error(w, "Quality not found", http.StatusNotFound)
-		log.Printf("Quality not found: %s", qualityName)
-		return
-	}
-
-	// Exchange session descriptions with WebRTC stream server
-	q.WebRtcRemoteSdp <- remoteDescription
-	localDescription := <-q.WebRtcLocalSdp
-
-	// Send server description as JSON
-	jsonDesc, err := json.Marshal(localDescription)
-	if err != nil {
-		http.Error(w, "An error occurred while formating response", http.StatusInternalServerError)
-		log.Println("An error occurred while sending session description", err)
-		return
-	}
-	w.Header().Set("Content-Type", "application/json")
-	_, err = w.Write(jsonDesc)
-	if err != nil {
-		log.Println("An error occurred while sending session description", err)
-	}
-
-	// Increment monitoring
-	monitoring.WebSessions.Inc()
-}
-
-func viewerGetHandler(w http.ResponseWriter, r *http.Request) {
 	// Get stream ID from URL, or from domain name
 	path := r.URL.Path[1:]
 	host := r.Host
@@ -137,27 +81,6 @@ func viewerGetHandler(w http.ResponseWriter, r *http.Request) {
 	monitoring.WebViewerServed.Inc()
 }
 
-// Handle site index and viewer pages
-// POST requests are used to exchange WebRTC session descriptions
-func viewerHandler(w http.ResponseWriter, r *http.Request) {
-	// Validation on path
-	if validPath.FindStringSubmatch(r.URL.Path) == nil {
-		http.NotFound(w, r)
-		log.Printf("Replied not found on %s", r.URL.Path)
-		return
-	}
-
-	// Route depending on HTTP method
-	switch r.Method {
-	case http.MethodGet:
-		viewerGetHandler(w, r)
-	case http.MethodPost:
-		viewerPostHandler(w, r)
-	default:
-		http.Error(w, "Sorry, only GET and POST methods are supported.", http.StatusBadRequest)
-	}
-}
-
 func staticHandler() http.Handler {
 	// Set up static files server
 	staticFs := http.FileServer(pkger.Dir("/web/static"))

web/static/js/modules/viewerCounter.js

@@ -0,0 +1,29 @@
+/**
+ * ViewerCounter show the number of active viewers
+ */
+export class ViewerCounter {
+    /**
+     * @param {HTMLElement} element 
+     * @param {String} streamName 
+     */
+    constructor(element, streamName) {
+        this.element = element;
+        this.url = "/_stats/" + streamName;
+    }
+
+    /**
+     * Regulary update counter
+     * 
+     * @param {Number} updatePeriod 
+     */
+    regularUpdate(updatePeriod) {
+        setInterval(() => this.refreshViewersCounter(), updatePeriod);
+    }
+
+    refreshViewersCounter() {
+        fetch(this.url)
+            .then(response => response.json())
+            .then((data) => this.element.innerText = data.ConnectedViewers)
+            .catch(console.log);
+    }
+}

web/static/js/modules/webrtc.js

@@ -0,0 +1,99 @@
+/**
+ * GsWebRTC to connect to Ghostream
+ */
+export class GsWebRTC {
+    /**
+     * @param {list} stunServers STUN servers
+     * @param {HTMLElement} viewer Video HTML element
+     * @param {HTMLElement} connectionIndicator Connection indicator element
+     */
+    constructor(stunServers, viewer, connectionIndicator) {
+        this.viewer = viewer;
+        this.connectionIndicator = connectionIndicator;
+        this.pc = new RTCPeerConnection({
+            iceServers: [{ urls: stunServers }]
+        });
+
+        // We want to receive audio and video
+        this.pc.addTransceiver("video", { "direction": "sendrecv" });
+        this.pc.addTransceiver("audio", { "direction": "sendrecv" });
+
+        // Configure events
+        this.pc.oniceconnectionstatechange = () => this._onConnectionStateChange();
+        this.pc.ontrack = (e) => this._onTrack(e);
+    }
+
+    /**
+     * On connection change, log it and change indicator.
+     * If connection closed or failed, try to reconnect.
+     */
+    _onConnectionStateChange() {
+        console.log("[WebRTC] ICE connection state changed to " + this.pc.iceConnectionState);
+        switch (this.pc.iceConnectionState) {
+        case "disconnected":
+            this.connectionIndicator.style.fill = "#dc3545";
+            break;
+        case "checking":
+            this.connectionIndicator.style.fill = "#ffc107";
+            break;
+        case "connected":
+            this.connectionIndicator.style.fill = "#28a745";
+            break;
+        case "closed":
+        case "failed":
+            console.log("[WebRTC] Connection closed, restarting...");
+            /*peerConnection.close();
+                    peerConnection = null;
+                    setTimeout(startPeerConnection, 1000);*/
+            break;
+        }
+    }
+
+    /**
+     * On new track, add it to the player
+     * @param {Event} event 
+     */
+    _onTrack(event) {
+        console.log(`[WebRTC] New ${event.track.kind} track`);
+        if (event.track.kind === "video") {
+            this.viewer.srcObject = event.streams[0];
+        }
+    }
+
+    /**
+     * Create an offer and set local description.
+     * After that the browser will fire onicecandidate events.
+     */
+    createOffer() {
+        this.pc.createOffer().then(offer => {
+            this.pc.setLocalDescription(offer);
+            console.log("[WebRTC] WebRTC offer created");
+        }).catch(console.log);
+    }
+
+    /**
+     * Register a function to call to send local descriptions
+     * @param {Function} sendFunction Called with a local description to send.
+     */
+    onICECandidate(sendFunction) {
+        // When candidate is null, ICE layer has run out of potential configurations to suggest
+        // so let's send the offer to the server.
+        // FIXME: Send offers progressively to do Trickle ICE
+        this.pc.onicecandidate = event => {
+            if (event.candidate === null) {
+                // Send offer to server
+                console.log("[WebRTC] Sending session description to server");
+                sendFunction(this.pc.localDescription);
+            }
+        };
+    }
+
+    /**
+     * Set WebRTC remote description
+     * After that, the connection will be established and ontrack will be fired.
+     * @param {RTCSessionDescription} sdp Session description data
+     */
+    setRemoteDescription(sdp) {
+        this.pc.setRemoteDescription(sdp);
+    }
+}

web/static/js/modules/websocket.js

@@ -0,0 +1,62 @@
+/**
+ * GsWebSocket to do Ghostream signalling
+ */
+export class GsWebSocket {
+    constructor() {
+        const protocol = (window.location.protocol === "https:") ? "wss://" : "ws://";
+        this.url = protocol + window.location.host + "/_ws/";
+
+        // Open WebSocket
+        this._open();
+
+        // Configure events
+        this.socket.addEventListener("open", () => {
+            console.log("[WebSocket] Connection established");
+        });
+        this.socket.addEventListener("close", () => {
+            console.log("[WebSocket] Connection closed, retrying connection in 1s...");
+            setTimeout(() => this._open(), 1000);
+        });
+        this.socket.addEventListener("error", () => {
+            console.log("[WebSocket] Connection errored, retrying connection in 1s...");
+            setTimeout(() => this._open(), 1000);
+        });
+    }
+
+    _open() {
+        console.log(`[WebSocket] Connecting to ${this.url}...`);
+        this.socket = new WebSocket(this.url);
+    }
+
+    /**
+     * Send local WebRTC session description to remote.
+     * @param {SessionDescription} localDescription WebRTC local SDP
+     * @param {string} stream Name of the stream
+     * @param {string} quality Requested quality 
+     */
+    sendLocalDescription(localDescription, stream, quality) {
+        if (this.socket.readyState !== 1) {
+            console.log("[WebSocket] Waiting for connection to send data...");
+            setTimeout(() => this.sendLocalDescription(localDescription, stream, quality), 100);
+            return;
+        }
+        console.log(`[WebSocket] Sending WebRTC local session description for stream ${stream} quality ${quality}`);
+        this.socket.send(JSON.stringify({
+            "webRtcSdp": localDescription,
+            "stream": stream,
+            "quality": quality
+        }));
+    }
+
+    /**
+     * Set callback function on new remote session description.
+     * @param {Function} callback Function called when data is received
+     */
+    onRemoteDescription(callback) {
+        this.socket.addEventListener("message", (event) => {
+            console.log("[WebSocket] Received WebRTC remote session description");
+            const sdp = new RTCSessionDescription(JSON.parse(event.data));
+            callback(sdp);
+        });
+    }
+}

web/static/js/sideWidget.js

@@ -1,12 +0,0 @@
-// 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/videoQuality.js

@@ -1,9 +0,0 @@
-document.getElementById("quality").addEventListener("change", (event) => {
-    console.log(`Stream quality changed to ${event.target.value}`)
-
-    // Restart the connection with a new quality
-    peerConnection.close()
-    peerConnection = null
-    streamPath = window.location.href + event.target.value
-    startPeerConnection()
-})

web/static/js/viewer.js

@@ -1,97 +1,87 @@
-let peerConnection
-let streamPath = window.location.href
+import { GsWebSocket } from "./modules/websocket.js";
+import { ViewerCounter } from "./modules/viewerCounter.js";
+import { GsWebRTC } from "./modules/webrtc.js";
 
-startPeerConnection = () => {
-    // Init peer connection
-    peerConnection = new RTCPeerConnection({
-        iceServers: [{ urls: stunServers }]
-    })
+/**
+ * Initialize viewer page
+ * 
+ * @param {String} stream 
+ * @param {List} stunServers 
+ * @param {Number} viewersCounterRefreshPeriod 
+ */
+export function initViewerPage(stream, stunServers, viewersCounterRefreshPeriod) {
+    // Viewer element
+    const viewer = document.getElementById("viewer");
 
-    // On connection change, change indicator color
-    // if connection failed, restart peer connection
-    peerConnection.oniceconnectionstatechange = e => {
-        console.log("ICE connection state changed, " + peerConnection.iceConnectionState)
-        switch (peerConnection.iceConnectionState) {
-            case "disconnected":
-                document.getElementById("connectionIndicator").style.fill = "#dc3545"
-                break
-            case "checking":
-                document.getElementById("connectionIndicator").style.fill = "#ffc107"
-                break
-            case "connected":
-                document.getElementById("connectionIndicator").style.fill = "#28a745"
-                break
-            case "closed":
-            case "failed":
-                console.log("Connection failed, restarting...")
-                peerConnection.close()
-                peerConnection = null
-                setTimeout(startPeerConnection, 1000)
-                break
-        }
-    }
+    // Default quality
+    let quality = "240p";
 
-    // We want to receive audio and video
-    peerConnection.addTransceiver('video', { 'direction': 'sendrecv' })
-    peerConnection.addTransceiver('audio', { 'direction': 'sendrecv' })
-
-    // Create offer and set local description
-    peerConnection.createOffer().then(offer => {
-        // After setLocalDescription, the browser will fire onicecandidate events
-        peerConnection.setLocalDescription(offer)
-    }).catch(console.log)
-
-    // When candidate is null, ICE layer has run out of potential configurations to suggest
-    // so let's send the offer to the server
-    peerConnection.onicecandidate = event => {
-        if (event.candidate === null) {
-            // Send offer to server
-            // The server know the stream name from the url
-            // The server replies with its description
-            // After setRemoteDescription, the browser will fire ontrack events
-            console.log("Sending session description to server")
-            fetch(streamPath, {
-                method: 'POST',
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(peerConnection.localDescription)
-            })
-                .then(response => response.json())
-                .then((data) => peerConnection.setRemoteDescription(new RTCSessionDescription(data)))
-                .catch(console.log)
-        }
-    }
-
-    // When video track is received, configure player
-    peerConnection.ontrack = function (event) {
-        console.log(`New ${event.track.kind} track`)
-        if (event.track.kind === "video") {
-            const viewer = document.getElementById('viewer')
-            viewer.srcObject = event.streams[0]
-        }
-    }
-}
+    // Create WebSocket and WebRTC
+    const websocket = new GsWebSocket();
+    const webrtc = new GsWebRTC(
+        stunServers,
+        viewer,
+        document.getElementById("connectionIndicator"),
+    );
+    webrtc.createOffer();
+    webrtc.onICECandidate(localDescription => {
+        websocket.sendLocalDescription(localDescription, stream, quality);
+    });
+    websocket.onRemoteDescription(sdp => {
+        webrtc.setRemoteDescription(sdp);
+    });
 
     // Register keyboard events
-let viewer = document.getElementById("viewer")
     window.addEventListener("keydown", (event) => {
         switch (event.key) {
-        case 'f':
+        case "f":
             // F key put player in fullscreen
             if (document.fullscreenElement !== null) {
-                document.exitFullscreen()
+                document.exitFullscreen();
             } else {
-                viewer.requestFullscreen()
+                viewer.requestFullscreen();
             }
-            break
-        case 'm':
-        case ' ':
+            break;
+        case "m":
+        case " ":
             // M and space key mute player
-            viewer.muted = !viewer.muted
-            event.preventDefault()
-            viewer.play()
-            break
+            viewer.muted = !viewer.muted;
+            event.preventDefault();
+            viewer.play();
+            break;
+        }
+    });
+
+    // Create viewer counter
+    const viewerCounter = new ViewerCounter(
+        document.getElementById("connected-people"),
+        stream,
+    );
+    viewerCounter.regularUpdate(viewersCounterRefreshPeriod);
+    viewerCounter.refreshViewersCounter();
+
+    // Side widget toggler
+    const sideWidgetToggle = document.getElementById("sideWidgetToggle");
+    const sideWidget = document.getElementById("sideWidget");
+    if (sideWidgetToggle !== null && sideWidget !== null) {
+        // On click, toggle side widget visibility
+        sideWidgetToggle.addEventListener("click", function () {
+            if (sideWidget.style.display === "none") {
+                sideWidget.style.display = "block";
+                sideWidgetToggle.textContent = "»";
+            } else {
+                sideWidget.style.display = "none";
+                sideWidgetToggle.textContent = "«";
+            }
+        });
+    }
+
+    // Video quality toggler
+    document.getElementById("quality").addEventListener("change", (event) => {
+        quality = event.target.value;
+        console.log(`Stream quality changed to ${quality}`);
+
+        // Restart WebRTC negociation
+        webrtc.createOffer();
+    });
 }
-})

web/static/js/viewersCounter.js

@@ -1,12 +0,0 @@
-// Refresh viewer count by pulling metric from server
-function refreshViewersCounter(streamID, period) {
-    // Distinguish oneDomainPerStream mode
-    fetch("/_stats/" + streamID)
-        .then(response => response.json())
-        .then((data) => document.getElementById("connected-people").innerText = data.ConnectedViewers)
-        .catch(console.log)
-
-    setTimeout(() => {
-        refreshViewersCounter(streamID, period)
-    }, period)
-}

web/template/player.html

@@ -8,10 +8,10 @@
     <div class="controls">
       <span class="control-quality">
         <select id="quality">
-          <option value="">Source</option>
-          <option value="@720p">720p</option>
-          <option value="@480p">480p</option>
-          <option value="@240p">240p</option>
+          <option value="240p">Source</option>
+          <option value="480p">480p</option>
+          <option value="360p">360p</option>
+          <option value="240p">240p</option>
         </select>  
       </span>
       <code class="control-srt-link">srt://{{.Cfg.Hostname}}:{{.Cfg.SRTServerPort}}?streamid={{.Path}}</code>
@@ -34,21 +34,17 @@
   {{end}}
 </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>
+<script type="module">
+  import { initViewerPage } from "/static/js/viewer.js";
+
+  // Some variables that need to be fixed by web page
+  const viewersCounterRefreshPeriod = Number("{{.Cfg.ViewersCounterRefreshPeriod}}");
+  const stream = "{{.Path}}";
   const stunServers = [
     {{range $id, $value := .Cfg.STUNServers}}
-    '{{$value}}',
+    "{{$value}}",
     {{end}}
   ]
-  startPeerConnection()
-
-  // Wait a bit before pulling viewers counter for the first time
-  setTimeout(() => {
-      refreshViewersCounter("{{.Path}}", {{.Cfg.ViewersCounterRefreshPeriod}})
-  }, 1000)
+  initViewerPage(stream, stunServers, viewersCounterRefreshPeriod)
 </script>
 {{end}}

web/web.go

@@ -88,6 +88,7 @@ func Serve(s *messaging.Streams, c *Options) {
 	mux := http.NewServeMux()
 	mux.HandleFunc("/", viewerHandler)
 	mux.Handle("/static/", staticHandler())
+	mux.HandleFunc("/_ws/", websocketHandler)
 	mux.HandleFunc("/_stats/", statisticsHandler)
 	log.Printf("HTTP server listening on %s", cfg.ListenAddress)
 	log.Fatal(http.ListenAndServe(cfg.ListenAddress, mux))

web/websocket_handler.go

@@ -0,0 +1,67 @@
+// Package web serves the JavaScript player and WebRTC negotiation
+package web
+
+import (
+	"log"
+	"net/http"
+
+	"github.com/gorilla/websocket"
+	"gitlab.crans.org/nounous/ghostream/stream/webrtc"
+)
+
+var upgrader = websocket.Upgrader{
+	ReadBufferSize:  1024,
+	WriteBufferSize: 1024,
+}
+
+// clientDescription is sent by new client
+type clientDescription struct {
+	WebRtcSdp webrtc.SessionDescription
+	Stream    string
+	Quality   string
+}
+
+// websocketHandler exchanges WebRTC SDP and viewer count
+func websocketHandler(w http.ResponseWriter, r *http.Request) {
+	// Upgrade client connection to WebSocket
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Printf("Failed to upgrade client to websocket: %s", err)
+		return
+	}
+
+	for {
+		// Get client description
+		c := &clientDescription{}
+		err = conn.ReadJSON(c)
+		if err != nil {
+			log.Printf("Failed to receive client description: %s", err)
+			continue
+		}
+
+		// Get requested stream
+		stream, err := streams.Get(c.Stream)
+		if err != nil {
+			log.Printf("Stream not found: %s", c.Stream)
+			continue
+		}
+
+		// Get requested quality
+		q, err := stream.GetQuality(c.Quality)
+		if err != nil {
+			log.Printf("Quality not found: %s", c.Quality)
+			continue
+		}
+
+		// Exchange session descriptions with WebRTC stream server
+		// FIXME: Add trickle ICE support
+		q.WebRtcRemoteSdp <- c.WebRtcSdp
+		localDescription := <-q.WebRtcLocalSdp
+
+		// Send new local description
+		if err := conn.WriteJSON(localDescription); err != nil {
+			log.Println(err)
+			continue
+		}
+	}
+}