mirror of
https://github.com/AlexandreRouma/wiscast.git
synced 2026-04-18 23:52:42 +00:00
initial commit
This commit is contained in:
AlexandreRouma
185
www/scripts/client.js
Normal file
185
www/scripts/client.js
Normal file
@@ -0,0 +1,185 @@
|
||||
// Streaming objects
|
||||
let sock = null;
|
||||
let stream = null;
|
||||
let conn = null;
|
||||
|
||||
// GUI Objects
|
||||
let connForm = document.querySelector('#connForm');
|
||||
let dispNameTb = document.querySelector('#dispName');
|
||||
let connBtn = document.querySelector('#connect');
|
||||
let pinValForm = document.querySelector('#pinValForm');
|
||||
let dispPINTb = document.querySelector('#dispPIN');
|
||||
let validateBtn = document.querySelector('#validate');
|
||||
let streamForm = document.querySelector('#streamForm');
|
||||
let locPlayback = document.querySelector('#localPlayback');
|
||||
|
||||
// Make sure the connect button cannot be pressed if there is no display name
|
||||
function onDispNameChange() {
|
||||
connBtn.disabled = !(dispNameTb.value.length > 0);
|
||||
}
|
||||
function onPINChange() {
|
||||
validateBtn.disabled = !(dispPINTb.value.length === 6);
|
||||
}
|
||||
|
||||
// Handle enter key pressed
|
||||
dispNameTb.addEventListener('keyup', (event) => {
|
||||
if (event.key === 'Enter' && !connBtn.disabled) {
|
||||
connBtn.click();
|
||||
}
|
||||
})
|
||||
dispPINTb.addEventListener('keyup', (event) => {
|
||||
if (event.key === 'Enter' && !validateBtn.disabled) {
|
||||
validateBtn.click();
|
||||
}
|
||||
})
|
||||
|
||||
// WebSocket message handler
|
||||
async function onMessage(data) {
|
||||
// Parse the message
|
||||
console.log(data)
|
||||
const msg = JSON.parse(data);
|
||||
|
||||
// Process depending on the type
|
||||
switch (msg.type) {
|
||||
case 'disp-ok':
|
||||
// Switch to the PIN screen
|
||||
connForm.hidden = true;
|
||||
pinValForm.hidden = false;
|
||||
dispPINTb.focus();
|
||||
dispPINTb.select();
|
||||
break;
|
||||
|
||||
case 'disp-error':
|
||||
// Show the error
|
||||
// TODO
|
||||
console.log('ERROR: ' + msg.error)
|
||||
break;
|
||||
|
||||
case 'auth-ok':
|
||||
// Show the status update
|
||||
validateBtn.textContent = 'Starting the Stream...';
|
||||
await startStream();
|
||||
break;
|
||||
|
||||
case 'answer':
|
||||
console.log('Got answer')
|
||||
// Pass on the offer to WebRTC
|
||||
await conn.setRemoteDescription(new RTCSessionDescription(msg.answer));
|
||||
break;
|
||||
|
||||
case 'ice-candidate':
|
||||
console.log('Got ice candidate')
|
||||
// Add the ice candidate to the WebRTC connection
|
||||
await conn.addIceCandidate(msg.candidate);
|
||||
break;
|
||||
|
||||
case 'disconnect':
|
||||
// Reload the page
|
||||
location.reload();
|
||||
break;
|
||||
|
||||
default:
|
||||
console.dir(msg)
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function startStream() {
|
||||
// Get the stream for the screen
|
||||
stream = await navigator.mediaDevices.getDisplayMedia({ video: { cursor: 'always' } });
|
||||
|
||||
// Create the connection
|
||||
conn = new RTCPeerConnection({'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]});
|
||||
|
||||
// Handle ice candidates
|
||||
conn.addEventListener('icecandidate', async (event) => {
|
||||
// If there is a new candidate, send it to the peer through websockets
|
||||
if (event.candidate) {
|
||||
await sock.send(JSON.stringify({
|
||||
type: 'ice-candidate',
|
||||
candidate: event.candidate
|
||||
}))
|
||||
}
|
||||
});
|
||||
|
||||
// Handle connection and disconnection of peer
|
||||
conn.addEventListener('connectionstatechange', (event) => {
|
||||
switch (conn.connectionState) {
|
||||
case 'connected':
|
||||
// Switch to stream screen
|
||||
pinValForm.hidden = true;
|
||||
streamForm.hidden = false;
|
||||
locPlayback.srcObject = stream;
|
||||
|
||||
console.log("Connected!")
|
||||
|
||||
break;
|
||||
|
||||
case 'disconnected':
|
||||
console.log("Disconnected.")
|
||||
// Reload the page to ensure the state is complete reset
|
||||
location.reload();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Start streaming the screen
|
||||
stream.getTracks().forEach(track => {
|
||||
conn.addTrack(track, stream);
|
||||
});
|
||||
|
||||
// If the stream ends, reload the page
|
||||
stream.getVideoTracks()[0].addEventListener('ended', (event) => {
|
||||
location.reload();
|
||||
})
|
||||
|
||||
// Create and send an offer
|
||||
const offer = await conn.createOffer();
|
||||
await conn.setLocalDescription(offer);
|
||||
await sock.send(JSON.stringify({
|
||||
type: 'offer',
|
||||
offer: offer
|
||||
}))
|
||||
}
|
||||
|
||||
async function connect() {
|
||||
// Disable the connect button and show status
|
||||
dispNameTb.disabled = true;
|
||||
connBtn.disabled = true;
|
||||
connBtn.textContent = 'Connecting...';
|
||||
|
||||
// Send a connect command to the server
|
||||
await sock.send(JSON.stringify({
|
||||
type: 'connect',
|
||||
dispID: dispNameTb.value
|
||||
}));
|
||||
}
|
||||
|
||||
async function validatePIN() {
|
||||
// Disable the validate button and show status
|
||||
dispPINTb.disabled = true;
|
||||
validateBtn.disabled = true;
|
||||
validateBtn.textContent = 'Checking the PIN...';
|
||||
|
||||
// Send the validate pin command to the server
|
||||
await sock.send(JSON.stringify({
|
||||
type: 'validate-pin',
|
||||
pin: dispPINTb.value
|
||||
}));
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
// Just reload the page
|
||||
location.reload();
|
||||
}
|
||||
|
||||
// Connect to the server using WebSockets
|
||||
console.log('Connecting to websocket...')
|
||||
sock = new WebSocket(`ws://${location.host}/sig`);
|
||||
sock.addEventListener('open', async (event) => {
|
||||
console.log('Connected to websocket')
|
||||
});
|
||||
sock.addEventListener('message', (event) => { onMessage(event.data); })
|
||||
155
www/scripts/screen.js
Normal file
155
www/scripts/screen.js
Normal file
@@ -0,0 +1,155 @@
|
||||
// Get or generate a display ID
|
||||
let params = new URLSearchParams(document.location.search);
|
||||
let dispID = params.get("dispID");
|
||||
if (dispID === null) {
|
||||
// Generate a random name (TODO)
|
||||
dispID = self.crypto.randomUUID().substring(0, 6);
|
||||
}
|
||||
|
||||
// App objects
|
||||
let sock = null;
|
||||
let conn = null;
|
||||
|
||||
// GUI Objects
|
||||
let idleScreen = document.querySelector('#idleScreen');
|
||||
let dispIDSpan = document.querySelector('#dispID');
|
||||
let pinScreen = document.querySelector('#pinScreen');
|
||||
let pinSpan = document.querySelector('#pin');
|
||||
let playback = document.querySelector('#playback');
|
||||
let credits = document.querySelector('#credits');
|
||||
|
||||
// Show the display ID
|
||||
dispIDSpan.textContent = dispID;
|
||||
|
||||
async function reset() {
|
||||
// Completely reset the state
|
||||
playback.hidden = true;
|
||||
pinScreen.hidden = true;
|
||||
idleScreen.hidden = false;
|
||||
credits.hidden = false;
|
||||
playback.srcObject = null;
|
||||
conn = null;
|
||||
|
||||
// Initialize WebRTC
|
||||
await initRTC();
|
||||
}
|
||||
|
||||
// WebSocket message handler
|
||||
async function onMessage(data) {
|
||||
// Parse the message
|
||||
console.log(data)
|
||||
const msg = JSON.parse(data);
|
||||
|
||||
// Process depending on the type
|
||||
switch (msg.type) {
|
||||
case 'conn-req':
|
||||
// Show the pin
|
||||
pinSpan.textContent = msg.pin;
|
||||
|
||||
// Switch to pin mode
|
||||
idleScreen.hidden = true;
|
||||
pinScreen.hidden = false;
|
||||
break;
|
||||
|
||||
case 'offer':
|
||||
console.log('Got offer')
|
||||
// Pass on the offer to WebRTC
|
||||
await conn.setRemoteDescription(new RTCSessionDescription(msg.offer));
|
||||
|
||||
// Create an answer
|
||||
answer = await conn.createAnswer();
|
||||
await conn.setLocalDescription(answer);
|
||||
|
||||
// Encode and send the answer
|
||||
await sock.send(JSON.stringify({
|
||||
type: 'answer',
|
||||
answer: answer
|
||||
}))
|
||||
break;
|
||||
|
||||
case 'ice-candidate':
|
||||
console.log('Got ice candidate')
|
||||
// Add the ice candidate to the WebRTC connection
|
||||
await conn.addIceCandidate(msg.candidate);
|
||||
break;
|
||||
|
||||
case 'auth-ok':
|
||||
|
||||
break;
|
||||
|
||||
case 'disconnect':
|
||||
// Reset the display
|
||||
reset();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function initRTC() {
|
||||
// Create the WebRTC connection
|
||||
conn = new RTCPeerConnection({'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]});
|
||||
|
||||
// Handle new ice candidates
|
||||
conn.addEventListener('icecandidate', async (event) => {
|
||||
// If there is a new candidate, send it to the peer through websockets
|
||||
if (event.candidate) {
|
||||
await sock.send(JSON.stringify({
|
||||
type: 'ice-candidate',
|
||||
candidate: event.candidate
|
||||
}))
|
||||
}
|
||||
});
|
||||
|
||||
// Handle connection and disconnection of peer
|
||||
conn.addEventListener('connectionstatechange', (event) => {
|
||||
switch (conn.connectionState) {
|
||||
case 'connected':
|
||||
// Switch to playback mode
|
||||
pinScreen.hidden = true;
|
||||
credits.hidden = true;
|
||||
playback.hidden = false;
|
||||
break;
|
||||
|
||||
case 'disconnected':
|
||||
// Reset the display
|
||||
reset();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Send remote stream to the playback widget
|
||||
conn.addEventListener('track', (event) => {
|
||||
const [remoteStream] = event.streams;
|
||||
playback.srcObject = remoteStream;
|
||||
});
|
||||
}
|
||||
|
||||
// Main function for the app
|
||||
async function main() {
|
||||
// Connect to the server using WebSockets
|
||||
console.log('Connecting to websocket...')
|
||||
sock = new WebSocket(`ws://${location.host}/sig`);
|
||||
|
||||
// Add handlers for the socket
|
||||
sock.addEventListener('message', (event) => { onMessage(event.data); })
|
||||
|
||||
sock.addEventListener('open', async (event) => {
|
||||
console.log('Connected to websocket')
|
||||
// Tell the server that this is a screen
|
||||
await sock.send(JSON.stringify({
|
||||
type: 'screen',
|
||||
name: dispID
|
||||
}))
|
||||
|
||||
// Initialize WebRTC
|
||||
await initRTC();
|
||||
});
|
||||
}
|
||||
|
||||
// Run the main function
|
||||
main();
|
||||
Reference in New Issue
Block a user