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

🌄🌘 Checkpoint

Browse source 
./views/index.ejs:5975361/910
./public/main.js:5975361/1117
This commit is contained in:
Glitch (peerjs-video) 2020-09-12 22:34:51 +00:00
parent bdfc9215df
commit 69eda41a55
2 changed files with 37 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
public/main.js
View file

@ -21,6 +21,8 @@ var app = new Vue({
}), }),
stream: null, stream: null,
calls: [], calls: [],
audioCalls: [],
videoCalls:[],
connections: [], connections: [],
chatInput: '', chatInput: '',
}, },
@ -98,11 +100,11 @@ var app = new Vue({
const audioStream = await this.getAudioStream(); const audioStream = await this.getAudioStream();
let audioCall = this.peer.call(peerId, audioStream); let audioCall = this.peer.call(peerId, audioStream);
console.log('Started audioCall', audioCall); // console.log('Started audioCall', audioCall);
this.handleCall(audioCall); this.handleCall(audioCall);
const videoStream = await this.getVideoStream(); const videoStream = await this.getVideoStream();
let videoCall = this.peer.call(peerId, videoStream); let videoCall = this.peer.call(peerId, videoStream);
console.log('Started videoCall', videoCall); // console.log('Started videoCall', videoCall);
this.handleCall(videoCall); this.handleCall(videoCall);
}, },
hangUp: function() { hangUp: function() {
@ -165,18 +167,28 @@ var app = new Vue({
console.log(`Call with ${call.peer} was closed.`); console.log(`Call with ${call.peer} was closed.`);
this.calls = this.calls.filter(c => c.connectionId === call.connectionId); this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
}); });
this.calls.push(call); if ((call._localStream.getVideoTracks().length > 0) && (call._localStream.getAudioTracks().length > 0)) {
console.log('Call', call); this.calls.push(call);
call.peerConnection.onaddstream = (stream) => { console.log('Call', call);
console.log('stream add', stream); } else {
console.log('getRemoteStreams', stream.currentTarget.getRemoteStreams()[0]); if (call._localStream.getVideoTracks().length > 0) {
stream.stream.onaddtrack = (a,b) => { this.videoCalls.push(call);
console.log('got track', a, b) console.log('videoCall', call);
}; } else if (call._localStream.getAudioTracks().length > 0) {
}; this.audioCalls.push(call);
call.peerConnection.onremovestream = (stream) => { console.log('audioCall', call);
console.log('stream remove', stream); }
}; }
// 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')];

13
views/index.ejs
View file

@ -120,15 +120,24 @@
</div> </div>
<!-- peers --> <!-- peers -->
<div class="row mt-3"> <div class="row mt-3">
<!-- peer --> <!-- 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-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video> <video v-if="call._localStream.getVideoTracks().length > 0" 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>
<!-- audio calls -->
<!-- video calls -->
</div> </div>
</div> </div>