mirror of
https://api.glitch.com/git/yaswvc
synced 2026-01-12 03:18:10 +00:00
🚎😻 Checkpoint
./public/main.js:5975361/2303
This commit is contained in:
Glitch (peerjs-video)
parent
80701997ae
commit
1d31bc8129
1 changed files with 98 additions and 76 deletions
174
public/main.js
174
public/main.js
|
|
@ -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 => {
|
||||
|
|
@ -81,60 +105,58 @@ var app = new Vue({
|
|||
}
|
||||
});
|
||||
},
|
||||
// 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);
|
||||
}
|
||||
// Attach audio output device to video element using device/sink ID.
|
||||
attachSinkId :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.');
|
||||
}
|
||||
},
|
||||
changeAudioDestination: function changeAudioDestination() {
|
||||
const audioDestination = audioOutputSelect.value;
|
||||
attachSinkId(videoElement, audioDestination);
|
||||
},
|
||||
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();
|
||||
},
|
||||
handleError: function handleError(error) {
|
||||
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
|
||||
},
|
||||
start: function start() {
|
||||
if (this.stream) {
|
||||
this.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(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 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 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})
|
||||
|
|
|
|||
Loading…
Reference in a new issue