jgerstbe/yaswvc
1
0
Fork 0
mirror of https://api.glitch.com/git/yaswvc synced 2026-01-12 03:18:10 +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: '/',
path: '/peerjs/myapp'
}),
stream: null,
},
methods: {
logMessage: (message) => {
logMessage: function(message) {
let newMessage = document.createElement('div');
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;
},
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 () {
this.peer.on('open', (id) => {
this.logMessage('My peer ID is: ' + id);
@ -50,7 +74,7 @@ var app = new Vue({
call.on('stream', this.renderVideo);
});
},
function gotDevices(deviceInfos) {
gotDevices: function gotDevices(deviceInfos) {
// Handles being called several times to update labels. Preserve values.
const values = selectors.map(select => select.value);
selectors.forEach(select => {
@ -82,7 +106,7 @@ var app = new Vue({
});
},
// 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') {
element.setSinkId(sinkId)
.then(() => {
@ -100,27 +124,23 @@ var app = new Vue({
} else {
console.warn('Browser does not support output device selection.');
}
}
function changeAudioDestination() {
},
changeAudioDestination: function changeAudioDestination() {
const audioDestination = audioOutputSelect.value;
attachSinkId(videoElement, audioDestination);
}
function gotStream(stream) {
window.stream = stream; // make stream available to console
},
gotStream: function gotStream(stream) {
this.stream = stream; // make stream available to console
videoElement.srcObject = stream;
// Refresh button list in case labels have become available
return navigator.mediaDevices.enumerateDevices();
}
function handleError(error) {
},
handleError: function handleError(error) {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}
function start() {
if (window.stream) {
window.stream.getTracks().forEach(track => {
},
start: function start() {
if (this.stream) {
this.stream.getTracks().forEach(track => {
track.stop();
});
}
@ -130,11 +150,13 @@ var app = new Vue({
audio: {deviceId: audioSource ? {exact: audioSource} : 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() {
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
let connectToPeer = () => {
let peerId = peerIdEl.value;
logMessage(`Connecting to ${peerId}...`);
// let connectToPeer = () => {
// let peerId = peerIdEl.value;
// logMessage(`Connecting to ${peerId}...`);
let conn = peer.connect(peerId);
conn.on('data', (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);
// let conn = peer.connect(peerId);
// conn.on('data', (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);
// // });
// };
// let startLocalStream = () => {
// navigator.mediaDevices.getUserMedia({video: true, audio: true})