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

Improve front-end

pull/43/head
Mathieu Dombrock 2023-02-26 15:00:26 -08:00
parent 9cb092d74e
commit bf45e41b49
2 changed files with 92 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
client/index.html
View File

@ -6,15 +6,78 @@
</head> </head>
<body> <body>
<video id="localVideo" autoplay muted style="width:40%;"></video> <div class="video-wrapper">
<video id="remoteVideo" autoplay style="width:40%;"></video> <video id="localVideo" class="video rnd" autoplay muted></video>
<video id="remoteVideo" class="video rnd" autoplay></video>
<br /> <div class="label">You</div>
<div class="label">Remote</div>
<input type="button" id="start" onclick="start(true)" value="Start Video"></input> </div>
<div class="btn-wrap">
<input type="button" id="start" onclick="start(true)" value="Connect"></input>
</div>
<div id="statusWrap" class="status-wrap" style="visibility: hidden">
Status: <span id="status">Page Loaded</span>
</div>
<br>
<div id="uuid">...</div>
<script type="text/javascript"> <script type="text/javascript">
pageReady(); pageReady();
</script> </script>
<style>
:root{
--accent: rgb(25,55,155);
--accent2: rgb(35,75,200);
}
html{
background: rgb(45,45,45);
color: white;
font-family: Tahoma, Verdana, Segoe, sans-serif;
}
body{
max-width: 1024px;
margin: 0 auto;
}
input[type="button"] {
padding: 1rem;
background: var(--accent);
color: white;
border: none;
}
input[type="button"]:hover{
background: var(--accent2);
}
.rnd{
border-radius:0.5rem;
}
.video-wrapper{
background: rgb(22,22,22);
padding: 1rem;
padding-top:2rem;
text-align:center;
margin-top:2rem;
}
.video{
width:480px;
height:360px;
background: var(--accent2);
}
.label{
display: inline-block;
width:480px;
height:2rem;
}
.btn-wrap{
text-align:right;
background: rgb(33,33,33);
}
.status-wrap{
background: rgb(22,22,22);
padding: 0.5rem;
height:4.5rem;
resize: vertical;
overflow-y: scroll;
}
</style>
</body> </body>
</html> </html>

25
client/webrtc.js
View File

@ -1,11 +1,11 @@
let _s = { let _s = {
localVideo: undefined, localVideo: undefined,
localStream: undefined, localStream: undefined,
remoteVideo: undefined, remoteVideo: undefined,
peerConnection: undefined, peerConnection: undefined,
uuid: undefined, uuid: undefined,
serverConnection: undefined serverConnection: undefined,
statusLog: ''
}; };
const peerConnectionConfig = { const peerConnectionConfig = {
@ -16,7 +16,10 @@ const peerConnectionConfig = {
}; };
function pageReady() { function pageReady() {
showStatus(true);
setStatus('Page Ready');
_s.uuid = createUUID(); _s.uuid = createUUID();
document.getElementById('uuid').innerHTML = 'UUID: '+_s.uuid;
_s.localVideo = document.getElementById('localVideo'); _s.localVideo = document.getElementById('localVideo');
_s.remoteVideo = document.getElementById('remoteVideo'); _s.remoteVideo = document.getElementById('remoteVideo');
@ -36,12 +39,22 @@ function pageReady() {
} }
} }
function showStatus(show=true){
document.getElementById('statusWrap').style.visibility = show ? "visible" : "hidden";
}
function setStatus(msg){
_s.statusLog = msg + '<br><br>' + _s.statusLog;
document.getElementById('status').innerHTML = _s.statusLog;
}
function getUserMediaSuccess(stream) { function getUserMediaSuccess(stream) {
_s.localStream = stream; _s.localStream = stream;
_s.localVideo.srcObject = stream; _s.localVideo.srcObject = stream;
} }
function start(isCaller) { function start(isCaller) {
setStatus('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;
@ -53,9 +66,10 @@ function start(isCaller) {
} }
function gotMessageFromServer(message) { function gotMessageFromServer(message) {
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));
// Ignore messages from ourself // Ignore messages from ourself
if(signal.uuid == _s.uuid) return; if(signal.uuid == _s.uuid) return;
@ -72,12 +86,16 @@ function gotMessageFromServer(message) {
} }
function gotIceCandidate(event) { function gotIceCandidate(event) {
setStatus('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));
_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');
setStatus('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() {
@ -86,6 +104,7 @@ function createdDescription(description) {
} }
function gotRemoteStream(event) { function gotRemoteStream(event) {
setStatus('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];
} }