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

🔮🐜 Checkpoint

Browse source 
./public/index.html:5975361/238
./public/main.js:5975361/256
This commit is contained in:
Glitch (peerjs-video) 2020-09-08 21:34:54 +00:00
parent 3e6c8cb779
commit f726b2589f
2 changed files with 7 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -102,7 +102,7 @@
<!-- peer --> <!-- peer -->
<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:srcObject="call.remoteStream" class="card-img-top" autoplay></video> <video v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video>
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{call.peer}}</h5> <h5 class="card-title">{{call.peer}}</h5>
</div> </div>

13
public/main.js
View file

@ -17,8 +17,8 @@ var app = new Vue({
document.querySelector('.messages').appendChild(newMessage); document.querySelector('.messages').appendChild(newMessage);
}, },
renderVideo:function(stream, selector = '#remoteVideo') { renderVideo:function(stream, selector = '#remoteVideo') {
console.log('renderVideo', stream); console.log('renderVideo', {stream, selector});
// document.querySelector(selector).srcObject = stream; document.querySelector(selector).srcObject = stream;
}, },
connectToPeer: function(peerId) { connectToPeer: function(peerId) {
this.logMessage(`Connecting to ${peerId}...`); this.logMessage(`Connecting to ${peerId}...`);
@ -32,9 +32,9 @@ var app = new Vue({
}); });
let call = this.peer.call(peerId, this.stream); let call = this.peer.call(peerId, this.stream);
call.on('stream', this.renderVideo); call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
call.on('close', () => { call.on('close', () => {
console.log(`Call with ${peerId} was closed.`); console.log(`[OUT] Call with ${peerId} 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); this.calls.push(call);
@ -81,10 +81,9 @@ 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.renderVideo(this.stream, '#localVideo'); call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
call.on('stream', this.renderVideo);
call.on('close', () => { call.on('close', () => {
console.log(`Call with ${call.peer} was closed.`); console.log(`[INC] 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); this.calls.push(call);