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/11553
This commit is contained in:
Glitch (peerjs-video) 2020-09-08 19:52:12 +00:00
parent 6263bd1ad6
commit 80701997ae
1 changed files with 285 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

437
public/main.js
View file

@ -1,7 +1,140 @@
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
message: 'Hello Vue!' peer: new Peer({
host: '/',
path: '/peerjs/myapp'
}),
},
methods: {
logMessage: (message) => {
let newMessage = document.createElement('div');
newMessage.innerText = message;
messagesEl.appendChild(newMessage);
},
renderVideo: (stream, selector = '#remoteVideo') => {
document.querySelector(selector).srcObject = stream;
},
listenForPeerEvents: function () {
this.peer.on('open', (id) => {
this.logMessage('My peer ID is: ' + id);
});
this.peer.on('error', (error) => {
console.error(error);
});
// Handle incoming data connection
this.peer.on('connection', (conn) => {
this.logMessage('incoming peer connection!');
console.log('incoming peer connection!', conn);
conn.on('data', (data) => {
this.logMessage(`received: ${data}`);
});
conn.on('open', () => {
conn.send('hello!');
});
conn.on('close', () => {
this.logMessage('Connection closed.');
});
conn.on('error', (error) => {
console.error('Error:', error);
this.logMessage('Error'+error);
});
});
// Handle incoming voice/video connection
this.peer.on('call', (call) => {
console.log('INCOMING CALL', call);
call.answer(window.stream); // Answer the call with an A/V stream.
this.renderVideo(window.stream, '#localVideo');
call.on('stream', this.renderVideo);
});
},
function gotDevices(deviceInfos) {
// Handles being called several times to update labels. Preserve values.
const values = selectors.map(select => select.value);
selectors.forEach(select => {
while (select.firstChild) {
select.removeChild(select.firstChild);
}
});
for (let i = 0; i !== deviceInfos.length; ++i) {
const deviceInfo = deviceInfos[i];
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'audioinput') {
option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
audioInputSelect.appendChild(option);
} else if (deviceInfo.kind === 'audiooutput') {
option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
audioOutputSelect.appendChild(option);
} else if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source/device: ', deviceInfo);
}
}
selectors.forEach((select, selectorIndex) => {
if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
select.value = values[selectorIndex];
}
});
},
// Attach audio output device to video element using device/sink ID.
function attachSinkId(element, sinkId) {
if (typeof element.sinkId !== 'undefined') {
element.setSinkId(sinkId)
.then(() => {
console.log(`Success, audio output device attached: ${sinkId}`);
})
.catch(error => {
let errorMessage = error;
if (error.name === 'SecurityError') {
errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`;
}
console.error(errorMessage);
// Jump back to first output device in the list as it's the default.
audioOutputSelect.selectedIndex = 0;
});
} else {
console.warn('Browser does not support output device selection.');
}
}
function changeAudioDestination() {
const audioDestination = audioOutputSelect.value;
attachSinkId(videoElement, audioDestination);
}
function gotStream(stream) {
window.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) {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}
function start() {
if (window.stream) {
window.stream.getTracks().forEach(track => {
track.stop();
});
}
const audioSource = audioInputSelect.value;
const videoSource = videoSelect.value;
const constraints = {
audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
};
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
}
},
mounted() {
console.log('VUE is alive!');
} }
}); });
@ -9,69 +142,69 @@ var app = new Vue({
// client-side js, loaded by index.html // client-side js, loaded by index.html
// run by the browser each time the page is loaded // run by the browser each time the page is loaded
let Peer = window.Peer; // let Peer = window.Peer;
let messagesEl = document.querySelector('.messages'); // let messagesEl = document.querySelector('.messages');
let peerIdEl = document.querySelector('#connect-to-peer'); // let peerIdEl = document.querySelector('#connect-to-peer');
let videoEl = document.querySelector('#remoteVideo'); // let videoEl = document.querySelector('#remoteVideo');
let logMessage = (message) => { // let logMessage = (message) => {
let newMessage = document.createElement('div'); // let newMessage = document.createElement('div');
newMessage.innerText = message; // newMessage.innerText = message;
messagesEl.appendChild(newMessage); // messagesEl.appendChild(newMessage);
}; // };
let renderVideo = (stream, selector = '#remoteVideo') => { // let renderVideo = (stream, selector = '#remoteVideo') => {
document.querySelector(selector).srcObject = stream; // document.querySelector(selector).srcObject = stream;
}; // };
// Register with the peer server // Register with the peer server
let peer = new Peer({ // let peer = new Peer({
host: '/', // host: '/',
path: '/peerjs/myapp' // path: '/peerjs/myapp'
}); // });
peer.on('open', (id) => { // peer.on('open', (id) => {
logMessage('My peer ID is: ' + id); // logMessage('My peer ID is: ' + id);
}); // });
peer.on('error', (error) => { // peer.on('error', (error) => {
console.error(error); // console.error(error);
}); // });
// Handle incoming data connection // // Handle incoming data connection
peer.on('connection', (conn) => { // peer.on('connection', (conn) => {
logMessage('incoming peer connection!'); // logMessage('incoming peer connection!');
console.log('incoming peer connection!', conn); // console.log('incoming peer connection!', conn);
conn.on('data', (data) => { // conn.on('data', (data) => {
logMessage(`received: ${data}`); // logMessage(`received: ${data}`);
}); // });
conn.on('open', () => { // conn.on('open', () => {
conn.send('hello!'); // conn.send('hello!');
}); // });
conn.on('close', () => { // conn.on('close', () => {
logMessage('Connection closed.'); // logMessage('Connection closed.');
}); // });
conn.on('error', (error) => { // conn.on('error', (error) => {
console.error('Error:', error); // console.error('Error:', error);
logMessage('Error'+error); // logMessage('Error'+error);
}) // })
}); // });
// Handle incoming voice/video connection // // Handle incoming voice/video connection
peer.on('call', (call) => { // 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(window.stream); // Answer the call with an A/V stream.
renderVideo(window.stream, '#localVideo'); // renderVideo(window.stream, '#localVideo');
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) => {
// call.answer(stream); // Answer the call with an A/V stream. // // call.answer(stream); // Answer the call with an A/V stream.
// renderVideo(stream, '#localVideo'); // // renderVideo(stream, '#localVideo');
// call.on('stream', renderVideo); // // call.on('stream', renderVideo);
// }) // // })
// .catch((err) => { // // .catch((err) => {
// console.error('Failed to get local stream', err); // // console.error('Failed to get local stream', err);
// }); // // });
}); // });
// Initiate outgoing connection // Initiate outgoing connection
let connectToPeer = () => { let connectToPeer = () => {
@ -98,26 +231,26 @@ let connectToPeer = () => {
// }); // });
}; };
let startLocalStream = () => { // let startLocalStream = () => {
navigator.mediaDevices.getUserMedia({video: true, audio: true}) // navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then((localStream) => { // .then((localStream) => {
console.log('LOCAL STREAM', localStream); // console.log('LOCAL STREAM', localStream);
renderVideo(localStream, '#localVideo'); // renderVideo(localStream, '#localVideo');
window.stream = localStream; // window.stream = localStream;
}) // })
.catch((err) => { // .catch((err) => {
console.log('Failed to get local stream', err); // console.log('Failed to get local stream', err);
logMessage('Failed to get local stream', err); // logMessage('Failed to get local stream', err);
}); // });
} // }
// startLocalStream(); // startLocalStream();
let disconnectFromPeer = () => { // let disconnectFromPeer = () => {
} // }
window.disconnectFromPeer = disconnectFromPeer; // window.disconnectFromPeer = disconnectFromPeer;
window.connectToPeer = connectToPeer; // window.connectToPeer = connectToPeer;
@ -139,91 +272,91 @@ const selectors = [audioInputSelect, audioOutputSelect, videoSelect];
audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype); audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
function gotDevices(deviceInfos) { // 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 => {
while (select.firstChild) { // while (select.firstChild) {
select.removeChild(select.firstChild); // select.removeChild(select.firstChild);
} // }
}); // });
for (let i = 0; i !== deviceInfos.length; ++i) { // for (let i = 0; i !== deviceInfos.length; ++i) {
const deviceInfo = deviceInfos[i]; // const deviceInfo = deviceInfos[i];
const option = document.createElement('option'); // const option = document.createElement('option');
option.value = deviceInfo.deviceId; // option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'audioinput') { // if (deviceInfo.kind === 'audioinput') {
option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`; // option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
audioInputSelect.appendChild(option); // audioInputSelect.appendChild(option);
} else if (deviceInfo.kind === 'audiooutput') { // } else if (deviceInfo.kind === 'audiooutput') {
option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`; // option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
audioOutputSelect.appendChild(option); // audioOutputSelect.appendChild(option);
} else if (deviceInfo.kind === 'videoinput') { // } else if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`; // option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
videoSelect.appendChild(option); // videoSelect.appendChild(option);
} else { // } else {
console.log('Some other kind of source/device: ', deviceInfo); // console.log('Some other kind of source/device: ', deviceInfo);
} // }
} // }
selectors.forEach((select, selectorIndex) => { // selectors.forEach((select, selectorIndex) => {
if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) { // if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
select.value = values[selectorIndex]; // select.value = values[selectorIndex];
} // }
}); // });
} // }
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError); // navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
// 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) { // 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.');
} // }
} // }
function changeAudioDestination() { // function changeAudioDestination() {
const audioDestination = audioOutputSelect.value; // const audioDestination = audioOutputSelect.value;
attachSinkId(videoElement, audioDestination); // attachSinkId(videoElement, audioDestination);
} // }
function gotStream(stream) { // function gotStream(stream) {
window.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();
} // }
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);
} // }
function start() { // function start() {
if (window.stream) { // if (window.stream) {
window.stream.getTracks().forEach(track => { // window.stream.getTracks().forEach(track => {
track.stop(); // track.stop();
}); // });
} // }
const audioSource = audioInputSelect.value; // const audioSource = audioInputSelect.value;
const videoSource = videoSelect.value; // const videoSource = videoSelect.value;
const constraints = { // const constraints = {
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(gotDevices).catch(handleError);
} // }
audioInputSelect.onchange = start; audioInputSelect.onchange = start;
audioOutputSelect.onchange = changeAudioDestination; audioOutputSelect.onchange = changeAudioDestination;