diff --git a/web/static/js/modules/webrtc.js b/web/static/js/modules/webrtc.js index df359e7..ec72ac1 100644 --- a/web/static/js/modules/webrtc.js +++ b/web/static/js/modules/webrtc.js @@ -3,10 +3,12 @@ */ export class GsWebRTC { /** - * @param {list} stunServers - * @param {HTMLElement} connectionIndicator + * @param {list} stunServers STUN servers + * @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"); - viewer.srcObject = event.streams[0]; + this.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); } }; diff --git a/web/static/js/modules/websocket.js b/web/static/js/modules/websocket.js index 1c34e5f..d77a4e6 100644 --- a/web/static/js/modules/websocket.js +++ b/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. - * @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. + * 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 */ - 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); }); diff --git a/web/static/js/viewer.js b/web/static/js/viewer.js index 1e0e7d3..ded1a83 100644 --- a/web/static/js/viewer.js +++ b/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 - const s = new GsWebSocket(); - s.open(); - - // Create WebRTC - const c = new GsWebRTC( + // Create WebSocket and WebRTC + const websocket = new GsWebSocket(); + const webrtc = new GsWebRTC( stunServers, + viewer, document.getElementById("connectionIndicator"), ); - c.createOffer(); - c.onICECandidate(localDescription => { - s.sendDescription(localDescription, stream, quality); + webrtc.createOffer(); + webrtc.onICECandidate(localDescription => { + websocket.sendLocalDescription(localDescription, stream, quality); }); - s.onDescription(sdp => { - c.setRemoteDescription(sdp); + websocket.onRemoteDescription(sdp => { + webrtc.setRemoteDescription(sdp); }); // Register keyboard events - const viewer = document.getElementById("viewer"); window.addEventListener("keydown", (event) => { switch (event.key) { case "f":