diff --git a/client/index.html b/client/index.html index 454583e..eced24b 100755 --- a/client/index.html +++ b/client/index.html @@ -11,6 +11,7 @@
- + + diff --git a/client/peer-exchange.js b/client/peer-exchange.js index 9d02932..59c1cae 100644 --- a/client/peer-exchange.js +++ b/client/peer-exchange.js @@ -1,19 +1,10 @@ -import { createUUID } from './random.js'; - export async function createPeerExchange(address) { - const uuid = createUUID(); - const server = new WebSocket(address); const listeners = new Set(); function onMessage(message) { const data = JSON.parse(message.data); - - if (data.uuid === uuid) { - return; - } - - listeners.forEach(callback => callback(data, send)); + listeners.forEach(callback => callback(data)); } function listen(callback) { @@ -21,7 +12,7 @@ export async function createPeerExchange(address) { } function send(data) { - server.send(JSON.stringify(Object.assign({uuid}, data))); + server.send(JSON.stringify(data)); } server.addEventListener('message', onMessage); diff --git a/client/peer.js b/client/peer.js index f1bf166..f2f049d 100644 --- a/client/peer.js +++ b/client/peer.js @@ -1,33 +1,46 @@ +import { createUUID } from './random.js'; + function errorHandler(error) { console.log(error); } +function filter(uuid) { + return function filterSignal(callback) { + return function(signal) { + if (signal.uuid === uuid) { + console.log(`${uuid} ours, filtering`); + return; + } + callback(signal); + } + } +} + export function createHost(peerExchange, peerConnectionConfig) { const listeners = new Set(); function onConnection(callback) { - listeners.push(callback); + listeners.add(callback); } function emitConnection(conn) { listeners.forEach(callback => callback(conn)); } - function handleSDP(sdp) { - host.setRemoteDescription(new RTCSessionDescription(signal.sdp)); - } - - peerExchange.listen(async (signal, send) => { + peerExchange.listen(async signal => { + console.log("Host signal", signal); if (signal.sdp && signal.sdp.type === "offer") { - const host = createConn(peerExchange, peerConnectionConfig); + const {conn, send} = createConn(peerExchange, peerConnectionConfig); const remoteDesc = new RTCSessionDescription(signal.sdp); - await host.setRemoteDescription(remoteDesc); + await conn.setRemoteDescription(remoteDesc); const localDesc = await conn.createAnswer(); - await host.setLocalDescription(localDesc); + await conn.setLocalDescription(localDesc); - send({'sdp': desc}); + send({sdp: localDesc}); + + emitConnection(conn); } }); @@ -36,22 +49,69 @@ export function createHost(peerExchange, peerConnectionConfig) { }; } -export function createConn(peerExchange, peerConnectionConfig) { - const conn = new RTCPeerConnection(peerConnectionConfig); +export function createGuest(peerExchange, peerConnectionConfig) { + const {conn, onSignal, send} = createConn(peerExchange, peerConnectionConfig); - conn.addEventListener('icecandidate', event => { - if(event.candidate != null) { - peerExchange.send({ice: event.candidate}); + onSignal(async signal => { + console.log("Guest signal", signal); + if (signal.sdp && signal.sdp.type === "answer") { + const remoteDesc = new RTCSessionDescription(signal.sdp); + await conn.setRemoteDescription(remoteDesc); } }); + async function connect() { + const localDesc = await conn.createOffer(); + await conn.setLocalDescription(localDesc); + send({sdp: localDesc}); + } + + return { + conn, + connect, + }; +} + + +export function createConn(peerExchange, peerConnectionConfig) { + const conn = new RTCPeerConnection(peerConnectionConfig); + const uuid = createUUID(); + + conn.addEventListener('icecandidate', event => { + if(event.candidate != null) { + send({ice: event.candidate}); + } + }); + + const listeners = new Set(); + + function onSignal(callback) { + listeners.add(callback); + } + peerExchange.listen(signal => { + if (signal.uuid === uuid) { + return; + } + + listeners.forEach(callback => callback(signal)); + }); + + onSignal(signal => { if(signal.ice) { conn.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler); } }); - return conn; + function send(data) { + peerExchange.send(Object.assign({}, data, {uuid})); + } + + return { + conn, + onSignal, + send, + }; } export function createPeer(peerExchange, peerConnectionConfig) { diff --git a/client/webrtc.js b/client/webrtc.js index b83e1c3..b8e7306 100755 --- a/client/webrtc.js +++ b/client/webrtc.js @@ -1,17 +1,46 @@ import { dataChannelConfig, peerConnectionConfig } from './config.js'; import { createPeerExchange } from './peer-exchange.js'; -import { createPeer } from './peer.js'; +import { createPeer, createHost, createGuest} from './peer.js'; var peerConnection; var serverConnection; async function pageReady() { - document.querySelector("button#start") - .addEventListener("click", extendOffer); + document.querySelector("button#host") + .addEventListener("click", host); + + document.querySelector("button#connect") + .addEventListener("click", connect); serverConnection = await createPeerExchange('wss://' + window.location.hostname + ':8443'); +} - setup(); +function host() { + const host = createHost(serverConnection, peerConnectionConfig); + host.onConnection(conn => { + console.log("Host Received Connection", conn); + + conn.addEventListener('addstream', stream => { + console.log("Host received stream", stream); + document.getElementById('remoteVideo').srcObject = event.stream; + }); + }); + console.log("Host waiting for connections"); +} + +async function connect() { + var constraints = { + video: true, + audio: true, + }; + + const stream = await navigator.mediaDevices.getUserMedia(constraints); + + const guest = createGuest(serverConnection, peerConnectionConfig); + guest.conn.addStream(stream); + + console.log("Connecting"); + guest.connect(); } async function setup() {