Add "Audio Quality" and "Audio per packet" to settings dialog

This commit is contained in:
Jonas Herzig 2018-09-26 13:07:29 +02:00
parent 5ca332a151
commit e77da5335e
3 changed files with 74 additions and 4 deletions

View file

@ -160,6 +160,38 @@
<input type="button" data-bind="value: pttKeyDisplay, click: recordPttKey"> <input type="button" data-bind="value: pttKeyDisplay, click: recordPttKey">
</td> </td>
</tr> </tr>
<tr>
<td>Audio Quality</td>
<td><span data-bind="text: (audioBitrate()/1000).toFixed(1)"></span> kbit/s</td>
</tr>
<tr>
<td colspan="2">
<input type="range" min="8000" max="96000" step="8"
data-bind="value: audioBitrate, valueUpdate: 'input'">
</td>
</tr>
<tr>
<td>Audio per packet</td>
<td><span data-bind="text: msPerPacket"></span> ms</td>
</tr>
<tr>
<td colspan="2">
<input type="range" min="10" max="60" step="10"
data-bind="value: msPerPacket, valueUpdate: 'input'">
</td>
</tr>
<tr>
<td colspan="2" class="bandwidth-info">
<span data-bind="text: (totalBandwidth()/1000).toFixed(1)"></span>
kbit/s
(Audio
<span data-bind="text: (audioBitrate()/1000).toFixed(1)"></span>,
Position
<span data-bind="text: (positionBandwidth()/1000).toFixed(1)"></span>,
Overhead
<span data-bind="text: (overheadBandwidth()/1000).toFixed(1)"></span>)
</td>
</tr>
<tr> <tr>
<td>Show Avatars</td> <td>Show Avatars</td>
<td> <td>

View file

@ -1,5 +1,6 @@
import 'stream-browserify' // see https://github.com/ericgundrum/pouch-websocket-sync-example/commit/2a4437b013092cc7b2cd84cf1499172c84a963a3 import 'stream-browserify' // see https://github.com/ericgundrum/pouch-websocket-sync-example/commit/2a4437b013092cc7b2cd84cf1499172c84a963a3
import url from 'url' import url from 'url'
import MumbleClient from 'mumble-client'
import mumbleConnect from 'mumble-client-websocket' import mumbleConnect from 'mumble-client-websocket'
import CodecsBrowser from 'mumble-client-codecs-browser' import CodecsBrowser from 'mumble-client-codecs-browser'
import BufferQueueNode from 'web-audio-buffer-queue' import BufferQueueNode from 'web-audio-buffer-queue'
@ -105,6 +106,17 @@ class SettingsDialog {
this.testVadLevel = ko.observable(0) this.testVadLevel = ko.observable(0)
this.testVadActive = ko.observable(false) this.testVadActive = ko.observable(false)
this.showAvatars = ko.observable(settings.showAvatars()) this.showAvatars = ko.observable(settings.showAvatars())
// Need to wrap this in a pureComputed to make sure it's always numeric
let audioBitrate = ko.observable(settings.audioBitrate)
this.audioBitrate = ko.pureComputed({
read: audioBitrate,
write: (value) => audioBitrate(Number(value))
})
this.samplesPerPacket = ko.observable(settings.samplesPerPacket)
this.msPerPacket = ko.pureComputed({
read: () => this.samplesPerPacket() / 48,
write: (value) => this.samplesPerPacket(value * 48)
})
this._setupTestVad() this._setupTestVad()
this.vadLevel.subscribe(() => this._setupTestVad()) this.vadLevel.subscribe(() => this._setupTestVad())
@ -128,6 +140,8 @@ class SettingsDialog {
settings.pttKey = this.pttKey() settings.pttKey = this.pttKey()
settings.vadLevel = this.vadLevel() settings.vadLevel = this.vadLevel()
settings.showAvatars(this.showAvatars()) settings.showAvatars(this.showAvatars())
settings.audioBitrate = this.audioBitrate()
settings.samplesPerPacket = this.samplesPerPacket()
} }
end () { end () {
@ -154,6 +168,30 @@ class SettingsDialog {
keyboardjs.bind('', keydown, keyup) keyboardjs.bind('', keydown, keyup)
this.pttKeyDisplay('> ? <') this.pttKeyDisplay('> ? <')
} }
totalBandwidth () {
return MumbleClient.calcEnforcableBandwidth(
this.audioBitrate(),
this.samplesPerPacket(),
true
)
}
positionBandwidth () {
return this.totalBandwidth() - MumbleClient.calcEnforcableBandwidth(
this.audioBitrate(),
this.samplesPerPacket(),
false
)
}
overheadBandwidth () {
return MumbleClient.calcEnforcableBandwidth(
0,
this.samplesPerPacket(),
false
)
}
} }
class Settings { class Settings {

View file

@ -404,10 +404,10 @@ form {
z-index: 20; z-index: 20;
} }
.settings-dialog { .settings-dialog {
width: 300px; width: 450px;
height: 200px; height: 320px;
top: calc(50% - 100px); top: calc(50% - 160px);
left: calc(50% - 150px); left: calc(50% - 225px);
} }
.settings-dialog table { .settings-dialog table {
width: 100%; width: 100%;