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

108
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 => {
@ -82,7 +106,7 @@ 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(() => {
@ -100,27 +124,23 @@ var app = new Vue({
} 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) {
function gotStream(stream) { this.stream = stream; // make stream available to console
window.stream = stream; // make stream available to console
videoElement.srcObject = stream; videoElement.srcObject = stream;
// Refresh button list in case labels have become available // Refresh button list in case labels have become available
return navigator.mediaDevices.enumerateDevices(); return navigator.mediaDevices.enumerateDevices();
} },
handleError: function handleError(error) {
function handleError(error) {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name); console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
} },
start: function start() {
function start() { if (this.stream) {
if (window.stream) { this.stream.getTracks().forEach(track => {
window.stream.getTracks().forEach(track => {
track.stop(); track.stop();
}); });
} }
@ -130,11 +150,13 @@ var app = new Vue({
audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
video: {deviceId: videoSource ? {exact: videoSource} : undefined} video: {deviceId: videoSource ? {exact: videoSource} : undefined}
}; };
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError); navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(this.gotDevices).catch(this.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.send('hi!');
});
let call = peer.call(peerId, window.stream);
call.on('stream', 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);
// }); // });
}; // conn.on('open', () => {
// conn.send('hi!');
// });
// let call = peer.call(peerId, window.stream);
// call.on('stream', 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);
// // });
// };
// let startLocalStream = () => { // let startLocalStream = () => {
// navigator.mediaDevices.getUserMedia({video: true, audio: true}) // navigator.mediaDevices.getUserMedia({video: true, audio: true})