mirror of
https://api.glitch.com/git/yaswvc
synced 2026-01-12 17:38:11 +00:00
Compare commits
17 commits
ad8d5bbc75
...
2449ae42cf
| Author | SHA1 | Date | |
|---|---|---|---|
|
2449ae42cf | ||
|
|
9a33ce12fc | ||
|
|
ea2e8dc595 | ||
|
|
4c172250ce | ||
|
|
69eda41a55 | ||
|
|
bdfc9215df | ||
|
|
27e91cc10f | ||
|
|
0756b8f05a | ||
|
|
7051447050 | ||
|
|
41d233581c | ||
|
|
db1970526a | ||
|
|
88dbb0458a | ||
|
|
8b086b1fa2 | ||
|
|
14b5353c7e | ||
|
|
2c99731d00 | ||
|
|
a564d54fee | ||
|
|
22fffe6960 |
2 changed files with 208 additions and 22 deletions
162
public/main.js
162
public/main.js
|
|
@ -17,12 +17,17 @@ var app = new Vue({
|
|||
],
|
||||
'sdpSemantics': 'unified-plan',
|
||||
},
|
||||
debug: 3
|
||||
debug: 0
|
||||
}),
|
||||
stream: null,
|
||||
calls: [],
|
||||
audioCalls: [],
|
||||
videoCalls:[],
|
||||
connections: [],
|
||||
chatInput: '',
|
||||
displayMediaStrean: false,
|
||||
outgoingScreenShareCalls: [],
|
||||
incomingScreenShareCalls: [],
|
||||
},
|
||||
methods: {
|
||||
logMessage: function(message) {
|
||||
|
|
@ -35,6 +40,7 @@ var app = new Vue({
|
|||
document.querySelector(selector).srcObject = stream;
|
||||
},
|
||||
connectToPeer: function(peerId) {
|
||||
if (!peerId) return;
|
||||
if (peerId === this.peer.id) {
|
||||
this.logMessage(`You played yourself! Can't connect to yourself.`);
|
||||
return;
|
||||
|
|
@ -63,18 +69,65 @@ var app = new Vue({
|
|||
});
|
||||
|
||||
let call = this.peer.call(peerId, this.stream);
|
||||
call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
|
||||
call.on('close', () => {
|
||||
console.log(`[OUT] Call with ${peerId} was closed.`);
|
||||
this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
|
||||
console.log('Started call', call);
|
||||
this.handleCall(call);
|
||||
},
|
||||
connectToPeer2: async function(peerId) {
|
||||
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}`);
|
||||
});
|
||||
this.calls.push(call);
|
||||
conn.on('open', () => {
|
||||
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() {
|
||||
this.calls.forEach(c => {
|
||||
console.log('hangUp - closing', c);
|
||||
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 => {
|
||||
console.log('hangUp - closing', c);
|
||||
c.close();
|
||||
|
|
@ -108,11 +161,17 @@ var app = new Vue({
|
|||
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('[Inc] closed conenction', conn)
|
||||
});
|
||||
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(`[Inc] Connection error ${conn.connectionId} with ${conn.peer}.`);
|
||||
});
|
||||
});
|
||||
|
|
@ -121,13 +180,37 @@ var app = new Vue({
|
|||
this.peer.on('call', (call) => {
|
||||
console.log('INCOMING CALL', call);
|
||||
call.answer(this.stream); // Answer the call with an A/V stream.
|
||||
this.handleCall(call);
|
||||
});
|
||||
},
|
||||
handleCall: function handleCall(call) {
|
||||
call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
|
||||
call.on('close', () => {
|
||||
console.log(`[INC] Call with ${call.peer} was closed.`);
|
||||
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);
|
||||
});
|
||||
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) {
|
||||
const selectors = [document.querySelector('select#audioSource'), document.querySelector('select#audioOutput'), document.querySelector('select#videoSource')];
|
||||
|
|
@ -186,11 +269,74 @@ var app = new Vue({
|
|||
this.attachSinkId(document.querySelector('#localVideo'), audioDestination);
|
||||
},
|
||||
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
|
||||
document.querySelector('#localVideo').srcObject = stream;
|
||||
// Refresh button list in case labels have become available
|
||||
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) {
|
||||
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<div id="app" class="container pt-3">
|
||||
<div class="row">
|
||||
<!-- self -->
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-sm-6 order-2 order-sm-1">
|
||||
<div class="card text-dark">
|
||||
<video id="localVideo" class="card-img-top" autoplay muted></video>
|
||||
<div class="card-body">
|
||||
|
|
@ -72,12 +72,14 @@
|
|||
<label for="videoSource">Video source: </label>
|
||||
<select id="videoSource" v-on:change="start" class="form-control"></select>
|
||||
</div>
|
||||
<!-- share screen -->
|
||||
<span class="btn btn-primary" v-on:click="shareScreen()">Share screen</span>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- control -->
|
||||
<div class="col-6">
|
||||
<div class="col-12 order-1 col-sm-6 order-sm-2 mb-3">
|
||||
<div class="card text-dark">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Control</h5>
|
||||
|
|
@ -90,14 +92,17 @@
|
|||
<hr>
|
||||
<input type="text" ref="connectPeer" class="form-control" placeholder="paste-peer-id-here">
|
||||
<br>
|
||||
<button class="btn btn-sm btn-success" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
|
||||
<button class="btn btn-sm btn-success mt-1" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
|
||||
Connect
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger" v-on:click="hangUp()">
|
||||
<button class="btn btn-sm btn-primary mt-1" v-on:click="connectToPeer2($refs.connectPeer.value);$refs.connectPeer.value = '';">
|
||||
Connect 2
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger mt-1" v-on:click="hangUp()">
|
||||
Disconnect
|
||||
</button>
|
||||
<hr>
|
||||
<div class="messages mt-1" style="min-height:30px;border:1px solid lightgrey;border-radius:.25rem;"></div>
|
||||
<div class="messages mt-1" style="min-height:30px; max-height:100px;border:1px solid lightgrey;border-radius:.25rem;overflow: hidden scroll;"></div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-10">
|
||||
|
|
@ -115,15 +120,50 @@
|
|||
</div>
|
||||
<!-- peers -->
|
||||
<div class="row mt-3">
|
||||
<!-- peer -->
|
||||
<!-- audio calls -->
|
||||
<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 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">
|
||||
<h5 class="card-title">{{call.peer}}</h5>
|
||||
<p>
|
||||
Video: {{ call._localStream.getVideoTracks().length }}
|
||||
</p>
|
||||
<p>
|
||||
Audio: {{ call._localStream.getAudioTracks().length }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue