ghostream/web/static/js/modules/webrtc.js

100 lines
3.3 KiB
JavaScript
Raw Normal View History

2020-10-21 20:10:39 +00:00
/**
* GsWebRTC to connect to Ghostream
*/
export class GsWebRTC {
/**
2020-10-22 16:21:42 +00:00
* @param {list} stunServers STUN servers
* @param {HTMLElement} viewer Video HTML element
* @param {HTMLElement} connectionIndicator Connection indicator element
2020-10-21 20:10:39 +00:00
*/
2020-10-22 16:21:42 +00:00
constructor(stunServers, viewer, connectionIndicator) {
this.viewer = viewer;
2020-10-21 20:10:39 +00:00
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
2020-10-21 20:38:36 +00:00
this.pc.oniceconnectionstatechange = () => this._onConnectionStateChange();
this.pc.ontrack = (e) => this._onTrack(e);
2020-10-21 20:10:39 +00:00
}
/**
* On connection change, log it and change indicator.
* If connection closed or failed, try to reconnect.
*/
_onConnectionStateChange() {
2020-10-22 16:21:42 +00:00
console.log("[WebRTC] ICE connection state changed to " + this.pc.iceConnectionState);
2020-10-21 20:10:39 +00:00
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":
2020-10-22 16:21:42 +00:00
console.log("[WebRTC] Connection closed, restarting...");
2020-10-21 20:10:39 +00:00
/*peerConnection.close();
peerConnection = null;
setTimeout(startPeerConnection, 1000);*/
break;
}
}
/**
* On new track, add it to the player
* @param {Event} event
*/
_onTrack(event) {
2020-10-22 16:21:42 +00:00
console.log(`[WebRTC] New ${event.track.kind} track`);
2020-10-21 20:10:39 +00:00
if (event.track.kind === "video") {
2020-10-22 16:21:42 +00:00
this.viewer.srcObject = event.streams[0];
2020-10-21 20:10:39 +00:00
}
}
/**
* 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);
2020-10-22 16:21:42 +00:00
console.log("[WebRTC] WebRTC offer created");
2020-10-21 20:10:39 +00:00
}).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
2020-10-22 16:21:42 +00:00
console.log("[WebRTC] Sending session description to server");
2020-10-21 20:10:39 +00:00
sendFunction(this.pc.localDescription);
}
};
}
/**
* Set WebRTC remote description
* After that, the connection will be established and ontrack will be fired.
2020-10-22 06:23:35 +00:00
* @param {RTCSessionDescription} sdp Session description data
2020-10-21 20:10:39 +00:00
*/
2020-10-22 06:23:35 +00:00
setRemoteDescription(sdp) {
this.pc.setRemoteDescription(sdp);
2020-10-21 20:10:39 +00:00
}
}