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

update msg system

pull/43/head
Mathieu Dombrock 2023-02-26 19:24:15 -08:00
parent 004ec973ad
commit 448b025701
2 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/index.html
View File

@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebRTC Boilerplate</title>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="webrtc.js"></script> <script src="webrtc.js"></script>
</head> </head>
@ -97,7 +101,7 @@
.status-wrap{ .status-wrap{
background: rgb(22,55,22); background: rgb(22,55,22);
padding: 0.5rem; padding: 0.5rem;
height:4.5rem; height:24rem;
resize: vertical; resize: vertical;
overflow-y: scroll; overflow-y: scroll;
} }

52
client/webrtc.js
View File

@ -21,7 +21,7 @@ const peerConnectionConfig = {
function pageReady() { function pageReady() {
setupDOM(); setupDOM();
showStatus(false); showStatus(false);
setStatus('Page Ready'); addStatus('Page Ready');
_s.uuid = createUUID(); _s.uuid = createUUID();
_dom.uuid.innerHTML = 'UUID: '+_s.uuid; _dom.uuid.innerHTML = 'UUID: '+_s.uuid;
@ -74,25 +74,31 @@ function showChat(show=true){
_dom.chatWrap.style.display = show ? 'block' : 'node'; _dom.chatWrap.style.display = show ? 'block' : 'node';
} }
function setStatus(msg){ function addStatus(msg){
_s.statusLog = msg + '<br><br>' + _s.statusLog; _s.statusLog = msg + '<br><br>' + _s.statusLog;
_dom.status.innerHTML = _s.statusLog; _dom.status.innerHTML = _s.statusLog;
} }
function sendMsg(){ function sendMsg(){
const content = _s.uuid + ': ' + _dom.chatInput.value; let content = _dom.chatInput.value;
_s.dataChannel.send(content); const msg = {
uuid: _s.uuid,
content: content
};
_s.dataChannel.send(JSON.stringify(msg, null, 2));
// write local // write local
writeMsg(content.replace(_s.uuid, 'You')); content = content.replace(_s.uuid, 'You');
writeMsg({uuid:'You', content});
_dom.chatInput.value = ''; _dom.chatInput.value = '';
} }
function writeMsg(msg){ function writeMsg(msg){
const msgArea = _dom.msgArea; let content = msg.content;
msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br>'); const origin = msg.uuid || 'System >> ';
msg = '<br>' + msg; content = content.replace(/(?:\r\n|\r|\n)/g, '<br>');
msgArea.innerHTML += msg + '<br>'; const out = '<br>' + origin + ': ' + content + '<br>';
msgArea.scrollTop = msgArea.scrollHeight; _dom.msgArea.innerHTML += out;
_dom.msgArea.scrollTop = msgArea.scrollHeight;
} }
function getUserMediaSuccess(stream) { function getUserMediaSuccess(stream) {
@ -103,7 +109,8 @@ function getUserMediaSuccess(stream) {
function setupDataChannel(){ function setupDataChannel(){
_s.peerConnection.ondatachannel = (event) => { _s.peerConnection.ondatachannel = (event) => {
event.channel.onmessage = (e) =>{ event.channel.onmessage = (e) =>{
writeMsg(e.data); const data = JSON.parse(e.data);
writeMsg(data);
}; };
event.channel.onerror = (e) =>{ event.channel.onerror = (e) =>{
alert(e); alert(e);
@ -121,7 +128,8 @@ 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
_s.dataChannel.send(_s.uuid + ': CONNECTED!'); const msg = {uuid: _s.uuid, content: 'CONNECTED!'};
_s.dataChannel.send(JSON.stringify(msg, null, 2));
showChat(true); showChat(true);
} }
@ -131,13 +139,13 @@ function setupDataChannel(){
} }
_s.dataChannel.onclose = (event) => { _s.dataChannel.onclose = (event) => {
writeMsg('>> Peer Disconnected!'); writeMsg({content: 'Peer Disconnected!'});
} }
} }
function start(isCaller) { function start(isCaller) {
setStatus('Starting'); addStatus('Starting');
_s.peerConnection = new RTCPeerConnection(peerConnectionConfig); _s.peerConnection = new RTCPeerConnection(peerConnectionConfig);
_s.peerConnection.onicecandidate = gotIceCandidate; _s.peerConnection.onicecandidate = gotIceCandidate;
_s.peerConnection.ontrack = gotRemoteStream; _s.peerConnection.ontrack = gotRemoteStream;
@ -147,14 +155,14 @@ function start(isCaller) {
_s.peerConnection.createOffer().then(createdDescription).catch(errorHandler); _s.peerConnection.createOffer().then(createdDescription).catch(errorHandler);
} }
setupDataChannel(); setupDataChannel();
writeMsg('>> Connected to peer!'); writeMsg({content: 'Connected to peer!'});
} }
function gotMessageFromServer(message) { function gotMessageFromServer(message) {
setStatus('Got Message From Server'); addStatus('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)); addStatus('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;}
@ -175,16 +183,16 @@ function gotMessageFromServer(message) {
} }
function gotIceCandidate(event) { function gotIceCandidate(event) {
setStatus('Got Ice Candidate'+JSON.stringify(event, null, 2)); addStatus('Got Ice Candidate'+JSON.stringify(event, null, 2));
if(event.candidate != null) { if(event.candidate != null) {
setStatus('ICE Event: '+JSON.stringify(event.candidate, null, 2)); addStatus('ICE Event: '+JSON.stringify(event.candidate, null, 2));
_s.serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': _s.uuid})); _s.serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': _s.uuid}));
} }
} }
function createdDescription(description) { function createdDescription(description) {
setStatus('Got Description'); addStatus('Got Description');
setStatus('Description: '+JSON.stringify(description, null, 2)); addStatus('Description: '+JSON.stringify(description, null, 2));
console.log('got description'); console.log('got description');
_s.peerConnection.setLocalDescription(description).then(function() { _s.peerConnection.setLocalDescription(description).then(function() {
@ -194,7 +202,7 @@ function createdDescription(description) {
} }
function gotRemoteStream(event) { function gotRemoteStream(event) {
setStatus('Got Remote Server'); addStatus('Got Remote Server');
console.log('got remote stream'); console.log('got remote stream');
_s.remoteVideo.srcObject = event.streams[0]; _s.remoteVideo.srcObject = event.streams[0];
} }