From d862215cd8823e4242a249c7f482fc3dd196547c Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Fri, 6 Apr 2018 18:39:14 +0200 Subject: [PATCH] [lib.audio-manager] FREQUENCY or WAVE management (dispatch to callbacks if defined) + [vue.auth.dialog] added draw_freq() + default one + added draw_wave() can toggle between 2 viewers with 'gs.get.toggleDrawStyle()' --- webpack/lib/audio-manager.js | 68 +++++++++++++++++++--- webpack/scss/dialog.scss | 20 ++++++- webpack/setup.js | 2 +- webpack/vue/auth/dialog.vue | 107 ++++++++++++++++++++++++++++++++++- 4 files changed, 185 insertions(+), 12 deletions(-) diff --git a/webpack/lib/audio-manager.js b/webpack/lib/audio-manager.js index 566fdcb..f8cede9 100644 --- a/webpack/lib/audio-manager.js +++ b/webpack/lib/audio-manager.js @@ -1,6 +1,6 @@ export default class AudioManager{ - static get BUFFER_SIZE(){ return 8192; } + static get BUFFER_SIZE(){ return 4096; } constructor(){ @@ -16,10 +16,15 @@ export default class AudioManager{ /* (3) Initialise input (typically bound from recorder) */ this.input = null; - /* (4) Shortcut our output */ + /* (4) Initialize analyser (from input) + callback */ + this.analyser = this.ctx.createAnalyser(); + this.freq_drawer = null; + this.wave_drawer = null; + + /* (5) Shortcut our output */ this.output = this.ctx.destination; - /* (5) Connect MASTER gain to output */ + /* (6) Connect MASTER gain to output */ this.master.connect(this.output); @@ -171,12 +176,19 @@ export default class AudioManager{ /* (1) Bind audio stream ---------------------------------------------------------*/ + /* (1) bind our audio stream to our source */ this.input = this.ctx.createMediaStreamSource(_stream); + /* (2) By default: link through filters to output ---------------------------------------------------------*/ + /* (1) Link through filters */ this.linkFilters(); + /* (2) Also link to analyser */ + this.input.connect(this.analyser); + + gs.get.audio_conn = 2; // voice connected } @@ -186,18 +198,59 @@ export default class AudioManager{ * ---------------------------------------------------------*/ send(_audioprocess){ - let buf32 = new Float32Array(AudioManager.BUFFER_SIZE); - _audioprocess.inputBuffer.copyFromChannel(buf32, 0); + /* (1) Manage analyser + ---------------------------------------------------------*/ + /* (1) Process only if 'freq_drawer' is set */ + if( this.freq_drawer instanceof Function ){ - let buf16 = this.f32toi16(buf32); + // 1. Prepare array + let freqArray = new Uint8Array(this.analyser.frequencyBinCount); - // exit if no connection + // 2. Get frequency array + this.analyser.getByteFrequencyData(freqArray); + + // 3. Send to callback + this.freq_drawer(freqArray); + + } + + /* (2) Process only if 'wave_drawer' is set */ + else if( this.wave_drawer instanceof Function ){ + + // 1. Prepare array + let waveArray = new Uint8Array(this.analyser.fftSize); + + // 2. Get wave array + this.analyser.getByteTimeDomainData(waveArray); + + // 3. Send to callback + this.wave_drawer(waveArray); + + } + + + + /* (2) WebSocket send packet + ---------------------------------------------------------*/ + /* (1) Exit here if not connected */ if( this.ws === null || this.ws.readyState !== 1 ) return; + /* (2) Initialize buffer (Float32Array) */ + let buf32 = new Float32Array(AudioManager.BUFFER_SIZE); + + /* (3) Extract stream into buffer */ + _audioprocess.inputBuffer.copyFromChannel(buf32, 0); + + /* (4) Convert for WS connection (Int16Array) */ + let buf16 = this.f32toi16(buf32); + + /* (5) Send buffer through websocket */ this.ws.send(buf16); + + // DEBUG this.dbg.data.packets_sent++; this.dbg.data.kB_sent += buf16.length * 16. / 8 / 1024; } @@ -230,7 +283,6 @@ export default class AudioManager{ /* (7) Start playing */ source.start(this.ctx.currentTime); - this.dbg.data.packets_received++; this.dbg.data.kB_received += _buffer.length * 16. / 8 / 1024; diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss index 7f06e08..7ae32aa 100644 --- a/webpack/scss/dialog.scss +++ b/webpack/scss/dialog.scss @@ -225,6 +225,20 @@ z-index: 100; + & > canvas{ + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + margin: 0; + padding: 0; + + z-index: 100; + } + & > div.text-container{ flex: 1 1 50%; @@ -234,6 +248,8 @@ flex-flow: row wrap; + z-index: 101; + & > div.status{ flex: 0 1 100%; @@ -289,8 +305,10 @@ cursor: pointer; + z-index: 101; + &:hover{ - background-color: #24262a; + background-color: rgba(0,0,0,.2); } } diff --git a/webpack/setup.js b/webpack/setup.js index ae26a62..ce5ffbd 100644 --- a/webpack/setup.js +++ b/webpack/setup.js @@ -56,7 +56,7 @@ gs.set('refresh', () => ( document.location = '' ) ); /* (6) Connection status */ gs.set('connection', 1); // null -> normal, 0 -> offline, 1 -> connecting, 2 -> online -gs.set('audio_conn', null); // null -> normal, 0 -> connecting, 1 -> listening, 2 -> sharing +gs.set('audio_conn', 1); // null -> normal, 0 -> connecting, 1 -> listening, 2 -> sharing /* (7) Ask for permission API */ Notification.requestPermission(); diff --git a/webpack/vue/auth/dialog.vue b/webpack/vue/auth/dialog.vue index 723334e..f41483c 100644 --- a/webpack/vue/auth/dialog.vue +++ b/webpack/vue/auth/dialog.vue @@ -132,6 +132,8 @@