mirror of
https://api.glitch.com/git/yaswvc
synced 2026-01-12 03:18:10 +00:00
388 lines
No EOL
13 KiB
JavaScript
388 lines
No EOL
13 KiB
JavaScript
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
peer: new Peer({
|
|
host: '/',
|
|
path: '/peerjs/myapp'
|
|
}),
|
|
stream: null,
|
|
},
|
|
methods: {
|
|
logMessage: function(message) {
|
|
let newMessage = document.createElement('div');
|
|
newMessage.innerText = message;
|
|
document.querySelector('.messages').appendChild(newMessage);
|
|
},
|
|
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);
|
|
});
|
|
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);
|
|
});
|
|
},
|
|
gotDevices: 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.
|
|
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();
|
|
}
|
|
});
|
|
|
|
|
|
// client-side js, loaded by index.html
|
|
// run by the browser each time the page is loaded
|
|
|
|
// let Peer = window.Peer;
|
|
|
|
// let messagesEl = document.querySelector('.messages');
|
|
// let peerIdEl = document.querySelector('#connect-to-peer');
|
|
// let videoEl = document.querySelector('#remoteVideo');
|
|
|
|
// let logMessage = (message) => {
|
|
// let newMessage = document.createElement('div');
|
|
// newMessage.innerText = message;
|
|
// messagesEl.appendChild(newMessage);
|
|
// };
|
|
|
|
// let renderVideo = (stream, selector = '#remoteVideo') => {
|
|
// document.querySelector(selector).srcObject = stream;
|
|
// };
|
|
|
|
// Register with the peer server
|
|
// let peer = new Peer({
|
|
// host: '/',
|
|
// path: '/peerjs/myapp'
|
|
// });
|
|
// peer.on('open', (id) => {
|
|
// logMessage('My peer ID is: ' + id);
|
|
// });
|
|
// peer.on('error', (error) => {
|
|
// console.error(error);
|
|
// });
|
|
|
|
// // Handle incoming data connection
|
|
// peer.on('connection', (conn) => {
|
|
// logMessage('incoming peer connection!');
|
|
// console.log('incoming peer connection!', conn);
|
|
// conn.on('data', (data) => {
|
|
// logMessage(`received: ${data}`);
|
|
// });
|
|
// conn.on('open', () => {
|
|
// conn.send('hello!');
|
|
// });
|
|
// conn.on('close', () => {
|
|
// logMessage('Connection closed.');
|
|
// });
|
|
// conn.on('error', (error) => {
|
|
// console.error('Error:', error);
|
|
// logMessage('Error'+error);
|
|
// })
|
|
// });
|
|
|
|
// // Handle incoming voice/video connection
|
|
// peer.on('call', (call) => {
|
|
// console.log('INCOMING CALL', call);
|
|
// call.answer(window.stream); // Answer the call with an A/V stream.
|
|
// renderVideo(window.stream, '#localVideo');
|
|
// call.on('stream', renderVideo);
|
|
// // navigator.mediaDevices.getUserMedia({video: true, audio: true})
|
|
// // .then((stream) => {
|
|
// // call.answer(stream); // Answer the call with an A/V stream.
|
|
// // renderVideo(stream, '#localVideo');
|
|
// // call.on('stream', renderVideo);
|
|
// // })
|
|
// // .catch((err) => {
|
|
// // console.error('Failed to get local stream', err);
|
|
// // });
|
|
// });
|
|
|
|
// Initiate outgoing connection
|
|
// 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 startLocalStream = () => {
|
|
// navigator.mediaDevices.getUserMedia({video: true, audio: true})
|
|
// .then((localStream) => {
|
|
// console.log('LOCAL STREAM', localStream);
|
|
// renderVideo(localStream, '#localVideo');
|
|
// window.stream = localStream;
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log('Failed to get local stream', err);
|
|
// logMessage('Failed to get local stream', err);
|
|
// });
|
|
// }
|
|
// startLocalStream();
|
|
|
|
// let disconnectFromPeer = () => {
|
|
|
|
// }
|
|
|
|
// window.disconnectFromPeer = disconnectFromPeer;
|
|
// window.connectToPeer = connectToPeer;
|
|
|
|
|
|
|
|
/*
|
|
* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by a BSD-style license
|
|
* that can be found in the LICENSE file in the root of the source
|
|
* tree.
|
|
*/
|
|
|
|
// 'use strict';
|
|
|
|
const videoElement = document.querySelector('#localVideo');
|
|
const audioInputSelect = document.querySelector('select#audioSource');
|
|
const audioOutputSelect = document.querySelector('select#audioOutput');
|
|
const videoSelect = document.querySelector('select#videoSource');
|
|
const selectors = [audioInputSelect, audioOutputSelect, videoSelect];
|
|
|
|
audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
|
|
|
|
// 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];
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
// navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
|
|
|
|
// // 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);
|
|
// }
|
|
|
|
audioInputSelect.onchange = start;
|
|
audioOutputSelect.onchange = changeAudioDestination;
|
|
|
|
videoSelect.onchange = start;
|
|
|
|
start(); |