Better javascript messages

web/static/js/modules/webrtc.js

@@ -3,10 +3,12 @@
  */
 export class GsWebRTC {
     /**
-     * @param {list} stunServers 
+     * @param {list} stunServers STUN servers
-     * @param {HTMLElement} connectionIndicator 
+     * @param {HTMLElement} viewer Video HTML element
+     * @param {HTMLElement} connectionIndicator Connection indicator element
      */
-    constructor(stunServers, connectionIndicator) {
+    constructor(stunServers, viewer, connectionIndicator) {
+        this.viewer = viewer;
         this.connectionIndicator = connectionIndicator;
         this.pc = new RTCPeerConnection({
             iceServers: [{ urls: stunServers }]
@@ -26,7 +28,7 @@ export class GsWebRTC {
      * If connection closed or failed, try to reconnect.
      */
     _onConnectionStateChange() {
-        console.log("ICE connection state changed to " + this.pc.iceConnectionState);
+        console.log("[WebRTC] ICE connection state changed to " + this.pc.iceConnectionState);
         switch (this.pc.iceConnectionState) {
         case "disconnected":
             this.connectionIndicator.style.fill = "#dc3545";
@@ -39,7 +41,7 @@ export class GsWebRTC {
             break;
         case "closed":
         case "failed":
-            console.log("Connection closed, restarting...");
+            console.log("[WebRTC] Connection closed, restarting...");
             /*peerConnection.close();
                     peerConnection = null;
                     setTimeout(startPeerConnection, 1000);*/
@@ -52,10 +54,9 @@ export class GsWebRTC {
      * @param {Event} event 
      */
     _onTrack(event) {
-        console.log(`New ${event.track.kind} track`);
+        console.log(`[WebRTC] New ${event.track.kind} track`);
         if (event.track.kind === "video") {
-            const viewer = document.getElementById("viewer");
+            this.viewer.srcObject = event.streams[0];
-            viewer.srcObject = event.streams[0];
         }
     }
 
@@ -66,7 +67,7 @@ export class GsWebRTC {
     createOffer() {
         this.pc.createOffer().then(offer => {
             this.pc.setLocalDescription(offer);
-            console.log("WebRTC offer created");
+            console.log("[WebRTC] WebRTC offer created");
         }).catch(console.log);
     }
 
@@ -81,7 +82,7 @@ export class GsWebRTC {
         this.pc.onicecandidate = event => {
             if (event.candidate === null) {
                 // Send offer to server
-                console.log("Sending session description to server");
+                console.log("[WebRTC] Sending session description to server");
                 sendFunction(this.pc.localDescription);
             }
         };

web/static/js/modules/websocket.js

@@ -5,44 +5,42 @@ 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);
     }
 
     /**
-     * Open websocket.
+     * Send local WebRTC session description to remote.
-     * @param {Function} openCallback Function called when connection is established. 
-     * @param {Function} closeCallback Function called when connection is lost. 
-     */
-    open() {
-        this._open();
-        this.socket.addEventListener("open", () => {
-            console.log("WebSocket opened");
-        });
-        this.socket.addEventListener("close", () => {
-            console.log("WebSocket closed, retrying connection in 1s...");
-            setTimeout(() => this._open(), 1000);
-        });
-        this.socket.addEventListener("error", () => {
-            console.log("WebSocket errored, retrying connection in 1s...");
-            setTimeout(() => this._open(), 1000);
-        });
-    }
-
-    /**
-     * Exchange WebRTC session description with server.
      * @param {SessionDescription} localDescription WebRTC local SDP
      * @param {string} stream Name of the stream
      * @param {string} quality Requested quality 
      */
-    sendDescription(localDescription, stream, quality) {
+    sendLocalDescription(localDescription, stream, quality) {
         if (this.socket.readyState !== 1) {
-            console.log("Waiting for WebSocket to send data...");
+            console.log("[WebSocket] Waiting for connection to send data...");
             setTimeout(() => this.sendDescription(localDescription, stream, quality), 100);
             return;
         }
+        console.log("[WebSocket] Sending WebRTC local session description");
         this.socket.send(JSON.stringify({
             "webRtcSdp": localDescription,
             "stream": stream,
@@ -51,12 +49,12 @@ export class GsWebSocket {
     }
 
     /**
-     * Set callback function on new session description.
+     * Set callback function on new remote session description.
      * @param {Function} callback Function called when data is received
      */
-    onDescription(callback) {
+    onRemoteDescription(callback) {
         this.socket.addEventListener("message", (event) => {
-            console.log("Message from server ", event.data);
+            console.log("[WebSocket] Received WebRTC remote session description");
             const sdp = new RTCSessionDescription(JSON.parse(event.data));
             callback(sdp);
         });

web/static/js/viewer.js

@@ -10,28 +10,28 @@ import { GsWebRTC } from "./modules/webrtc.js";
  * @param {Number} viewersCounterRefreshPeriod 
  */
 export function initViewerPage(stream, stunServers, viewersCounterRefreshPeriod) {
+    // Viewer element
+    const viewer = document.getElementById("viewer");
+
     // Default quality
     let quality = "source";
 
-    // Create WebSocket
+    // Create WebSocket and WebRTC
-    const s = new GsWebSocket();
+    const websocket = new GsWebSocket();
-    s.open();
+    const webrtc = new GsWebRTC(
-
-    // Create WebRTC
-    const c = new GsWebRTC(
         stunServers,
+        viewer,
         document.getElementById("connectionIndicator"),
     );
-    c.createOffer();
+    webrtc.createOffer();
-    c.onICECandidate(localDescription => {
+    webrtc.onICECandidate(localDescription => {
-        s.sendDescription(localDescription, stream, quality);
+        websocket.sendLocalDescription(localDescription, stream, quality);
     });
-    s.onDescription(sdp => {
+    websocket.onRemoteDescription(sdp => {
-        c.setRemoteDescription(sdp);
+        webrtc.setRemoteDescription(sdp);
     });
 
     // Register keyboard events
-    const viewer = document.getElementById("viewer");
     window.addEventListener("keydown", (event) => {
         switch (event.key) {
         case "f":