Add "Audio Quality" and "Audio per packet" to settings dialog
This commit is contained in:
parent
5ca332a151
commit
e77da5335e
|
@ -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>
|
||||||
|
|
38
app/index.js
38
app/index.js
|
@ -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 {
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
Loading…
Reference in a new issue