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/main.js:5975361/2303
This commit is contained in:
Glitch (peerjs-video) 2020-09-08 20:03:13 +00:00
parent 80701997ae
commit 1d31bc8129
1 changed files with 98 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

174
public/main.js
View file

@ -5,16 +5,40 @@ var app = new Vue({
host: '/', host: '/',
path: '/peerjs/myapp' path: '/peerjs/myapp'
}), }),
stream: null,
}, },
methods: { methods: {
logMessage: (message) => { logMessage: function(message) {
let newMessage = document.createElement('div'); let newMessage = document.createElement('div');
newMessage.innerText = message; newMessage.innerText = message;
messagesEl.appendChild(newMessage); document.querySelector('.messages').appendChild(newMessage);
}, },
renderVideo: (stream, selector = '#remoteVideo') => { renderVideo:function(stream, selector = '#remoteVideo') {
document.querySelector(selector).srcObject = stream; document.querySelector(selector).srcObject = stream;
}, },
connectToPeer: function() {
let peerId = this.peer.id;
this.logMessage(`Connecting to ${peerId}...`);
let conn = this.peer.connect(peerId);
conn.on('data', (data) => {
this.logMessage(`received: ${data}`);
});
conn.on('open', () => {
conn.send('hi!');
});
let call = this.peer.call(this.peerId, this.stream);
call.on('stream', this.renderVideo);
// navigator.mediaDevices.getUserMedia({video: true, audio: true})
// .then((stream) => {
// let call = peer.call(peerId, stream);
// call.on('stream', renderVideo);
// })
// .catch((err) => {
// logMessage('Failed to get local stream', err);
// });
},
listenForPeerEvents: function () { listenForPeerEvents: function () {
this.peer.on('open', (id) => { this.peer.on('open', (id) => {
this.logMessage('My peer ID is: ' + id); this.logMessage('My peer ID is: ' + id);
@ -50,7 +74,7 @@ var app = new Vue({
call.on('stream', this.renderVideo); call.on('stream', this.renderVideo);
}); });
}, },
function gotDevices(deviceInfos) { gotDevices: function gotDevices(deviceInfos) {
// Handles being called several times to update labels. Preserve values. // Handles being called several times to update labels. Preserve values.
const values = selectors.map(select => select.value); const values = selectors.map(select => select.value);
selectors.forEach(select => { selectors.forEach(select => {
@ -81,60 +105,58 @@ var app = new Vue({
} }
}); });
}, },
// Attach audio output device to video element using device/sink ID. // Attach audio output device to video element using device/sink ID.
function attachSinkId(element, sinkId) { attachSinkId :function attachSinkId(element, sinkId) {
if (typeof element.sinkId !== 'undefined') { if (typeof element.sinkId !== 'undefined') {
element.setSinkId(sinkId) element.setSinkId(sinkId)
.then(() => { .then(() => {
console.log(`Success, audio output device attached: ${sinkId}`); console.log(`Success, audio output device attached: ${sinkId}`);
}) })
.catch(error => { .catch(error => {
let errorMessage = error; let errorMessage = error;
if (error.name === 'SecurityError') { if (error.name === 'SecurityError') {
errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`; errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`;
} }
console.error(errorMessage); console.error(errorMessage);
// Jump back to first output device in the list as it's the default. // Jump back to first output device in the list as it's the default.
audioOutputSelect.selectedIndex = 0; audioOutputSelect.selectedIndex = 0;
}); });
} else { } else {
console.warn('Browser does not support output device selection.'); console.warn('Browser does not support output device selection.');
} }
} },
changeAudioDestination: function changeAudioDestination() {
function changeAudioDestination() { const audioDestination = audioOutputSelect.value;
const audioDestination = audioOutputSelect.value; attachSinkId(videoElement, audioDestination);
attachSinkId(videoElement, audioDestination); },
} gotStream: function gotStream(stream) {
this.stream = stream; // make stream available to console
function gotStream(stream) { videoElement.srcObject = stream;
window.stream = stream; // make stream available to console // Refresh button list in case labels have become available
videoElement.srcObject = stream; return navigator.mediaDevices.enumerateDevices();
// Refresh button list in case labels have become available },
return navigator.mediaDevices.enumerateDevices(); handleError: function handleError(error) {
} console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
},
function handleError(error) { start: function start() {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name); if (this.stream) {
} this.stream.getTracks().forEach(track => {
track.stop();
function start() { });
if (window.stream) { }
window.stream.getTracks().forEach(track => { const audioSource = audioInputSelect.value;
track.stop(); const videoSource = videoSelect.value;
}); const constraints = {
} audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
const audioSource = audioInputSelect.value; video: {deviceId: videoSource ? {exact: videoSource} : undefined}
const videoSource = videoSelect.value; };
const constraints = { navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(this.gotDevices).catch(this.handleError);
audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, },
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
};
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
}
}, },
mounted() { mounted() {
console.log('VUE is alive!'); console.log('VUE is alive!');
navigator.mediaDevices.enumerateDevices().then(this.gotDevices).catch(this.handleError);
this.start();
} }
}); });
@ -207,29 +229,29 @@ var app = new Vue({
// }); // });
// Initiate outgoing connection // Initiate outgoing connection
let connectToPeer = () => { // let connectToPeer = () => {
let peerId = peerIdEl.value; // let peerId = peerIdEl.value;
logMessage(`Connecting to ${peerId}...`); // logMessage(`Connecting to ${peerId}...`);
let conn = peer.connect(peerId); // let conn = peer.connect(peerId);
conn.on('data', (data) => { // conn.on('data', (data) => {
logMessage(`received: ${data}`); // logMessage(`received: ${data}`);
}); // });
conn.on('open', () => { // conn.on('open', () => {
conn.send('hi!'); // conn.send('hi!');
}); // });
let call = peer.call(peerId, window.stream); // let call = peer.call(peerId, window.stream);
call.on('stream', renderVideo); // call.on('stream', renderVideo);
// navigator.mediaDevices.getUserMedia({video: true, audio: true}) // // navigator.mediaDevices.getUserMedia({video: true, audio: true})
// .then((stream) => { // // .then((stream) => {
// let call = peer.call(peerId, stream); // // let call = peer.call(peerId, stream);
// call.on('stream', renderVideo); // // call.on('stream', renderVideo);
// }) // // })
// .catch((err) => { // // .catch((err) => {
// logMessage('Failed to get local stream', err); // // logMessage('Failed to get local stream', err);
// }); // // });
}; // };
// let startLocalStream = () => { // let startLocalStream = () => {
// navigator.mediaDevices.getUserMedia({video: true, audio: true}) // navigator.mediaDevices.getUserMedia({video: true, audio: true})