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/9243
./public/index.html:5975361/77
This commit is contained in:
Glitch (peerjs-video) 2020-09-08 20:15:05 +00:00
parent 1d31bc8129
commit d44b23e16c
2 changed files with 20 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/index.html
View file

@ -56,17 +56,17 @@
<!-- audio source --> <!-- audio source -->
<div class="form-group"> <div class="form-group">
<label for="audioSource">Audio input source: </label> <label for="audioSource">Audio input source: </label>
<select id="audioSource" class="form-control"></select> <select id="audioSource" v-on:change="start" class="form-control"></select>
</div> </div>
<!-- audio output --> <!-- audio output -->
<div class="form-group"> <div class="form-group">
<label for="audioOutput">Audio output destination: </label> <label for="audioOutput">Audio output destination: </label>
<select id="audioOutput" class="form-control"></select> <select id="audioOutput" v-on:change="changeAudioDestination" class="form-control"></select>
</div> </div>
<!-- video source --> <!-- video source -->
<div class="form-group"> <div class="form-group">
<label for="videoSource">Video source: </label> <label for="videoSource">Video source: </label>
<select id="videoSource" class="form-control"></select> <select id="videoSource" v-on:change="start" class="form-control"></select>
</div> </div>
</details> </details>
</div> </div>

257
public/main.js
View file

@ -1,3 +1,5 @@
var Vue = window.Vue;
var Peer = window.Peer;
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
@ -75,6 +77,7 @@ var app = new Vue({
}); });
}, },
gotDevices: function gotDevices(deviceInfos) { gotDevices: function gotDevices(deviceInfos) {
const selectors = [document.querySelector('select#audioSource'), document.querySelector('select#audioOutput'), document.querySelector('select#videoSource')];
// 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 => {
@ -87,14 +90,14 @@ var app = new Vue({
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 ${document.querySelector('select#audioSource').length + 1}`;
audioInputSelect.appendChild(option); document.querySelector('select#audioSource').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 ${document.querySelector('select#audioOutput').length + 1}`;
audioOutputSelect.appendChild(option); document.querySelector('select#audioOutput').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 ${document.querySelector('select#videoSource').length + 1}`;
videoSelect.appendChild(option); document.querySelector('select#videoSource').appendChild(option);
} else { } else {
console.log('Some other kind of source/device: ', deviceInfo); console.log('Some other kind of source/device: ', deviceInfo);
} }
@ -119,19 +122,19 @@ var app = new Vue({
} }
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; document.querySelector('select#audioOutput').selectedIndex = 0;
}); });
} else { } else {
console.warn('Browser does not support output device selection.'); console.warn('Browser does not support output device selection.');
} }
}, },
changeAudioDestination: function changeAudioDestination() { changeAudioDestination: function changeAudioDestination() {
const audioDestination = audioOutputSelect.value; const audioDestination = document.querySelector('select#audioOutput').value;
attachSinkId(videoElement, audioDestination); this.attachSinkId(document.querySelector('#localVideo'), audioDestination);
}, },
gotStream: function gotStream(stream) { gotStream: function gotStream(stream) {
this.stream = stream; // make stream available to console this.stream = stream; // make stream available to console
videoElement.srcObject = stream; document.querySelector('#localVideo').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();
}, },
@ -144,245 +147,19 @@ var app = new Vue({
track.stop(); track.stop();
}); });
} }
const audioSource = audioInputSelect.value; const audioSource = document.querySelector('select#audioSource').value;
const videoSource = videoSelect.value; const videoSource = document.querySelector('select#videoSource').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(this.gotDevices).catch(this.handleError); navigator.mediaDevices.getUserMedia(constraints).then(this.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); navigator.mediaDevices.enumerateDevices().then(this.gotDevices).catch(this.handleError);
this.start(); this.start();
document.querySelector('select#audioOutput').disabled = !('sinkId' in HTMLMediaElement.prototype);
} }
}); });
// 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();