klaus
/
WebRTC-Example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup

pull/43/head
Mathieu Dombrock 2023-02-26 18:44:13 -08:00
parent e29e92adb6
commit 004ec973ad
2 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/index.html
View File

@ -16,17 +16,18 @@
<input type="button" id="dbg" onclick="showStatus(true)" value="DBG"></input> <input type="button" id="dbg" onclick="showStatus(true)" value="DBG"></input>
<input type="button" id="start" onclick="start(true)" value="Connect"></input> <input type="button" id="start" onclick="start(true)" value="Connect"></input>
</div> </div>
<div id="chatWrap" class="chat-wrap" style="visibility:hidden"> <div id="chatWrap" class="chat-wrap" style="display:none;">
<div id="msgArea" class="msg-area"> <div id="msgArea" class="msg-area">
MESSAG AREA<br> MESSAG AREA<br>
</div> </div>
<div class="chat-input"> <div class="chat-input">
<input type="text" id="chatInput" placeholder="Write a message..."> <!--<input type="text" id="chatInput" placeholder="Write a message...">-->
<textarea id="chatInput" placeholder="Write a message..."></textarea>
<br><br> <br><br>
<input type="button" id="send" onclick="sendMsg()" value="send"></input> <input type="button" id="send" onclick="sendMsg()" value="send"></input>
</div> </div>
</div> </div>
<div id="statusWrap" class="status-wrap" style="visibility: hidden"> <div id="statusWrap" class="status-wrap" style="display:none;">
Status: <span id="status">Page Loaded</span> Status: <span id="status">Page Loaded</span>
</div> </div>
@ -58,7 +59,8 @@
input[type="button"]:hover{ input[type="button"]:hover{
background: var(--accent2); background: var(--accent2);
} }
input[type="text"]{ /*input[type="text"]{*/
textarea{
background: rgb(45,45,45); background: rgb(45,45,45);
color:white; color:white;
font-size:1.1rem; font-size:1.1rem;
@ -66,6 +68,7 @@
border: 2px solid white; border: 2px solid white;
text-align:left; text-align:left;
width:calc(100% - 1rem); width:calc(100% - 1rem);
resize: vertical;
} }
.rnd{ .rnd{
border-radius:0.5rem; border-radius:0.5rem;
@ -103,9 +106,10 @@
} }
.msg-area{ .msg-area{
background: rgb(65,65,65); background: rgb(65,65,65);
padding:1rem; padding: 1rem;
height: 360px; height: 4.5rem;
overflow-y: scroll; overflow-y: scroll;
resize: vertical;
} }
.chat-input{ .chat-input{
text-align:right; text-align:right;

76
client/webrtc.js
View File

@ -9,6 +9,8 @@ let _s = {
statusLog: '' statusLog: ''
}; };
let _dom = {};
const peerConnectionConfig = { const peerConnectionConfig = {
'iceServers': [ 'iceServers': [
{'urls': 'stun:stun.stunprotocol.org:3478'}, {'urls': 'stun:stun.stunprotocol.org:3478'},
@ -17,13 +19,14 @@ const peerConnectionConfig = {
}; };
function pageReady() { function pageReady() {
setupDOM();
showStatus(false); showStatus(false);
setStatus('Page Ready'); setStatus('Page Ready');
_s.uuid = createUUID(); _s.uuid = createUUID();
document.getElementById('uuid').innerHTML = 'UUID: '+_s.uuid; _dom.uuid.innerHTML = 'UUID: '+_s.uuid;
_s.localVideo = document.getElementById('localVideo'); _s.localVideo = _dom.localVideo;
_s.remoteVideo = document.getElementById('remoteVideo'); _s.remoteVideo = _dom.remoteVideo;
_s.serverConnection = new WebSocket('wss://' + window.location.hostname + ':8443'); _s.serverConnection = new WebSocket('wss://' + window.location.hostname + ':8443');
_s.serverConnection.onmessage = gotMessageFromServer; _s.serverConnection.onmessage = gotMessageFromServer;
@ -33,45 +36,61 @@ function pageReady() {
audio: true, audio: true,
}; };
document.getElementById('chatInput').addEventListener("keypress", function(event) { _dom.chatInput.addEventListener("keypress", function(event) {
if (event.key === "Enter") { if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault(); event.preventDefault();
document.getElementById("send").click(); _dom.send.click();
} }
}); });
if(navigator.mediaDevices.getUserMedia) { if(navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler); navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
} else { }
else {
alert('Your browser does not support getUserMedia API'); alert('Your browser does not support getUserMedia API');
} }
} }
function setupDOM(){
_dom = {
localVideo: document.getElementById('localVideo'),
remoteVideo: document.getElementById('remoteVideo'),
uuid: document.getElementById('uuid'),
chatInput: document.getElementById('chatInput'),
statusWrap: document.getElementById('statusWrap'),
status: document.getElementById('status'),
chatWrap: document.getElementById('chatWrap'),
msgArea: document.getElementById('msgArea'),
send: document.getElementById('send'),
};
}
function showStatus(show=true){ function showStatus(show=true){
document.getElementById('statusWrap').style.visibility = show ? 'visible' : 'hidden'; _dom.statusWrap.style.display = show ? 'block' : 'none';
} }
function showChat(show=true){ function showChat(show=true){
document.getElementById('chatWrap').style.visibility = show ? 'visible' : 'hidden'; _dom.chatWrap.style.display = show ? 'block' : 'node';
} }
function setStatus(msg){ function setStatus(msg){
_s.statusLog = msg + '<br><br>' + _s.statusLog; _s.statusLog = msg + '<br><br>' + _s.statusLog;
document.getElementById('status').innerHTML = _s.statusLog; _dom.status.innerHTML = _s.statusLog;
} }
function sendMsg(){ function sendMsg(){
const content = _s.uuid + ': ' + document.getElementById('chatInput').value; const content = _s.uuid + ': ' + _dom.chatInput.value;
_s.dataChannel.send(content); _s.dataChannel.send(content);
// write local // write local
writeMsg(content.replace(_s.uuid, 'You')); writeMsg(content.replace(_s.uuid, 'You'));
document.getElementById('chatInput').value = ''; _dom.chatInput.value = '';
} }
function writeMsg(msg){ function writeMsg(msg){
//alert(msg); const msgArea = _dom.msgArea;
const msgArea = document.getElementById('msgArea'); msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br>');
msg = '<br>' + msg;
msgArea.innerHTML += msg + '<br>'; msgArea.innerHTML += msg + '<br>';
msgArea.scrollTop = msgArea.scrollHeight; msgArea.scrollTop = msgArea.scrollHeight;
} }
@ -90,10 +109,9 @@ function setupDataChannel(){
alert(e); alert(e);
} }
event.channel.onopen = (e) =>{ event.channel.onopen = (e) =>{
//alert('OPEN'); // The peer channel is open
}; };
event.channel.onclose = (e) =>{ event.channel.onclose = (e) =>{
//alert('CLOSE');
sendMsg('>> Peer DisconnectedX!'); sendMsg('>> Peer DisconnectedX!');
} }
}; };
@ -103,24 +121,21 @@ function setupDataChannel(){
_s.dataChannel.onopen = () => { _s.dataChannel.onopen = () => {
// The data channel is now open // The data channel is now open
// You can now send data // You can now send data
// alert('DC OPEN');
_s.dataChannel.send(_s.uuid + ': CONNECTED!'); _s.dataChannel.send(_s.uuid + ': CONNECTED!');
showChat(true); showChat(true);
} }
_s.dataChannel.onmessage = function(event){ _s.dataChannel.onmessage = (event) => {
console.log(event); console.log(event);
alert('GOT MSG'); alert('GOT MSG');
} }
_s.dataChannel.onclose = function(event){ _s.dataChannel.onclose = (event) => {
writeMsg('>> Peer Disconnected!'); writeMsg('>> Peer Disconnected!');
} }
} }
function start(isCaller) { function start(isCaller) {
setStatus('Starting'); setStatus('Starting');
_s.peerConnection = new RTCPeerConnection(peerConnectionConfig); _s.peerConnection = new RTCPeerConnection(peerConnectionConfig);
@ -137,21 +152,25 @@ function start(isCaller) {
function gotMessageFromServer(message) { function gotMessageFromServer(message) {
setStatus('Got Message From Server'); setStatus('Got Message From Server');
if(!_s.peerConnection) start(false); if(!_s.peerConnection){start(false);}
const signal = JSON.parse(message.data); const signal = JSON.parse(message.data);
setStatus('Signal: '+ JSON.stringify(signal, null, 2)); setStatus('Signal: '+ JSON.stringify(signal, null, 2));
// Ignore messages from ourself // Ignore messages from ourself
if(signal.uuid == _s.uuid) return; if(signal.uuid == _s.uuid){return;}
if(signal.sdp) { if(signal.sdp) {
_s.peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() { _s.peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
// Only create answers in response to offers // Only create answers in response to offers
if(signal.sdp.type == 'offer') { if(signal.sdp.type == 'offer') {
_s.peerConnection.createAnswer().then(createdDescription).catch(errorHandler); _s.peerConnection.createAnswer().then(createdDescription)
.catch(errorHandler);
} }
}).catch(errorHandler); })
} else if(signal.ice) { .catch(errorHandler);
_s.peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler); }
else if(signal.ice) {
_s.peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice))
.catch(errorHandler);
} }
} }
@ -170,7 +189,8 @@ function createdDescription(description) {
_s.peerConnection.setLocalDescription(description).then(function() { _s.peerConnection.setLocalDescription(description).then(function() {
_s.serverConnection.send(JSON.stringify({'sdp': _s.peerConnection.localDescription, 'uuid': _s.uuid})); _s.serverConnection.send(JSON.stringify({'sdp': _s.peerConnection.localDescription, 'uuid': _s.uuid}));
}).catch(errorHandler); })
.catch(errorHandler);
} }
function gotRemoteStream(event) { function gotRemoteStream(event) {