1
0
mirror of https://gitlab.crans.org/nounous/ghostream.git synced 2025-03-16 21:27:30 +00:00

Compare commits

...

2 Commits

Author SHA1 Message Date
Alexandre Iooss
ff2ebd76f1
Make viewer able to change quality 2020-10-22 18:41:14 +02:00
Alexandre Iooss
4cbb1d8192
Better javascript messages 2020-10-22 18:21:42 +02:00
5 changed files with 57 additions and 58 deletions

View File

@ -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);
}
};

View File

@ -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 for stream ${stream} quality ${quality}`);
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);
});

View File

@ -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":
@ -81,7 +81,7 @@ export function initViewerPage(stream, stunServers, viewersCounterRefreshPeriod)
quality = event.target.value;
console.log(`Stream quality changed to ${quality}`);
// Restart the connection with a new quality
// FIXME
// Restart WebRTC negociation
webrtc.createOffer();
});
}

View File

@ -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="source">Source</option>
<option value="720p">720p</option>
<option value="480p">480p</option>
<option value="240p">240p</option>
</select>
</span>
<code class="control-srt-link">srt://{{.Cfg.Hostname}}:{{.Cfg.SRTServerPort}}?streamid={{.Path}}</code>

View File

@ -36,21 +36,21 @@ func websocketHandler(w http.ResponseWriter, r *http.Request) {
err = conn.ReadJSON(c)
if err != nil {
log.Printf("Failed to receive client description: %s", err)
return
continue
}
// Get requested stream
stream, err := streams.Get(c.Stream)
if err != nil {
log.Printf("Stream not found: %s", c.Stream)
return
continue
}
// Get requested quality
q, err := stream.GetQuality(c.Quality)
if err != nil {
log.Printf("Quality not found: %s", c.Quality)
return
continue
}
// Exchange session descriptions with WebRTC stream server
@ -61,7 +61,7 @@ func websocketHandler(w http.ResponseWriter, r *http.Request) {
// Send new local description
if err := conn.WriteJSON(localDescription); err != nil {
log.Println(err)
return
continue
}
}
}