Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: persist audio preferences to backend config 

- Add AudioInputAutoEnable and AudioOutputEnabled fields to backend config
- Implement RPC methods for get/set audio input auto-enable preference
- Load audio output enabled state from config on startup
- Make manual microphone toggle call backend to enable audio pipeline
- Auto-enable preference now persists across incognito sessions
- Reset microphone state to off when reaching login pages
- Fix issue where manual mic toggle required auto-enable to be on
This commit is contained in:
Alex P 2025-11-04 08:52:27 +02:00
parent 925b14da1e
commit 3448663afa
9 changed files with 184 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
audio.go
View File

@ -29,7 +29,8 @@ var (
func initAudio() { func initAudio() {
audioLogger = logging.GetDefaultLogger().With().Str("component", "audio-manager").Logger() audioLogger = logging.GetDefaultLogger().With().Str("component", "audio-manager").Logger()
audioOutputEnabled.Store(true) ensureConfigLoaded()
audioOutputEnabled.Store(config.AudioOutputEnabled)
audioInputEnabled.Store(true) audioInputEnabled.Store(true)
audioLogger.Debug().Msg("Audio subsystem initialized") audioLogger.Debug().Msg("Audio subsystem initialized")

8
config.go
View File

@ -107,6 +107,8 @@ type Config struct {
DefaultLogLevel string `json:"default_log_level"` DefaultLogLevel string `json:"default_log_level"`
VideoSleepAfterSec int `json:"video_sleep_after_sec"` VideoSleepAfterSec int `json:"video_sleep_after_sec"`
VideoQualityFactor float64 `json:"video_quality_factor"` VideoQualityFactor float64 `json:"video_quality_factor"`
AudioInputAutoEnable bool `json:"audio_input_auto_enable"`
AudioOutputEnabled bool `json:"audio_output_enabled"`
} }
func (c *Config) GetDisplayRotation() uint16 { func (c *Config) GetDisplayRotation() uint16 {
@ -178,8 +180,10 @@ func getDefaultConfig() Config {
_ = confparser.SetDefaultsAndValidate(c) _ = confparser.SetDefaultsAndValidate(c)
return c return c
}(), }(),
DefaultLogLevel: "INFO", DefaultLogLevel: "INFO",
VideoQualityFactor: 1.0, VideoQualityFactor: 1.0,
AudioInputAutoEnable: false,
AudioOutputEnabled: true,
} }
} }

203
jsonrpc.go
View File

@ -946,10 +946,16 @@ func rpcSetUsbDeviceState(device string, enabled bool) error {
} }
func rpcGetAudioOutputEnabled() (bool, error) { func rpcGetAudioOutputEnabled() (bool, error) {
return audioOutputEnabled.Load(), nil ensureConfigLoaded()
return config.AudioOutputEnabled, nil
} }
func rpcSetAudioOutputEnabled(enabled bool) error { func rpcSetAudioOutputEnabled(enabled bool) error {
ensureConfigLoaded()
config.AudioOutputEnabled = enabled
if err := SaveConfig(); err != nil {
return err
}
return SetAudioOutputEnabled(enabled) return SetAudioOutputEnabled(enabled)
} }
@ -961,6 +967,17 @@ func rpcSetAudioInputEnabled(enabled bool) error {
return SetAudioInputEnabled(enabled) return SetAudioInputEnabled(enabled)
} }
func rpcGetAudioInputAutoEnable() (bool, error) {
ensureConfigLoaded()
return config.AudioInputAutoEnable, nil
}
func rpcSetAudioInputAutoEnable(enabled bool) error {
ensureConfigLoaded()
config.AudioInputAutoEnable = enabled
return SaveConfig()
}
func rpcSetCloudUrl(apiUrl string, appUrl string) error { func rpcSetCloudUrl(apiUrl string, appUrl string) error {
currentCloudURL := config.CloudURL currentCloudURL := config.CloudURL
config.CloudURL = apiUrl config.CloudURL = apiUrl
@ -1199,95 +1216,97 @@ func rpcDoExecuteKeyboardMacro(ctx context.Context, macro []hidrpc.KeyboardMacro
} }
var rpcHandlers = map[string]RPCHandler{ var rpcHandlers = map[string]RPCHandler{
"ping": {Func: rpcPing}, "ping": {Func: rpcPing},
"reboot": {Func: rpcReboot, Params: []string{"force"}}, "reboot": {Func: rpcReboot, Params: []string{"force"}},
"getDeviceID": {Func: rpcGetDeviceID}, "getDeviceID": {Func: rpcGetDeviceID},
"deregisterDevice": {Func: rpcDeregisterDevice}, "deregisterDevice": {Func: rpcDeregisterDevice},
"getCloudState": {Func: rpcGetCloudState}, "getCloudState": {Func: rpcGetCloudState},
"getNetworkState": {Func: rpcGetNetworkState}, "getNetworkState": {Func: rpcGetNetworkState},
"getNetworkSettings": {Func: rpcGetNetworkSettings}, "getNetworkSettings": {Func: rpcGetNetworkSettings},
"setNetworkSettings": {Func: rpcSetNetworkSettings, Params: []string{"settings"}}, "setNetworkSettings": {Func: rpcSetNetworkSettings, Params: []string{"settings"}},
"renewDHCPLease": {Func: rpcRenewDHCPLease}, "renewDHCPLease": {Func: rpcRenewDHCPLease},
"getKeyboardLedState": {Func: rpcGetKeyboardLedState}, "getKeyboardLedState": {Func: rpcGetKeyboardLedState},
"getKeyDownState": {Func: rpcGetKeysDownState}, "getKeyDownState": {Func: rpcGetKeysDownState},
"keyboardReport": {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}}, "keyboardReport": {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
"keypressReport": {Func: rpcKeypressReport, Params: []string{"key", "press"}}, "keypressReport": {Func: rpcKeypressReport, Params: []string{"key", "press"}},
"absMouseReport": {Func: rpcAbsMouseReport, Params: []string{"x", "y", "buttons"}}, "absMouseReport": {Func: rpcAbsMouseReport, Params: []string{"x", "y", "buttons"}},
"relMouseReport": {Func: rpcRelMouseReport, Params: []string{"dx", "dy", "buttons"}}, "relMouseReport": {Func: rpcRelMouseReport, Params: []string{"dx", "dy", "buttons"}},
"wheelReport": {Func: rpcWheelReport, Params: []string{"wheelY"}}, "wheelReport": {Func: rpcWheelReport, Params: []string{"wheelY"}},
"getVideoState": {Func: rpcGetVideoState}, "getVideoState": {Func: rpcGetVideoState},
"getUSBState": {Func: rpcGetUSBState}, "getUSBState": {Func: rpcGetUSBState},
"unmountImage": {Func: rpcUnmountImage}, "unmountImage": {Func: rpcUnmountImage},
"rpcMountBuiltInImage": {Func: rpcMountBuiltInImage, Params: []string{"filename"}}, "rpcMountBuiltInImage": {Func: rpcMountBuiltInImage, Params: []string{"filename"}},
"setJigglerState": {Func: rpcSetJigglerState, Params: []string{"enabled"}}, "setJigglerState": {Func: rpcSetJigglerState, Params: []string{"enabled"}},
"getJigglerState": {Func: rpcGetJigglerState}, "getJigglerState": {Func: rpcGetJigglerState},
"setJigglerConfig": {Func: rpcSetJigglerConfig, Params: []string{"jigglerConfig"}}, "setJigglerConfig": {Func: rpcSetJigglerConfig, Params: []string{"jigglerConfig"}},
"getJigglerConfig": {Func: rpcGetJigglerConfig}, "getJigglerConfig": {Func: rpcGetJigglerConfig},
"getTimezones": {Func: rpcGetTimezones}, "getTimezones": {Func: rpcGetTimezones},
"sendWOLMagicPacket": {Func: rpcSendWOLMagicPacket, Params: []string{"macAddress"}}, "sendWOLMagicPacket": {Func: rpcSendWOLMagicPacket, Params: []string{"macAddress"}},
"getStreamQualityFactor": {Func: rpcGetStreamQualityFactor}, "getStreamQualityFactor": {Func: rpcGetStreamQualityFactor},
"setStreamQualityFactor": {Func: rpcSetStreamQualityFactor, Params: []string{"factor"}}, "setStreamQualityFactor": {Func: rpcSetStreamQualityFactor, Params: []string{"factor"}},
"getAutoUpdateState": {Func: rpcGetAutoUpdateState}, "getAutoUpdateState": {Func: rpcGetAutoUpdateState},
"setAutoUpdateState": {Func: rpcSetAutoUpdateState, Params: []string{"enabled"}}, "setAutoUpdateState": {Func: rpcSetAutoUpdateState, Params: []string{"enabled"}},
"getEDID": {Func: rpcGetEDID}, "getEDID": {Func: rpcGetEDID},
"setEDID": {Func: rpcSetEDID, Params: []string{"edid"}}, "setEDID": {Func: rpcSetEDID, Params: []string{"edid"}},
"getVideoLogStatus": {Func: rpcGetVideoLogStatus}, "getVideoLogStatus": {Func: rpcGetVideoLogStatus},
"getVideoSleepMode": {Func: rpcGetVideoSleepMode}, "getVideoSleepMode": {Func: rpcGetVideoSleepMode},
"setVideoSleepMode": {Func: rpcSetVideoSleepMode, Params: []string{"duration"}}, "setVideoSleepMode": {Func: rpcSetVideoSleepMode, Params: []string{"duration"}},
"getDevChannelState": {Func: rpcGetDevChannelState}, "getDevChannelState": {Func: rpcGetDevChannelState},
"setDevChannelState": {Func: rpcSetDevChannelState, Params: []string{"enabled"}}, "setDevChannelState": {Func: rpcSetDevChannelState, Params: []string{"enabled"}},
"getLocalVersion": {Func: rpcGetLocalVersion}, "getLocalVersion": {Func: rpcGetLocalVersion},
"getUpdateStatus": {Func: rpcGetUpdateStatus}, "getUpdateStatus": {Func: rpcGetUpdateStatus},
"tryUpdate": {Func: rpcTryUpdate}, "tryUpdate": {Func: rpcTryUpdate},
"getDevModeState": {Func: rpcGetDevModeState}, "getDevModeState": {Func: rpcGetDevModeState},
"setDevModeState": {Func: rpcSetDevModeState, Params: []string{"enabled"}}, "setDevModeState": {Func: rpcSetDevModeState, Params: []string{"enabled"}},
"getSSHKeyState": {Func: rpcGetSSHKeyState}, "getSSHKeyState": {Func: rpcGetSSHKeyState},
"setSSHKeyState": {Func: rpcSetSSHKeyState, Params: []string{"sshKey"}}, "setSSHKeyState": {Func: rpcSetSSHKeyState, Params: []string{"sshKey"}},
"getTLSState": {Func: rpcGetTLSState}, "getTLSState": {Func: rpcGetTLSState},
"setTLSState": {Func: rpcSetTLSState, Params: []string{"state"}}, "setTLSState": {Func: rpcSetTLSState, Params: []string{"state"}},
"setMassStorageMode": {Func: rpcSetMassStorageMode, Params: []string{"mode"}}, "setMassStorageMode": {Func: rpcSetMassStorageMode, Params: []string{"mode"}},
"getMassStorageMode": {Func: rpcGetMassStorageMode}, "getMassStorageMode": {Func: rpcGetMassStorageMode},
"isUpdatePending": {Func: rpcIsUpdatePending}, "isUpdatePending": {Func: rpcIsUpdatePending},
"getUsbEmulationState": {Func: rpcGetUsbEmulationState}, "getUsbEmulationState": {Func: rpcGetUsbEmulationState},
"setUsbEmulationState": {Func: rpcSetUsbEmulationState, Params: []string{"enabled"}}, "setUsbEmulationState": {Func: rpcSetUsbEmulationState, Params: []string{"enabled"}},
"getUsbConfig": {Func: rpcGetUsbConfig}, "getUsbConfig": {Func: rpcGetUsbConfig},
"setUsbConfig": {Func: rpcSetUsbConfig, Params: []string{"usbConfig"}}, "setUsbConfig": {Func: rpcSetUsbConfig, Params: []string{"usbConfig"}},
"checkMountUrl": {Func: rpcCheckMountUrl, Params: []string{"url"}}, "checkMountUrl": {Func: rpcCheckMountUrl, Params: []string{"url"}},
"getVirtualMediaState": {Func: rpcGetVirtualMediaState}, "getVirtualMediaState": {Func: rpcGetVirtualMediaState},
"getStorageSpace": {Func: rpcGetStorageSpace}, "getStorageSpace": {Func: rpcGetStorageSpace},
"mountWithHTTP": {Func: rpcMountWithHTTP, Params: []string{"url", "mode"}}, "mountWithHTTP": {Func: rpcMountWithHTTP, Params: []string{"url", "mode"}},
"mountWithStorage": {Func: rpcMountWithStorage, Params: []string{"filename", "mode"}}, "mountWithStorage": {Func: rpcMountWithStorage, Params: []string{"filename", "mode"}},
"listStorageFiles": {Func: rpcListStorageFiles}, "listStorageFiles": {Func: rpcListStorageFiles},
"deleteStorageFile": {Func: rpcDeleteStorageFile, Params: []string{"filename"}}, "deleteStorageFile": {Func: rpcDeleteStorageFile, Params: []string{"filename"}},
"startStorageFileUpload": {Func: rpcStartStorageFileUpload, Params: []string{"filename", "size"}}, "startStorageFileUpload": {Func: rpcStartStorageFileUpload, Params: []string{"filename", "size"}},
"getWakeOnLanDevices": {Func: rpcGetWakeOnLanDevices}, "getWakeOnLanDevices": {Func: rpcGetWakeOnLanDevices},
"setWakeOnLanDevices": {Func: rpcSetWakeOnLanDevices, Params: []string{"params"}}, "setWakeOnLanDevices": {Func: rpcSetWakeOnLanDevices, Params: []string{"params"}},
"resetConfig": {Func: rpcResetConfig}, "resetConfig": {Func: rpcResetConfig},
"setDisplayRotation": {Func: rpcSetDisplayRotation, Params: []string{"params"}}, "setDisplayRotation": {Func: rpcSetDisplayRotation, Params: []string{"params"}},
"getDisplayRotation": {Func: rpcGetDisplayRotation}, "getDisplayRotation": {Func: rpcGetDisplayRotation},
"setBacklightSettings": {Func: rpcSetBacklightSettings, Params: []string{"params"}}, "setBacklightSettings": {Func: rpcSetBacklightSettings, Params: []string{"params"}},
"getBacklightSettings": {Func: rpcGetBacklightSettings}, "getBacklightSettings": {Func: rpcGetBacklightSettings},
"getDCPowerState": {Func: rpcGetDCPowerState}, "getDCPowerState": {Func: rpcGetDCPowerState},
"setDCPowerState": {Func: rpcSetDCPowerState, Params: []string{"enabled"}}, "setDCPowerState": {Func: rpcSetDCPowerState, Params: []string{"enabled"}},
"setDCRestoreState": {Func: rpcSetDCRestoreState, Params: []string{"state"}}, "setDCRestoreState": {Func: rpcSetDCRestoreState, Params: []string{"state"}},
"getActiveExtension": {Func: rpcGetActiveExtension}, "getActiveExtension": {Func: rpcGetActiveExtension},
"setActiveExtension": {Func: rpcSetActiveExtension, Params: []string{"extensionId"}}, "setActiveExtension": {Func: rpcSetActiveExtension, Params: []string{"extensionId"}},
"getATXState": {Func: rpcGetATXState}, "getATXState": {Func: rpcGetATXState},
"setATXPowerAction": {Func: rpcSetATXPowerAction, Params: []string{"action"}}, "setATXPowerAction": {Func: rpcSetATXPowerAction, Params: []string{"action"}},
"getSerialSettings": {Func: rpcGetSerialSettings}, "getSerialSettings": {Func: rpcGetSerialSettings},
"setSerialSettings": {Func: rpcSetSerialSettings, Params: []string{"settings"}}, "setSerialSettings": {Func: rpcSetSerialSettings, Params: []string{"settings"}},
"getUsbDevices": {Func: rpcGetUsbDevices}, "getUsbDevices": {Func: rpcGetUsbDevices},
"setUsbDevices": {Func: rpcSetUsbDevices, Params: []string{"devices"}}, "setUsbDevices": {Func: rpcSetUsbDevices, Params: []string{"devices"}},
"setUsbDeviceState": {Func: rpcSetUsbDeviceState, Params: []string{"device", "enabled"}}, "setUsbDeviceState": {Func: rpcSetUsbDeviceState, Params: []string{"device", "enabled"}},
"getAudioOutputEnabled": {Func: rpcGetAudioOutputEnabled}, "getAudioOutputEnabled": {Func: rpcGetAudioOutputEnabled},
"setAudioOutputEnabled": {Func: rpcSetAudioOutputEnabled, Params: []string{"enabled"}}, "setAudioOutputEnabled": {Func: rpcSetAudioOutputEnabled, Params: []string{"enabled"}},
"getAudioInputEnabled": {Func: rpcGetAudioInputEnabled}, "getAudioInputEnabled": {Func: rpcGetAudioInputEnabled},
"setAudioInputEnabled": {Func: rpcSetAudioInputEnabled, Params: []string{"enabled"}}, "setAudioInputEnabled": {Func: rpcSetAudioInputEnabled, Params: []string{"enabled"}},
"setCloudUrl": {Func: rpcSetCloudUrl, Params: []string{"apiUrl", "appUrl"}}, "getAudioInputAutoEnable": {Func: rpcGetAudioInputAutoEnable},
"getKeyboardLayout": {Func: rpcGetKeyboardLayout}, "setAudioInputAutoEnable": {Func: rpcSetAudioInputAutoEnable, Params: []string{"enabled"}},
"setKeyboardLayout": {Func: rpcSetKeyboardLayout, Params: []string{"layout"}}, "setCloudUrl": {Func: rpcSetCloudUrl, Params: []string{"apiUrl", "appUrl"}},
"getKeyboardMacros": {Func: getKeyboardMacros}, "getKeyboardLayout": {Func: rpcGetKeyboardLayout},
"setKeyboardMacros": {Func: setKeyboardMacros, Params: []string{"params"}}, "setKeyboardLayout": {Func: rpcSetKeyboardLayout, Params: []string{"layout"}},
"getLocalLoopbackOnly": {Func: rpcGetLocalLoopbackOnly}, "getKeyboardMacros": {Func: getKeyboardMacros},
"setLocalLoopbackOnly": {Func: rpcSetLocalLoopbackOnly, Params: []string{"enabled"}}, "setKeyboardMacros": {Func: setKeyboardMacros, Params: []string{"params"}},
"getLocalLoopbackOnly": {Func: rpcGetLocalLoopbackOnly},
"setLocalLoopbackOnly": {Func: rpcSetLocalLoopbackOnly, Params: []string{"enabled"}},
} }

19
ui/src/components/popovers/AudioPopover.tsx
View File

@ -16,6 +16,7 @@ export default function AudioPopover() {
const [audioOutputEnabled, setAudioOutputEnabled] = useState<boolean>(true); const [audioOutputEnabled, setAudioOutputEnabled] = useState<boolean>(true);
const [usbAudioEnabled, setUsbAudioEnabled] = useState<boolean>(false); const [usbAudioEnabled, setUsbAudioEnabled] = useState<boolean>(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [micLoading, setMicLoading] = useState(false);
const isHttps = isSecureContext(); const isHttps = isSecureContext();
useEffect(() => { useEffect(() => {
@ -54,6 +55,21 @@ export default function AudioPopover() {
}); });
}, [send]); }, [send]);
const handleMicrophoneToggle = useCallback((enabled: boolean) => {
setMicLoading(true);
send("setAudioInputEnabled", { enabled }, (resp: JsonRpcResponse) => {
setMicLoading(false);
if ("error" in resp) {
const errorMsg = enabled
? m.audio_input_failed_enable({ error: String(resp.error.data || m.unknown_error()) })
: m.audio_input_failed_disable({ error: String(resp.error.data || m.unknown_error()) });
notifications.error(errorMsg);
} else {
setMicrophoneEnabled(enabled);
}
});
}, [send, setMicrophoneEnabled]);
return ( return (
<GridCard> <GridCard>
<div className="space-y-4 p-4 py-3"> <div className="space-y-4 p-4 py-3">
@ -80,6 +96,7 @@ export default function AudioPopover() {
<div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
<SettingsItem <SettingsItem
loading={micLoading}
title={m.audio_microphone_title()} title={m.audio_microphone_title()}
description={m.audio_microphone_description()} description={m.audio_microphone_description()}
badge={!isHttps ? m.audio_https_only() : undefined} badge={!isHttps ? m.audio_https_only() : undefined}
@ -89,7 +106,7 @@ export default function AudioPopover() {
<Checkbox <Checkbox
checked={microphoneEnabled} checked={microphoneEnabled}
disabled={!isHttps} disabled={!isHttps}
onChange={(e) => setMicrophoneEnabled(e.target.checked)} onChange={(e) => handleMicrophoneToggle(e.target.checked)}
/> />
</SettingsItem> </SettingsItem>
</> </>

5
ui/src/hooks/stores.ts
View File

@ -382,6 +382,8 @@ export interface SettingsState {
setMicrophoneEnabled: (enabled: boolean) => void; setMicrophoneEnabled: (enabled: boolean) => void;
audioInputAutoEnable: boolean; audioInputAutoEnable: boolean;
setAudioInputAutoEnable: (enabled: boolean) => void; setAudioInputAutoEnable: (enabled: boolean) => void;
resetMicrophoneState: () => void;
} }
export const useSettingsStore = create( export const useSettingsStore = create(
@ -430,13 +432,14 @@ export const useSettingsStore = create(
videoContrast: 1.0, videoContrast: 1.0,
setVideoContrast: (value: number) => set({ videoContrast: value }), setVideoContrast: (value: number) => set({ videoContrast: value }),
// Audio settings with defaults
audioOutputEnabled: true, audioOutputEnabled: true,
setAudioOutputEnabled: (enabled: boolean) => set({ audioOutputEnabled: enabled }), setAudioOutputEnabled: (enabled: boolean) => set({ audioOutputEnabled: enabled }),
microphoneEnabled: false, microphoneEnabled: false,
setMicrophoneEnabled: (enabled: boolean) => set({ microphoneEnabled: enabled }), setMicrophoneEnabled: (enabled: boolean) => set({ microphoneEnabled: enabled }),
audioInputAutoEnable: false, audioInputAutoEnable: false,
setAudioInputAutoEnable: (enabled: boolean) => set({ audioInputAutoEnable: enabled }), setAudioInputAutoEnable: (enabled: boolean) => set({ audioInputAutoEnable: enabled }),
resetMicrophoneState: () => set({ microphoneEnabled: false }),
}), }),
{ {
name: "settings", name: "settings",

22
ui/src/routes/devices.$id.settings.audio.tsx
View File

@ -16,20 +16,15 @@ export default function SettingsAudioRoute() {
useEffect(() => { useEffect(() => {
send("getAudioOutputEnabled", {}, (resp: JsonRpcResponse) => { send("getAudioOutputEnabled", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) return;
return;
}
settings.setAudioOutputEnabled(resp.result as boolean); settings.setAudioOutputEnabled(resp.result as boolean);
}); });
send("getAudioInputEnabled", {}, (resp: JsonRpcResponse) => { send("getAudioInputAutoEnable", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) return;
return;
}
settings.setAudioInputAutoEnable(resp.result as boolean); settings.setAudioInputAutoEnable(resp.result as boolean);
}); });
// eslint-disable-next-line react-hooks/exhaustive-deps }, [send, settings]);
}, [send]);
const handleAudioOutputEnabledChange = (enabled: boolean) => { const handleAudioOutputEnabledChange = (enabled: boolean) => {
send("setAudioOutputEnabled", { enabled }, (resp: JsonRpcResponse) => { send("setAudioOutputEnabled", { enabled }, (resp: JsonRpcResponse) => {
@ -47,17 +42,12 @@ export default function SettingsAudioRoute() {
}; };
const handleAudioInputAutoEnableChange = (enabled: boolean) => { const handleAudioInputAutoEnableChange = (enabled: boolean) => {
send("setAudioInputEnabled", { enabled }, (resp: JsonRpcResponse) => { send("setAudioInputAutoEnable", { enabled }, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) {
const errorMsg = enabled notifications.error(String(resp.error.data || m.unknown_error()));
? m.audio_input_failed_enable({ error: String(resp.error.data || m.unknown_error()) })
: m.audio_input_failed_disable({ error: String(resp.error.data || m.unknown_error()) });
notifications.error(errorMsg);
return; return;
} }
settings.setAudioInputAutoEnable(enabled); settings.setAudioInputAutoEnable(enabled);
const successMsg = enabled ? m.audio_input_enabled() : m.audio_input_disabled();
notifications.success(successMsg);
}); });
}; };

69
ui/src/routes/devices.$id.tsx
View File

@ -538,11 +538,6 @@ export default function KvmIdRoute() {
const audioTrans = pc.addTransceiver("audio", { direction: "sendrecv" }); const audioTrans = pc.addTransceiver("audio", { direction: "sendrecv" });
setAudioTransceiver(audioTrans); setAudioTransceiver(audioTrans);
// Enable microphone if auto-enable is on (only works over HTTPS or localhost)
if (audioInputAutoEnable && isSecureContext()) {
setMicrophoneEnabled(true);
}
const rpcDataChannel = pc.createDataChannel("rpc"); const rpcDataChannel = pc.createDataChannel("rpc");
rpcDataChannel.onclose = () => console.log("rpcDataChannel has closed"); rpcDataChannel.onclose = () => console.log("rpcDataChannel has closed");
rpcDataChannel.onerror = (ev: Event) => console.error(`Error on DataChannel '${rpcDataChannel.label}': ${ev}`); rpcDataChannel.onerror = (ev: Event) => console.error(`Error on DataChannel '${rpcDataChannel.label}': ${ev}`);
@ -606,47 +601,39 @@ export default function KvmIdRoute() {
} }
}, [peerConnectionState, cleanupAndStopReconnecting]); }, [peerConnectionState, cleanupAndStopReconnecting]);
// Handle dynamic microphone enable/disable
useEffect(() => { useEffect(() => {
if (!audioTransceiver || !peerConnection) return; if (!audioTransceiver || !peerConnection) return;
if (microphoneEnabled) { if (microphoneEnabled) {
// Request microphone access navigator.mediaDevices?.getUserMedia({
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { audio: {
navigator.mediaDevices.getUserMedia({ echoCancellation: true,
audio: { noiseSuppression: true,
echoCancellation: true, autoGainControl: true,
noiseSuppression: true, channelCount: 2,
autoGainControl: true, }
channelCount: 2, }).then((stream) => {
} const audioTrack = stream.getAudioTracks()[0];
}).then((stream) => { if (audioTrack && audioTransceiver.sender) {
const audioTrack = stream.getAudioTracks()[0]; audioTransceiver.sender.replaceTrack(audioTrack);
if (audioTrack && audioTransceiver.sender) { }
audioTransceiver.sender.replaceTrack(audioTrack); }).catch(() => {
console.log("Microphone enabled"); setMicrophoneEnabled(false);
} });
}).catch((err) => {
console.warn("Microphone access denied or unavailable:", err.message);
setMicrophoneEnabled(false);
});
}
} else { } else {
// Disable microphone by removing the track
if (audioTransceiver.sender.track) { if (audioTransceiver.sender.track) {
audioTransceiver.sender.track.stop(); audioTransceiver.sender.track.stop();
audioTransceiver.sender.replaceTrack(null); audioTransceiver.sender.replaceTrack(null);
console.log("Microphone disabled");
} }
} }
}, [microphoneEnabled, audioTransceiver, peerConnection, setMicrophoneEnabled]); }, [microphoneEnabled, audioTransceiver, peerConnection]);
// Auto-enable microphone when setting is loaded from backend
useEffect(() => { useEffect(() => {
if (audioInputAutoEnable && audioTransceiver && peerConnection && !microphoneEnabled && isSecureContext()) { if (!audioTransceiver || !peerConnection || !audioInputAutoEnable || microphoneEnabled) return;
if (isSecureContext()) {
setMicrophoneEnabled(true); setMicrophoneEnabled(true);
} }
}, [audioInputAutoEnable, audioTransceiver, peerConnection, microphoneEnabled, setMicrophoneEnabled]); }, [audioInputAutoEnable, audioTransceiver, peerConnection, microphoneEnabled]);
// Cleanup effect // Cleanup effect
const { clearInboundRtpStats, clearCandidatePairStats } = useRTCStore(); const { clearInboundRtpStats, clearCandidatePairStats } = useRTCStore();
@ -806,15 +793,6 @@ export default function KvmIdRoute() {
const { send } = useJsonRpc(onJsonRpcRequest); const { send } = useJsonRpc(onJsonRpcRequest);
// Load audio input auto-enable setting from backend on mount
useEffect(() => {
send("getAudioInputEnabled", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) {
return;
}
setAudioInputAutoEnable(resp.result as boolean);
});
}, [send, setAudioInputAutoEnable]);
useEffect(() => { useEffect(() => {
if (rpcDataChannel?.readyState !== "open") return; if (rpcDataChannel?.readyState !== "open") return;
@ -827,6 +805,15 @@ export default function KvmIdRoute() {
}); });
}, [rpcDataChannel?.readyState, send, setHdmiState]); }, [rpcDataChannel?.readyState, send, setHdmiState]);
// Load audio input auto-enable preference from backend
useEffect(() => {
if (rpcDataChannel?.readyState !== "open") return;
send("getAudioInputAutoEnable", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) return;
setAudioInputAutoEnable(resp.result as boolean);
});
}, [rpcDataChannel?.readyState, send, setAudioInputAutoEnable]);
const [needLedState, setNeedLedState] = useState(true); const [needLedState, setNeedLedState] = useState(true);
// request keyboard led state from the device // request keyboard led state from the device

3
ui/src/routes/login-local.tsx
View File

@ -16,8 +16,11 @@ import { DeviceStatus } from "@routes/welcome-local";
import { DEVICE_API } from "@/ui.config"; import { DEVICE_API } from "@/ui.config";
import api from "@/api"; import api from "@/api";
import { m } from "@localizations/messages.js"; import { m } from "@localizations/messages.js";
import { useSettingsStore } from "@/hooks/stores";
const loader: LoaderFunction = async () => { const loader: LoaderFunction = async () => {
useSettingsStore.getState().resetMicrophoneState();
const res = await api const res = await api
.GET(`${DEVICE_API}/device/status`) .GET(`${DEVICE_API}/device/status`)
.then(res => res.json() as Promise<DeviceStatus>); .then(res => res.json() as Promise<DeviceStatus>);

6
ui/src/routes/login.tsx
View File

@ -1,13 +1,19 @@
import { useEffect } from "react";
import { useLocation, useSearchParams } from "react-router"; import { useLocation, useSearchParams } from "react-router";
import { m } from "@localizations/messages.js"; import { m } from "@localizations/messages.js";
import AuthLayout from "@components/AuthLayout"; import AuthLayout from "@components/AuthLayout";
import { useSettingsStore } from "@/hooks/stores";
export default function LoginRoute() { export default function LoginRoute() {
const [sq] = useSearchParams(); const [sq] = useSearchParams();
const location = useLocation(); const location = useLocation();
const deviceId = sq.get("deviceId") || location.state?.deviceId; const deviceId = sq.get("deviceId") || location.state?.deviceId;
useEffect(() => {
useSettingsStore.getState().resetMicrophoneState();
}, []);
if (deviceId) { if (deviceId) {
return ( return (
<AuthLayout <AuthLayout