WebRTC JS module

web/static/js/modules/webrtc.js

@@ -0,0 +1,98 @@
+/**
+ * GsWebRTC to connect to Ghostream
+ */
+export class GsWebRTC {
+    /**
+     * @param {list} stunServers 
+     * @param {HTMLElement} connectionIndicator 
+     */
+    constructor(stunServers, connectionIndicator) {
+        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 = this._onTrack;
+    }
+
+    /**
+     * On connection change, log it and change indicator.
+     * If connection closed or failed, try to reconnect.
+     */
+    _onConnectionStateChange() {
+        console.log("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("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(`New ${event.track.kind} track`);
+        if (event.track.kind === "video") {
+            const viewer = document.getElementById("viewer");
+            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 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("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 {*} data Session description data
+     */
+    setRemoteDescription(data) {
+        this.pc.setRemoteDescription(new RTCSessionDescription(data));
+    }
+}

web/static/js/modules/websocket.js

@@ -13,7 +13,6 @@ export class GsWebSocket {
 
     /**
      * Open websocket.
-     * 
      * @param {Function} openCallback Function called when connection is established. 
      * @param {Function} closeCallback Function called when connection is lost. 
      */
@@ -34,19 +33,31 @@ export class GsWebSocket {
 
     /**
      * Exchange WebRTC session description with server.
-     * 
-     * @param {string} data JSON formated data 
-     * @param {Function} receiveCallback Function called when data is received
+     * @param {SessionDescription} localDescription WebRTC local SDP
+     * @param {string} stream Name of the stream
+     * @param {string} quality Requested quality 
      */
-    exchangeDescription(data, receiveCallback) {
+    sendDescription(localDescription, stream, quality) {
         if (this.socket.readyState !== 1) {
             console.log("WebSocket not ready to send data");
             return;
         }
-        this.socket.send(data);
+        this.socket.send(JSON.stringify({
+            "webRtcSdp": localDescription,
+            "stream": stream,
+            "quality": quality
+        }));
+    }
+
+    /**
+     * Set callback function on new session description.
+     * @param {Function} callback Function called when data is received
+     */
+    onDescription(callback) {
         this.socket.addEventListener("message", (event) => {
+            // FIXME: json to session description
             console.log("Message from server ", event.data);
-            receiveCallback(event);
+            callback(event.data);
         });
     }
 }