mirror of
https://gitlab.crans.org/nounous/ghostream.git
synced 2024-12-24 00:52:19 +00:00
Better javascript messages
This commit is contained in:
parent
24478bdc7a
commit
4cbb1d8192
@ -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);
|
||||
}
|
||||
};
|
||||
|
@ -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);
|
||||
});
|
||||
|
@ -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":
|
||||
|
Loading…
Reference in New Issue
Block a user