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 
./public/index.html:5975361/179
./public/main.js:5975361/670
This commit is contained in:
Glitch (peerjs-video) 2020-09-08 20:59:38 +00:00
parent 15e85c85cc
commit 1d1ab6096e
2 changed files with 13 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/index.html
View file

@ -84,12 +84,12 @@
<input id="peerId" v-model="peer.id" type="text" class="form-control" placeholder="my-peer-id" disabled> <input id="peerId" v-model="peer.id" type="text" class="form-control" placeholder="my-peer-id" disabled>
</div> </div>
<hr> <hr>
<input type="text" id="connect-to-peer" 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" v-on:click="connectToPeer(document.querySelector('connect-to-peer').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-danger" v-on:click="disconnectFromPeer()"> <button class="btn btn-sm btn-danger" v-on:click="disconnectCall()">
Disconnect Disconnect
</button> </button>
<div class="messages"></div> <div class="messages"></div>

21
public/main.js
View file

@ -8,6 +8,7 @@ var app = new Vue({
path: '/peerjs/myapp' path: '/peerjs/myapp'
}), }),
stream: null, stream: null,
calls: [],
}, },
methods: { methods: {
logMessage: function(message) { logMessage: function(message) {
@ -18,14 +19,6 @@ var app = new Vue({
renderVideo:function(stream, selector = '#remoteVideo') { renderVideo:function(stream, selector = '#remoteVideo') {
document.querySelector(selector).srcObject = stream; document.querySelector(selector).srcObject = stream;
}, },
// createPeer: function() {
// const peer = new Peer(localStorage.getItem('yaswvc-peerId'), {
// host: '/',
// path: '/peerjs/myapp'
// });
// localStorage.setItem('yaswvc-peerId', peer.id);
// return peer;
// },
connectToPeer: function(peerId) { connectToPeer: function(peerId) {
this.logMessage(`Connecting to ${peerId}...`); this.logMessage(`Connecting to ${peerId}...`);
@ -37,8 +30,14 @@ var app = new Vue({
conn.send('hi!'); conn.send('hi!');
}); });
let call = this.peer.call(this.peerId, this.stream); let call = this.peer.call(peerId, this.stream);
call.on('stream', this.renderVideo); call.on('stream', this.renderVideo);
this.calls.push(call);
},
disconnectCall: function(call) {
// if (!call) return;
console.log('CALLS', this.calls);
console.log('CALL', call);
}, },
listenForPeerEvents: function () { listenForPeerEvents: function () {
this.peer.on('open', (id) => { this.peer.on('open', (id) => {
@ -71,8 +70,8 @@ var app = new Vue({
// Handle incoming voice/video connection // Handle incoming voice/video connection
this.peer.on('call', (call) => { this.peer.on('call', (call) => {
console.log('INCOMING CALL', call); console.log('INCOMING CALL', call);
call.answer(window.stream); // Answer the call with an A/V stream. call.answer(this.stream); // Answer the call with an A/V stream.
this.renderVideo(window.stream, '#localVideo'); // this.renderVideo(this.stream, '#localVideo');
call.on('stream', this.renderVideo); call.on('stream', this.renderVideo);
}); });
}, },