Added ux to vanilla client, rebuild server side
This commit is contained in:
gltron
201
client/scripts/rtc.js
Normal file
201
client/scripts/rtc.js
Normal file
@@ -0,0 +1,201 @@
|
||||
var name
|
||||
var connections = new Map()
|
||||
|
||||
const configuration = {
|
||||
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
|
||||
}
|
||||
|
||||
const offerOptions = {
|
||||
offerToReceiveAudio: 1,
|
||||
offerToReceiveVideo: 1
|
||||
}
|
||||
|
||||
function handleLogin(success) {
|
||||
if (success === false) {
|
||||
alert('try a different username')
|
||||
} else {
|
||||
loginDiv.style.display = 'none'
|
||||
connectDiv.style.display = 'block'
|
||||
}
|
||||
}
|
||||
|
||||
async function createPeerConnection(target) {
|
||||
console.log('CREATED PEER CONNECTION')
|
||||
var connection = new RTCPeerConnection(configuration)
|
||||
connections[target] = connection
|
||||
|
||||
connection.onicecandidate = function(event) {
|
||||
if (event.candidate) {
|
||||
send({
|
||||
type: 'candidate',
|
||||
name: name,
|
||||
target: target,
|
||||
candidate: event.candidate
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
connection.onnegotiationneeded = function() { handleNegotiationNeededEvent(target) }
|
||||
connection.ontrack = function(event) { handleTrackEvent(event) }
|
||||
connection.onsignalingstatechange = function() { handleSignalingStateChangeEvent(connection) }
|
||||
connection.oniceconnectionstatechange = function() { handleICEConnectionStateChangeEvent(connection) }
|
||||
connection.onicegatheringstatechange = function() { handleICEGatheringStateChangeEvent(connection) }
|
||||
|
||||
// window.setInterval(getConnectionStats, 1000)
|
||||
}
|
||||
|
||||
function handleICEConnectionStateChangeEvent(connection) {
|
||||
console.log('ICE CONNECTION CHANGE ' + connection.iceConnectionState)
|
||||
}
|
||||
|
||||
function handleICEGatheringStateChangeEvent(connection) {
|
||||
console.log('ICE GATHERING CHANGE ' + connection.iceGatheringState)
|
||||
}
|
||||
|
||||
async function makeOffer(target) {
|
||||
createPeerConnection(target)
|
||||
|
||||
var connection = connections[target]
|
||||
|
||||
var offer = await connection.createOffer()
|
||||
send({
|
||||
type: 'offer',
|
||||
name: name,
|
||||
target: target,
|
||||
offer: offer
|
||||
})
|
||||
await connection.setLocalDescription(offer)
|
||||
|
||||
}
|
||||
|
||||
async function handleOffer(offer, target) {
|
||||
console.log('GOT OFFER FROM ' + target)
|
||||
await createPeerConnection(target)
|
||||
|
||||
var connection = connections[target]
|
||||
|
||||
await connection.setRemoteDescription(new RTCSessionDescription(offer))
|
||||
|
||||
if (stream) {
|
||||
console.log('STREAM DETECTED')
|
||||
stream.getTracks().forEach((track) => {
|
||||
console.log('ADDED TRACK')
|
||||
connection.addTrack(track, stream)
|
||||
})
|
||||
}
|
||||
|
||||
var answer = await connection.createAnswer()
|
||||
|
||||
await connection.setLocalDescription(answer)
|
||||
|
||||
send({
|
||||
type: 'answer',
|
||||
name: name,
|
||||
target: target,
|
||||
answer: answer
|
||||
})
|
||||
|
||||
for (let user of connections.keys()) {
|
||||
console.log(user);
|
||||
}
|
||||
|
||||
console.log('CONNECTION SIZE ' + connections.size)
|
||||
|
||||
videoTitle.innerHTML = name + ' | ' + connections.size + ' users connected'
|
||||
}
|
||||
|
||||
async function handleAnswer(answer, target) {
|
||||
console.log('GOT ANSWER FROM ' + target)
|
||||
var connection = connections[target]
|
||||
await connection.setRemoteDescription(new RTCSessionDescription(answer))
|
||||
}
|
||||
|
||||
async function handleCandidate(candidate, target) {
|
||||
console.log('GOT CANDIDATE FROM ' + target)
|
||||
var connection = connections[target]
|
||||
await connection.addIceCandidate(new RTCIceCandidate(candidate))
|
||||
}
|
||||
|
||||
async function handleNegotiationNeededEvent(target) {
|
||||
console.log('NEGOTIATION NEEDED FROM ' + target)
|
||||
|
||||
var connection = connections[target]
|
||||
var offer = await connection.createOffer(offerOptions)
|
||||
|
||||
await connection.setLocalDescription(offer)
|
||||
|
||||
send({
|
||||
type: 'video-offer',
|
||||
name: name,
|
||||
target: target,
|
||||
sdp: connection.localDescription
|
||||
})
|
||||
}
|
||||
|
||||
function handleLeave() {
|
||||
connections.forEach((connection) => {
|
||||
connection.close()
|
||||
connection = null
|
||||
})
|
||||
connections = new Map()
|
||||
|
||||
remoteVideo.pause()
|
||||
remoteVideo.src = null
|
||||
}
|
||||
|
||||
async function handleVideoOffer(sdp, target) {
|
||||
console.log('GOT VIDEO OFFER FROM ' + target)
|
||||
await createPeerConnection(target)
|
||||
var connection = connections[target]
|
||||
await connection.setRemoteDescription(new RTCSessionDescription(sdp))
|
||||
|
||||
if (stream) {
|
||||
console.log('STREAM DETECTED')
|
||||
stream.getTracks().forEach((track) => {
|
||||
console.log('ADDED TRACK')
|
||||
connection.addTrack(track, stream)
|
||||
})
|
||||
}
|
||||
|
||||
var answer = await connection.createAnswer()
|
||||
await connection.setLocalDescription(answer)
|
||||
|
||||
send({
|
||||
type: 'video-answer',
|
||||
name: name,
|
||||
target: target,
|
||||
sdp: answer
|
||||
})
|
||||
|
||||
//var keys = connections.keys().next().value
|
||||
videoTitle.innerHTML = name + ' | connected to ' + target
|
||||
}
|
||||
|
||||
async function handleVideoAnswer(sdp, target) {
|
||||
console.log('GOT VIDEO ANSWER FROM ' + target)
|
||||
|
||||
var connection = connections[target]
|
||||
await connection.setRemoteDescription(new RTCSessionDescription(sdp))
|
||||
}
|
||||
|
||||
async function handleSignalingStateChangeEvent(connection) {
|
||||
console.log('STATE CHANGED TO : ' + connection.signalingState)
|
||||
switch(connection.signalingState) {
|
||||
case 'closed':
|
||||
await connection.close()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function handleTrackEvent(event) {
|
||||
console.log('GOT TRACK')
|
||||
remoteVideo.srcObject = event.streams[0]
|
||||
videoDiv.style.display = 'block'
|
||||
loadDiv.style.display = 'none'
|
||||
}
|
||||
|
||||
function getConnectionStats() {
|
||||
connections.forEach((connection, target) => {
|
||||
console.log('[' + target + '] ' + connection.connectionState)
|
||||
})
|
||||
}
|
||||
90
client/scripts/script.js
Normal file
90
client/scripts/script.js
Normal file
@@ -0,0 +1,90 @@
|
||||
const loginDiv = document.querySelector('#loginDiv')
|
||||
const loginInput = document.querySelector('#loginInput')
|
||||
const loginBt = document.querySelector('#loginBt')
|
||||
|
||||
const connectDiv = document.querySelector('#connectDiv')
|
||||
const callInput = document.querySelector('#callInput')
|
||||
const callDatalist = document.querySelector('#callDatalist')
|
||||
const callBt = document.querySelector('#callBt')
|
||||
const videoInput = document.querySelector('#videoInput')
|
||||
|
||||
const videoDiv = document.querySelector('#videoDiv')
|
||||
const videoTitle = document.querySelector('#videoTitle')
|
||||
const remoteVideo = document.querySelector('#video')
|
||||
const disconnectBt = document.querySelector('#disconnectBt')
|
||||
|
||||
const loadDiv = document.querySelector('#loadDiv')
|
||||
const titleDiv = document.querySelector('#titleDiv')
|
||||
|
||||
var stream
|
||||
var users
|
||||
|
||||
loginDiv.style.display = 'block'
|
||||
|
||||
loginBt.addEventListener('click', function (event) {
|
||||
name = loginInput.value
|
||||
|
||||
if (name.length > 0) {
|
||||
send({
|
||||
type: 'login',
|
||||
name: name
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
callBt.addEventListener('click', function () {
|
||||
var callToUsername = callInput.value;
|
||||
|
||||
if (callToUsername.length > 0) {
|
||||
makeOffer(callToUsername)
|
||||
loadDiv.style.display = 'block'
|
||||
titleDiv.style.display = 'none'
|
||||
connectDiv.style.display = 'none'
|
||||
}
|
||||
})
|
||||
|
||||
disconnectBt.addEventListener('click', function () {
|
||||
send({
|
||||
type: 'leave',
|
||||
name: name
|
||||
})
|
||||
handleLeave()
|
||||
videoDiv.style.display = 'none'
|
||||
loginDiv.style.display = 'block'
|
||||
titleDiv.style.display = 'block'
|
||||
})
|
||||
|
||||
videoInput.addEventListener('change', function (event) {
|
||||
remoteVideo.src = URL.createObjectURL(this.files[0])
|
||||
|
||||
videoDiv.style.display = 'block'
|
||||
connectDiv.style.display = 'none'
|
||||
titleDiv.style.display = 'none'
|
||||
videoTitle.innerHTML = name + ' | ' + connections.size + ' users connected'
|
||||
})
|
||||
|
||||
remoteVideo.onplay = function () {
|
||||
console.log('ADD STREAM')
|
||||
if (remoteVideo.mozCaptureStream()) stream = remoteVideo.mozCaptureStream()
|
||||
else stream = remoteVideo.captureStream()
|
||||
}
|
||||
|
||||
function handleUserlist(list) {
|
||||
console.log('GOT USER LIST '+list)
|
||||
users = Array.from(list)
|
||||
console.log(' users '+users)
|
||||
console.log(typeof users)
|
||||
console.log(' users '+users)
|
||||
callDatalist.innerHTML = ''
|
||||
users.forEach(user => {
|
||||
if(user != name) callDatalist.innerHTML += '<option value="'+user+'"/>'
|
||||
})
|
||||
}
|
||||
|
||||
function handleError(message) {
|
||||
console.log('Error '+message)
|
||||
alert(
|
||||
'AWWW FUCK \n\n'
|
||||
+message
|
||||
+'\n\nYou should probably reload the page')
|
||||
}
|
||||
62
client/scripts/signal.js
Normal file
62
client/scripts/signal.js
Normal file
@@ -0,0 +1,62 @@
|
||||
//const conn = new WebSocket('wss://gltronic.ovh/lilstreamy/')
|
||||
const conn = new WebSocket('wss://localhost:8080')
|
||||
|
||||
conn.onopen = function () {
|
||||
console.log('Connected to the signaling server')
|
||||
}
|
||||
|
||||
conn.onmessage = function (msg) {
|
||||
console.log('Got message', msg.data);
|
||||
|
||||
var data = JSON.parse(msg.data);
|
||||
|
||||
switch (data.type) {
|
||||
case 'login':
|
||||
handleLogin(data.success)
|
||||
break
|
||||
|
||||
case 'offer':
|
||||
handleOffer(data.offer, data.name)
|
||||
break
|
||||
|
||||
case 'answer':
|
||||
handleAnswer(data.answer, data.name)
|
||||
break
|
||||
|
||||
case 'candidate':
|
||||
handleCandidate(data.candidate, data.name)
|
||||
break
|
||||
|
||||
case 'userlist':
|
||||
handleUserlist(data.users)
|
||||
break
|
||||
|
||||
case 'leave':
|
||||
handleLeave()
|
||||
break
|
||||
|
||||
case 'video-offer':
|
||||
handleVideoOffer(data.sdp, data.name)
|
||||
break
|
||||
|
||||
case 'video-answer':
|
||||
handleVideoAnswer(data.sdp, data.name)
|
||||
break
|
||||
|
||||
case 'error':
|
||||
handleError(data.message)
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
};
|
||||
|
||||
conn.onerror = function (err) {
|
||||
console.log('Got error', err)
|
||||
}
|
||||
|
||||
function send(message) {
|
||||
console.log('Sended message', message)
|
||||
conn.send(JSON.stringify(message))
|
||||
}
|
||||
Reference in New Issue
Block a user