From d44b23e16c01f3a83c71714ed4d87d608a86626d Mon Sep 17 00:00:00 2001 From: "Glitch (peerjs-video)" Date: Tue, 8 Sep 2020 20:15:05 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=91=F0=9F=98=AC=20Checkpoint=20./publi?= =?UTF-8?q?c/main.js:5975361/9243=20./public/index.html:5975361/77?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 6 +- public/main.js | 257 +++------------------------------------------- 2 files changed, 20 insertions(+), 243 deletions(-) diff --git a/public/index.html b/public/index.html index fad633f..c2c8b8e 100644 --- a/public/index.html +++ b/public/index.html @@ -56,17 +56,17 @@
- +
- +
- +
diff --git a/public/main.js b/public/main.js index 59b7645..c16a37c 100644 --- a/public/main.js +++ b/public/main.js @@ -1,3 +1,5 @@ +var Vue = window.Vue; +var Peer = window.Peer; var app = new Vue({ el: '#app', data: { @@ -75,6 +77,7 @@ var app = new Vue({ }); }, 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. const values = selectors.map(select => select.value); selectors.forEach(select => { @@ -87,14 +90,14 @@ var app = new Vue({ const option = document.createElement('option'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'audioinput') { - option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`; - audioInputSelect.appendChild(option); + option.text = deviceInfo.label || `microphone ${document.querySelector('select#audioSource').length + 1}`; + document.querySelector('select#audioSource').appendChild(option); } else if (deviceInfo.kind === 'audiooutput') { - option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`; - audioOutputSelect.appendChild(option); + option.text = deviceInfo.label || `speaker ${document.querySelector('select#audioOutput').length + 1}`; + document.querySelector('select#audioOutput').appendChild(option); } else if (deviceInfo.kind === 'videoinput') { - option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`; - videoSelect.appendChild(option); + option.text = deviceInfo.label || `camera ${document.querySelector('select#videoSource').length + 1}`; + document.querySelector('select#videoSource').appendChild(option); } else { console.log('Some other kind of source/device: ', deviceInfo); } @@ -119,19 +122,19 @@ var app = new Vue({ } console.error(errorMessage); // Jump back to first output device in the list as it's the default. - audioOutputSelect.selectedIndex = 0; + document.querySelector('select#audioOutput').selectedIndex = 0; }); } else { console.warn('Browser does not support output device selection.'); } }, changeAudioDestination: function changeAudioDestination() { - const audioDestination = audioOutputSelect.value; - attachSinkId(videoElement, audioDestination); + const audioDestination = document.querySelector('select#audioOutput').value; + this.attachSinkId(document.querySelector('#localVideo'), audioDestination); }, gotStream: function gotStream(stream) { 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 return navigator.mediaDevices.enumerateDevices(); }, @@ -144,245 +147,19 @@ var app = new Vue({ track.stop(); }); } - const audioSource = audioInputSelect.value; - const videoSource = videoSelect.value; + const audioSource = document.querySelector('select#audioSource').value; + const videoSource = document.querySelector('select#videoSource').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); + navigator.mediaDevices.getUserMedia(constraints).then(this.gotStream).then(this.gotDevices).catch(this.handleError); }, }, mounted() { console.log('VUE is alive!'); navigator.mediaDevices.enumerateDevices().then(this.gotDevices).catch(this.handleError); 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(); \ No newline at end of file