strawberries/frangipane-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added full control over which input device to use in voice chat (limited by cpal)

Browse Source
This commit is contained in:
eiiko6
2026-01-30 15:49:48 +01:00
parent 81d9624c9e
commit c57e8d8254
11 changed files with 329 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -2,7 +2,7 @@
"name": "frangipane-client",
"private": true,
"version": "1.0.2",
"backendVersion": "1.0.5",
"backendVersion": "1.0.6",
"type": "module",
"scripts": {
"dev": "vite",

148
src-tauri/src/audio.rs
View File

@@ -1,5 +1,5 @@
use cpal::traits::{DeviceTrait, HostTrait, StreamTrait};
use cpal::SampleFormat;
use cpal::{Host, HostId, SampleFormat};
use std::sync::{Arc, Mutex};
use tauri::{AppHandle, Emitter};
@@ -21,52 +21,85 @@ struct MicConfig {
channels: usize,
}
/// Helper to resolve host string to cpal::Host
fn get_host_by_name(name: &str) -> Result<Host, String> {
let host_id = cpal::available_hosts()
.into_iter()
.find(|id| id.name() == name)
.ok_or_else(|| format!("Host '{}' not found", name))?;
cpal::host_from_id(host_id).map_err(|e| e.to_string())
}
#[tauri::command]
pub fn start_microphone(app: AppHandle, state: tauri::State<AudioState>) -> Result<(), String> {
#[cfg(all(any(
target_os = "linux",
target_os = "dragonfly",
target_os = "freebsd",
target_os = "netbsd"
)))]
let host = cpal::host_from_id(
cpal::available_hosts()
.into_iter()
.find(|id| *id == cpal::HostId::Jack)
.expect("jack host unavailable"),
)
.unwrap_or(
cpal::host_from_id(*cpal::available_hosts().first().expect("no host available"))
.expect("host not available"),
);
pub fn get_audio_hosts() -> Vec<String> {
cpal::available_hosts()
.into_iter()
.map(|id| id.name().to_string())
.collect()
}
#[cfg(any(not(any(
target_os = "linux",
target_os = "dragonfly",
target_os = "freebsd",
target_os = "netbsd"
))))]
let host = cpal::default_host();
#[tauri::command]
pub fn get_input_devices(host_name: Option<String>) -> Result<Vec<(String, String)>, String> {
// If no host provided, use default
let host = if let Some(name) = host_name {
get_host_by_name(&name)?
} else {
cpal::default_host()
};
let device = host
.default_input_device()
.ok_or("No input device available")?;
let devices = host.input_devices().map_err(|e| e.to_string())?;
let device_names: Vec<(String, String)> = devices
.into_iter()
.filter_map(|device| {
Some((
device.id().ok()?.to_string(),
device.description().ok()?.to_string(),
))
})
.collect();
Ok(device_names)
}
#[tauri::command]
pub fn start_microphone(
app: AppHandle,
state: tauri::State<AudioState>,
host_name: Option<String>,
device_id: Option<String>,
) -> Result<(), String> {
let host = if let Some(ref h_name) = host_name {
get_host_by_name(h_name)?
} else {
cpal::default_host()
};
let device = if let Some(ref id) = device_id {
host.input_devices()
.map_err(|e| e.to_string())?
.find(|d| d.id().map(|i| i.to_string()) == Ok(id.to_string()))
.ok_or_else(|| format!("Device '{}' not found on host '{:?}'", id, host.id()))?
} else {
host.default_input_device()
.ok_or("No input device available")?
};
let config = device
.default_input_config()
.map_err(|e| format!("Failed to get config: {}", e))?;
println!("Microphone Config: {:?}", config);
let sample_rate = config.sample_rate();
let device_channels = config.channels() as usize;
let channels = 1; // NOTE: temporary
let channels = 1;
let buffer_threshold = (sample_rate as usize / 10) * 2;
app.emit(
"microphone-config",
MicConfig {
sample_rate,
sample_rate: sample_rate,
channels,
},
)
@@ -74,39 +107,24 @@ pub fn start_microphone(app: AppHandle, state: tauri::State<AudioState>) -> Resu
let sample_format = config.sample_format();
let stream_config: cpal::StreamConfig = config.into();
let err_fn = |err| eprintln!("Stream error: {}", err);
let app_handle = app.clone();
let mut emit_if_full = move |buffer: &mut Vec<u8>| {
if buffer.len() >= buffer_threshold {
let payload = buffer.clone();
let _ = app_handle.emit("microphone-data", payload);
buffer.clear();
}
};
let app_handle = app.clone();
let stream = match sample_format {
SampleFormat::F32 => {
cpal::SampleFormat::F32 => {
let mut local_buffer = Vec::with_capacity(buffer_threshold * 2);
device.build_input_stream(
&stream_config,
move |data: &[f32], _| {
for frame in data.chunks(device_channels) {
let sample = frame[0]; // Take first channel
let s = sample.clamp(-1.0, 1.0);
let v = if s >= 0.0 {
(s * 32767.0) as i16
let sample = frame[0].clamp(-1.0, 1.0);
let v = if sample >= 0.0 {
(sample * 32767.0) as i16
} else {
(s * 32768.0) as i16
(sample * 32768.0) as i16
};
local_buffer.extend_from_slice(&v.to_le_bytes());
}
// Only emit if we have enough data
if local_buffer.len() >= buffer_threshold {
let _ = app_handle.emit("microphone-data", &local_buffer);
local_buffer.clear();
@@ -116,38 +134,14 @@ pub fn start_microphone(app: AppHandle, state: tauri::State<AudioState>) -> Resu
None,
)
}
SampleFormat::I16 => {
cpal::SampleFormat::I16 => {
let mut local_buffer = Vec::with_capacity(buffer_threshold * 2);
device.build_input_stream(
&stream_config,
move |data: &[i16], _| {
for frame in data.chunks(device_channels) {
let sample = frame[0];
local_buffer.extend_from_slice(&sample.to_le_bytes());
local_buffer.extend_from_slice(&frame[0].to_le_bytes());
}
if local_buffer.len() >= buffer_threshold {
let _ = app_handle.emit("microphone-data", &local_buffer);
local_buffer.clear();
}
},
err_fn,
None,
)
}
SampleFormat::U16 => {
let mut local_buffer = Vec::with_capacity(buffer_threshold * 2);
device.build_input_stream(
&stream_config,
move |data: &[u16], _| {
for frame in data.chunks(device_channels) {
let sample = frame[0];
let v = (sample as i32 - 32768) as i16;
local_buffer.extend_from_slice(&v.to_le_bytes());
}
if local_buffer.len() >= buffer_threshold {
let _ = app_handle.emit("microphone-data", &local_buffer);
local_buffer.clear();

6
src-tauri/src/lib.rs
View File

@@ -1,5 +1,5 @@
mod audio;
use audio::{start_microphone, stop_microphone};
use audio::{get_audio_hosts, get_input_devices, start_microphone, stop_microphone};
#[tauri::command]
fn log(message: &str) {
@@ -22,7 +22,9 @@ pub fn run() {
.invoke_handler(tauri::generate_handler![
start_microphone,
stop_microphone,
log
log,
get_input_devices,
get_audio_hosts
])
.run(tauri::generate_context!())
.expect("error while running tauri application");

2
src-tauri/tauri.conf.json
View File

@@ -1,7 +1,7 @@
{
"$schema": "https://schema.tauri.app/config/2",
"productName": "frangipane",
"version": "1.0.1",
"version": "1.0.2",
"identifier": "com.strawberries.frangipane",
"build": {
"beforeDevCommand": "yarn dev",

24
src/components/ChatWindow.vue
View File

@@ -7,6 +7,8 @@
:ownerUuid="currentRoom?.owner_uuid || ''" @close="showDetailsModal = false"
@room-changed="handleRoomChanged" />
<VoiceDeviceModal v-if="showVoiceModal" @close="showVoiceModal = false" @select="handleVoiceSelect" />
<div v-if="uuid === 'none'" class="no-room">
<div class="empty-state">
<i class="fa-solid fa-comments"></i>
@@ -44,8 +46,7 @@
<i class="fa-solid fa-users"></i>
</button>
<button class="invite-btn" @click="toggleVoice" :class="{ 'active-voice': isCurrentRoomVoice }"
title="Join Voice Chat">
<button class="invite-btn" @click="toggleVoice" :class="{ 'active-voice': isCurrentRoomVoice }">
<i class="fa-solid" :class="isCurrentRoomVoice ? 'fa-phone-slash' : 'fa-phone'"></i>
</button>
@@ -68,6 +69,7 @@ import MessageList from "./MessageList.vue";
import MessageInput from "./MessageInput.vue";
import InvitePeopleModal from './InvitePeopleModal.vue';
import RoomDetailsModal from "./RoomDetailsModal.vue";
import VoiceDeviceModal from "./VoiceDeviceModal.vue";
import WebSocket from '@tauri-apps/plugin-websocket';
import { getAuthData } from "../store.ts";
import { fetchRoomInfo } from "../api/rooms.ts";
@@ -96,9 +98,11 @@ const connectionError = ref<string | null>(null);
// Pagination State
const isLoadingMore = ref(false);
const hasMore = ref(true);
const isInitialLoad = ref(false);
const showInviteModal = ref(false);
const showDetailsModal = ref(false);
const isInitialLoad = ref(false);
const showVoiceModal = ref(false);
// WebSocket State
let socket: WebSocket | null = null;
@@ -324,7 +328,19 @@ async function toggleVoice() {
if (isCurrentRoomVoice.value) {
await voiceActions.leaveRoom();
} else {
await voiceActions.joinRoom(props.uuid);
showVoiceModal.value = true;
}
}
async function handleVoiceSelect(selection: { host: string | null, device: string | null }) {
showVoiceModal.value = false;
if (!selection) return;
try {
await voiceActions.joinRoom(props.uuid, selection.host, selection.device);
} catch (e) {
console.error("Failed to join voice", e);
}
}
</script>

198
src/components/VoiceDeviceModal.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div class="backdrop" @click.self="$emit('close')">
<div class="modal">
<div v-if="step === 1" class="step-container">
<h3>{{ $t('chat-voice-select-host') || 'Select Audio System' }}</h3>
<div v-if="loadingHosts" class="loading">Loading systems...</div>
<div v-else class="list">
<button @click="selectHost(null)" class="item default">
<i class="fa-solid fa-wand-magic-sparkles"></i>
<span>Automatic (Default)</span>
</button>
<button v-for="host in hosts" :key="host" @click="selectHost(host)" class="item">
<i class="fa-solid fa-server"></i>
<span>{{ host }}</span>
</button>
</div>
</div>
<div v-else class="step-container">
<div class="header">
<button class="back-btn" @click="step = 1">
<i class="fa-solid fa-arrow-left"></i>
</button>
<h3>{{ selectedHost }} Devices</h3>
</div>
<div v-if="loadingDevices" class="loading">Scanning devices...</div>
<div v-else class="list">
<button @click="selectDevice(null)" class="item default">
<i class="fa-solid fa-star"></i>
<span>Default Device</span>
</button>
<button v-for="device in devices" :key="device[0]" @click="selectDevice(device[0])" class="item">
<i class="fa-solid fa-microphone"></i>
<div class="device-details">
<span class="device-name">{{ device[1] }}</span>
</div>
</button>
</div>
</div>
<div class="actions">
<button class="secondary" @click="$emit('close')">Cancel</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { voiceActions } from '../voice';
const emit = defineEmits(['close', 'select']);
const step = ref(1);
const hosts = ref<string[]>([]);
const devices = ref<string[]>([]); // Array of [id, name] tuples
const selectedHost = ref<string | null>(null);
const loadingHosts = ref(false);
const loadingDevices = ref(false);
onMounted(async () => {
loadingHosts.value = true;
hosts.value = await voiceActions.getHosts();
loadingHosts.value = false;
});
async function selectHost(host: string | null) {
selectedHost.value = host;
// Default
if (host === null) {
emit('select', { host: null, device: null });
return;
}
step.value = 2;
loadingDevices.value = true;
devices.value = await voiceActions.getDevices(host);
loadingDevices.value = false;
}
function selectDevice(deviceId: string | null) {
emit('select', { host: selectedHost.value, device: deviceId });
}
</script>
<style scoped>
.backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.step-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.header {
display: flex;
align-items: center;
gap: 1rem;
}
.back-btn {
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
font-size: 1.1rem;
padding: 0.5rem;
border-radius: 50%;
}
.back-btn:hover {
background: var(--panel-hover);
}
.list {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 400px;
overflow-y: auto;
padding-right: 5px;
}
.item {
background: none;
text-align: left;
font-weight: 500;
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
display: flex;
align-items: center;
padding: 0.8rem;
gap: 0.8rem;
transition: all 0.2s ease;
min-width: 0;
}
.item:hover {
border-color: var(--accent-color);
background: var(--panel-hover);
}
.device-details {
display: flex;
flex-direction: column;
overflow: hidden;
}
.device-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.actions {
display: flex;
justify-content: flex-end;
margin-top: 0.5rem;
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.loading {
text-align: center;
color: var(--muted);
padding: 2rem;
}
</style>

1
src/locales/en.ftl
View File

@@ -50,6 +50,7 @@ chat-create-global = Global room
chat-create-submit = Create
chat-connecting = Connecting to room...
chat-connecting-failed = Could not connect. Check internet connection.
chat-voice-select-input = Select input device.
## User profile
profile-title = User profile

1
src/locales/fr.ftl
View File

@@ -50,6 +50,7 @@ chat-create-global = Salon public
chat-create-submit = Créer
chat-connecting = Connexion au salon...
chat-connecting-failed = Impossible d'établir la connexion. Vérifiez votre internet.
chat-voice-select-input = Sélectionnez un périphérique d'entrée.
## User profile
profile-title = Profil d'utilisateur

8
src/main.ts
View File

@@ -54,9 +54,9 @@ async function init() {
init()
export const API = 'http://127.0.0.1:8080'
// export const API = 'http://192.168.1.183:8080'
// export const API = 'http://127.0.0.1:8080'
export const API = 'http://192.168.1.183:8080'
// export const API = 'https://alatreon.org/frangipane'
export const API_WS = 'ws://127.0.0.1:8080/ws'
// export const API_WS = 'ws://192.168.1.183:8080/ws'
// export const API_WS = 'ws://127.0.0.1:8080/ws'
export const API_WS = 'ws://192.168.1.183:8080/ws'
// export const API_WS = 'wss://alatreon.org/frangipane/ws'

4
src/pages/RegisterPage.vue
View File

@@ -48,11 +48,9 @@ const errorMessage = ref("");
const router = useRouter();
async function submit(event: Event) {
async function submit() {
errorMessage.value = "";
const form = event.target as HTMLFormElement;
// if (!form.checkValidity()) {
// if (password.value.length < 8) {
// errorMessage.value = $t('auth-error-password-length');

51
src/voice.ts
View File

@@ -1,5 +1,5 @@
import { reactive } from 'vue';
import { API_WS, logJS } from './main';
import { API_WS } from './main';
import { apiFetch } from './api/client';
import WebSocket from '@tauri-apps/plugin-websocket';
import { invoke } from '@tauri-apps/api/core';
@@ -53,34 +53,46 @@ export async function initVoiceListeners() {
}
export const voiceActions = {
async joinRoom(roomUuid: string) {
async getHosts(): Promise<string[]> {
try {
return await invoke<string[]>('get_audio_hosts');
} catch (e) {
console.error(e);
return [];
}
},
async getDevices(hostName: string | null): Promise<string[]> {
try {
return await invoke('get_input_devices', { hostName });
} catch (e) {
console.error(e);
return [];
}
},
async joinRoom(roomUuid: string, hostName: string | null, deviceName: string | null) {
if (voiceState.status === 'connected') return;
nextStartTime = 0;
voiceState.status = 'connecting';
voiceState.currentRoomUuid = roomUuid;
// Ensure listeners are active
await initVoiceListeners();
try {
const res = await apiFetch<{ token: string }>('/ws/issue-token');
const url = `${API_WS}/voice/${roomUuid}?token=${res.token}`;
socket = await WebSocket.connect(url);
socket.addListener((msg) => {
if (msg.type === 'Binary') {
handleIncomingAudio(msg.data);
} else if (msg.type === 'Close') {
voiceActions.leaveRoom();
}
if (msg.type === 'Binary') handleIncomingAudio(msg.data);
else if (msg.type === 'Close') voiceActions.leaveRoom();
});
await this.startAudioCapture();
await this.startAudioCapture(hostName, deviceName);
voiceState.status = 'connected';
} catch (e) {
logJS(e);
console.error("Voice join failed", e);
voiceActions.leaveRoom();
}
@@ -105,34 +117,25 @@ export const voiceActions = {
voiceState.isMuted = !voiceState.isMuted;
},
async startAudioCapture() {
async startAudioCapture(hostName: string | null, deviceName: string | null) {
const hasPermission = await ensureMicrophonePermission();
if (!hasPermission) {
throw new Error("Microphone permission denied");
}
// Give the OS a moment to release the mic resource from the WebView
if (!hasPermission) throw new Error("Microphone permission denied");
await new Promise(r => setTimeout(r, 200));
audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
unlistenConfig = await listen<{ sample_rate: number, channels: number }>('microphone-config', (event) => {
console.log("Mic Config Received:", event.payload);
voiceState.captureSampleRate = event.payload.sample_rate;
voiceState.captureChannels = event.payload.channels;
});
unlistenMic = await listen<number[]>('microphone-data', (event) => {
if (voiceState.isMuted || !socket) return;
socket.send(event.payload).catch(console.error);
});
try {
await invoke('start_microphone');
} catch (e) {
console.error("Failed to start mic:", e);
throw e;
}
await invoke('start_microphone', { hostName, deviceName });
},
async stopAudioCapture() {