jgerstbe/yaswvc
1
0
Fork 0
mirror of https://api.glitch.com/git/yaswvc synced 2026-01-13 00:18:11 +00:00
Code Issues Releases Wiki Activity

Compare commits

base: jgerstbe:2449ae42cfed7e64e90615bb8e1515da6ecca004
Branches Tags
jgerstbe:master
..
compare: jgerstbe:ad8d5bbc7556bad06c5afa624797e534e00f03de
Branches Tags
jgerstbe:master

No commits in common. "2449ae42cfed7e64e90615bb8e1515da6ecca004" and "ad8d5bbc7556bad06c5afa624797e534e00f03de" have entirely different histories.
2449ae42cf ... ad8d5bbc75

2 changed files with 20 additions and 206 deletions
Show stats Expand all files Collapse all files

170
public/main.js
View file

@ -17,17 +17,12 @@ var app = new Vue({
], ],
'sdpSemantics': 'unified-plan', 'sdpSemantics': 'unified-plan',
}, },
debug: 0 debug: 3
}), }),
stream: null, stream: null,
calls: [], calls: [],
audioCalls: [],
videoCalls:[],
connections: [], connections: [],
chatInput: '', chatInput: '',
displayMediaStrean: false,
outgoingScreenShareCalls: [],
incomingScreenShareCalls: [],
}, },
methods: { methods: {
logMessage: function(message) { logMessage: function(message) {
@ -40,7 +35,6 @@ var app = new Vue({
document.querySelector(selector).srcObject = stream; document.querySelector(selector).srcObject = stream;
}, },
connectToPeer: function(peerId) { connectToPeer: function(peerId) {
if (!peerId) return;
if (peerId === this.peer.id) { if (peerId === this.peer.id) {
this.logMessage(`You played yourself! Can't connect to yourself.`); this.logMessage(`You played yourself! Can't connect to yourself.`);
return; return;
@ -69,65 +63,18 @@ var app = new Vue({
}); });
let call = this.peer.call(peerId, this.stream); let call = this.peer.call(peerId, this.stream);
console.log('Started call', call); call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
this.handleCall(call); call.on('close', () => {
}, console.log(`[OUT] Call with ${peerId} was closed.`);
connectToPeer2: async function(peerId) { this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
if (!peerId) return;
if (peerId === this.peer.id) {
this.logMessage(`You played yourself! Can't connect to yourself.`);
return;
};
this.logMessage(`Connecting to ${peerId}...`);
let conn = this.peer.connect(peerId);
this.connections.push(conn);
console.log('[Out] connected', conn);
conn.on('data', (data) => {
this.logMessage(`${conn.peer}: ${data}`);
}); });
conn.on('open', () => { this.calls.push(call);
conn.send('hi!');
});
conn.on('close', () => {
this.connections = this.connections.filter(c => c.connectionId === conn.connectionId);
this.calls = this.calls.filter(c => c.peer !== conn.peer);
this.videoCalls = this.videoCalls.filter(c => c.peer !== conn.peer);
this.audioCalls = this.audioCalls.filter(c => c.peer !== conn.peer);
this.logMessage(`${conn.peer} closed connection.`);
console.log(`[Out] Connection closed with ${conn.peer}.`);
});
conn.on('error', () => {
this.connections = this.connections.filter(c => c.connectionId === conn.connectionId);
this.calls = this.calls.filter(c => c.peer !== conn.peer);
this.videoCalls = this.videoCalls.filter(c => c.peer !== conn.peer);
this.audioCalls = this.audioCalls.filter(c => c.peer !== conn.peer);
this.logMessage(`${conn.peer} lost connection.`);
console.warn(`[Out] Connection error ${conn.connectionId} with ${conn.peer}.`);
});
const audioStream = await this.getAudioStream();
let audioCall = this.peer.call(peerId, audioStream);
// console.log('Started audioCall', audioCall);
this.handleCall(audioCall);
const videoStream = await this.getVideoStream();
let videoCall = this.peer.call(peerId, videoStream);
// console.log('Started videoCall', videoCall);
this.handleCall(videoCall);
}, },
hangUp: function() { hangUp: function() {
this.calls.forEach(c => { this.calls.forEach(c => {
console.log('hangUp - closing', c); console.log('hangUp - closing', c);
c.close(); c.close();
}); });
this.audioCalls.forEach(c => {
console.log('hangUp - closing', c);
c.close();
});
this.videoCalls.forEach(c => {
console.log('hangUp - closing', c);
c.close();
});
this.connections.forEach(c => { this.connections.forEach(c => {
console.log('hangUp - closing', c); console.log('hangUp - closing', c);
c.close(); c.close();
@ -161,17 +108,11 @@ var app = new Vue({
conn.on('close', () => { conn.on('close', () => {
this.connections = this.connections.filter(c => c.connectionId === conn.connectionId); this.connections = this.connections.filter(c => c.connectionId === conn.connectionId);
this.calls = this.calls.filter(c => c.peer !== conn.peer); this.calls = this.calls.filter(c => c.peer !== conn.peer);
this.videoCalls = this.videoCalls.filter(c => c.peer !== conn.peer);
this.audioCalls = this.audioCalls.filter(c => c.peer !== conn.peer);
this.logMessage(`${conn.peer} closed connection.`); this.logMessage(`${conn.peer} closed connection.`);
console.log('[Inc] closed conenction', conn) console.log('[Inc] closed conenction', conn)
}); });
conn.on('error', () => { conn.on('error', () => {
this.connections = this.connections.filter(c => c.connectionId === conn.connectionId); this.connections = this.connections.filter(c => c.connectionId === conn.connectionId);
this.calls = this.calls.filter(c => c.peer !== conn.peer);
this.videoCalls = this.videoCalls.filter(c => c.peer !== conn.peer);
this.audioCalls = this.audioCalls.filter(c => c.peer !== conn.peer);
this.logMessage(`${conn.peer} lost connection.`);
console.warn(`[Inc] Connection error ${conn.connectionId} with ${conn.peer}.`); console.warn(`[Inc] Connection error ${conn.connectionId} with ${conn.peer}.`);
}); });
}); });
@ -180,37 +121,13 @@ var app = new Vue({
this.peer.on('call', (call) => { this.peer.on('call', (call) => {
console.log('INCOMING CALL', call); console.log('INCOMING CALL', call);
call.answer(this.stream); // Answer the call with an A/V stream. call.answer(this.stream); // Answer the call with an A/V stream.
this.handleCall(call); call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
}); call.on('close', () => {
}, console.log(`[INC] Call with ${call.peer} was closed.`);
handleCall: function handleCall(call) { this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId)); });
call.on('close', () => {
console.log(`Call with ${call.peer} was closed.`);
this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
});
if ((call._localStream.getVideoTracks().length > 0) && (call._localStream.getAudioTracks().length > 0)) {
this.calls.push(call); this.calls.push(call);
console.log('Call', call); });
} else {
if (call._localStream.getVideoTracks().length > 0) {
this.videoCalls.push(call);
console.log('videoCall', call);
} else if (call._localStream.getAudioTracks().length > 0) {
this.audioCalls.push(call);
console.log('audioCall', call);
}
}
// call.peerConnection.onaddstream = (stream) => {
// console.log('stream add', stream);
// console.log('getRemoteStreams', stream.currentTarget.getRemoteStreams()[0]);
// stream.stream.onaddtrack = (a,b) => {
// console.log('got track', a, b)
// };
// };
// call.peerConnection.onremovestream = (stream) => {
// console.log('stream remove', stream);
// };
}, },
gotDevices: function gotDevices(deviceInfos) { gotDevices: function gotDevices(deviceInfos) {
const selectors = [document.querySelector('select#audioSource'), document.querySelector('select#audioOutput'), document.querySelector('select#videoSource')]; const selectors = [document.querySelector('select#audioSource'), document.querySelector('select#audioOutput'), document.querySelector('select#videoSource')];
@ -269,74 +186,11 @@ var app = new Vue({
this.attachSinkId(document.querySelector('#localVideo'), audioDestination); this.attachSinkId(document.querySelector('#localVideo'), audioDestination);
}, },
gotStream: function gotStream(stream) { gotStream: function gotStream(stream) {
console.log('gotStream', this.stream, stream);
if (this.calls && (this.calls.length > 0)) {
this.calls.forEach(call => {
// console.log('local streams',call.peerConnection.getLocalStreams());
// call.peerConnection.removeStream(this.stream);
// console.log('local streams',call.peerConnection.getLocalStreams());
// console.log('Adding stream', stream)
// call.peerConnection.addStream(stream);
// console.log('local streams',call.peerConnection.getLocalStreams());
// // call.peerConnection.createOffer();
// console.log('gotStream 2', call.peerConnection, stream.getTracks())
// const target = call.peerConnection.getLocalStreams()[0];
// target.getTracks().forEach((track) => {
// target.removeTrack(track);
// });
// stream.getTracks().forEach((track) => {
// target.addTrack(track);
// });
const callPeerId = call.peer;
console.log('CONNECTIONS', this.connections)
const conns = this.connections.filter(c => c.peer === call.peer);
conns.forEach(c => c.close())
this.connectToPeer(callPeerId);
});
}
this.stream = stream; // make stream available to console this.stream = stream; // make stream available to console
document.querySelector('#localVideo').srcObject = stream; document.querySelector('#localVideo').srcObject = stream;
// Refresh button list in case labels have become available // Refresh button list in case labels have become available
return navigator.mediaDevices.enumerateDevices(); return navigator.mediaDevices.enumerateDevices();
}, },
getAudioStream: async function getAudioStream() {
const audioSource = document.querySelector('select#audioSource').value;
const constraints = {
audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
// video: null
};
const audioStream = await navigator.mediaDevices.getUserMedia(constraints).catch(this.handleError);
console.log('GOT AUDIO STREAM', audioStream);
return audioStream;
},
getVideoStream: async function getVideoStream() {
// const audioSource = document.querySelector('select#audioSource').value;
const videoSource = document.querySelector('select#videoSource').value;
const constraints = {
// audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
};
const videoStream = await navigator.mediaDevices.getUserMedia(constraints).catch(this.handleError);
console.log('GOT VIDEO STREAM', videoStream);
return videoStream;
},
shareScreen: async function shareScreen() {
if (!this.displayMediaStream) {
try {
const displayMediaStream = await navigator.mediaDevices.getDisplayMedia();
console.log('screenShare', displayMediaStream);
this.videoCalls.forEach(call => {
this.outgoingScreenShareCalls.push(this.peer.call(call.peer, displayMediaStream));
});
} catch (e) {
console.error('shareScreen', e);
}
} else {
// TODO stop stream
this.displayMediaStream = false;
}
},
handleError: function handleError(error) { handleError: function handleError(error) {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name); console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}, },

54
views/index.ejs
View file

@ -51,7 +51,7 @@
<div id="app" class="container pt-3"> <div id="app" class="container pt-3">
<div class="row"> <div class="row">
<!-- self --> <!-- self -->
<div class="col-12 col-sm-6 order-2 order-sm-1"> <div class="col-6">
<div class="card text-dark"> <div class="card text-dark">
<video id="localVideo" class="card-img-top" autoplay muted></video> <video id="localVideo" class="card-img-top" autoplay muted></video>
<div class="card-body"> <div class="card-body">
@ -72,14 +72,12 @@
<label for="videoSource">Video source: </label> <label for="videoSource">Video source: </label>
<select id="videoSource" v-on:change="start" class="form-control"></select> <select id="videoSource" v-on:change="start" class="form-control"></select>
</div> </div>
<!-- share screen -->
<span class="btn btn-primary" v-on:click="shareScreen()">Share screen</span>
</details> </details>
</div> </div>
</div> </div>
</div> </div>
<!-- control --> <!-- control -->
<div class="col-12 order-1 col-sm-6 order-sm-2 mb-3"> <div class="col-6">
<div class="card text-dark"> <div class="card text-dark">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Control</h5> <h5 class="card-title">Control</h5>
@ -92,17 +90,14 @@
<hr> <hr>
<input type="text" ref="connectPeer" class="form-control" placeholder="paste-peer-id-here"> <input type="text" ref="connectPeer" class="form-control" placeholder="paste-peer-id-here">
<br> <br>
<button class="btn btn-sm btn-success mt-1" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';"> <button class="btn btn-sm btn-success" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
Connect Connect
</button> </button>
<button class="btn btn-sm btn-primary mt-1" v-on:click="connectToPeer2($refs.connectPeer.value);$refs.connectPeer.value = '';"> <button class="btn btn-sm btn-danger" v-on:click="hangUp()">
Connect 2
</button>
<button class="btn btn-sm btn-danger mt-1" v-on:click="hangUp()">
Disconnect Disconnect
</button> </button>
<hr> <hr>
<div class="messages mt-1" style="min-height:30px; max-height:100px;border:1px solid lightgrey;border-radius:.25rem;overflow: hidden scroll;"></div> <div class="messages mt-1" style="min-height:30px;border:1px solid lightgrey;border-radius:.25rem;"></div>
<br> <br>
<div class="row"> <div class="row">
<div class="col-12 col-sm-10"> <div class="col-12 col-sm-10">
@ -120,50 +115,15 @@
</div> </div>
<!-- peers --> <!-- peers -->
<div class="row mt-3"> <div class="row mt-3">
<!-- audio calls --> <!-- peer -->
<div class="col-12 col-sm-6 mb-3">
<div class="card text-dark">
<div class="card-body">
<h5 class="card-title">Audio connections</h5>
<p v-for="call in audioCalls">
{{ call.peer}}
<audio v-if="call._localStream.getAudioTracks().length > 0" v-bind:id="'video-'+call.connectionId" class="card-img-top" controls autoplay></audio>
</p>
</div>
</div>
</div>
<!-- video calls -->
<div v-for="call in videoCalls" class="col-6">
<div class="card text-dark">
<video v-if="call._localStream.getVideoTracks().length > 0" v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay muted></video>
<div class="card-body">
<h5 class="card-title">Video: {{call.peer}}</h5>
<p>
Video: {{ call._localStream.getVideoTracks().length }}
</p>
<p>
Audio: {{ call._localStream.getAudioTracks().length }}
</p>
</div>
</div>
</div>
<!-- calls -->
<div v-for="call in calls" class="col-6"> <div v-for="call in calls" class="col-6">
<div class="card text-dark"> <div class="card text-dark">
<video v-if="call._localStream.getVideoTracks().length > 0" v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video> <video v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video>
<audio v-if="call._localStream.getAudioTracks().length > 0" v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></audio>
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{call.peer}}</h5> <h5 class="card-title">{{call.peer}}</h5>
<p>
Video: {{ call._localStream.getVideoTracks().length }}
</p>
<p>
Audio: {{ call._localStream.getAudioTracks().length }}
</p>
</div> </div>
</div> </div>
</div> </div>
<!-- end -->
</div> </div>
</div> </div>