apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-07-04 10:52:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: fix audio permission issue on safari (#26)

Browse source 
* fix: fix audio permission issue on safari

* fix: fix service key creation in oss mode

* fix: fix hydration error for usage page
This commit is contained in:
Abhishek 2025-10-07 16:44:45 +05:30 • committed by GitHub
parent a2d02d8326
commit e9c0afd517
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 90 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

4
ui/src/app/workflow/[workflowId]/run/[runId]/BrowserCall.tsx
View file

@ -39,7 +39,8 @@ const BrowserCall = ({ workflowId, workflowRunId, accessToken, initialContextVar
connectionStatus,
start,
stop,
isStarting
isStarting,
getAudioInputDevices
} = useWebSocketRTC({ workflowId, workflowRunId, accessToken, initialContextVariables });
// Poll for recording availability after call ends
@ -118,6 +119,7 @@ const BrowserCall = ({ workflowId, workflowRunId, accessToken, initialContextVar
start={start}
stop={stop}
isStarting={isStarting}
getAudioInputDevices={getAudioInputDevices}
/>
<ConnectionStatus

29
ui/src/app/workflow/[workflowId]/run/[runId]/components/AudioControls.tsx
View file

@ -1,4 +1,5 @@
import { Mic, Phone, PhoneOff } from "lucide-react";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
@ -12,6 +13,7 @@ interface AudioControlsProps {
start: () => Promise<void>;
stop: () => void;
isStarting: boolean;
getAudioInputDevices: () => Promise<void>;
}
export const AudioControls = ({
@ -23,28 +25,35 @@ export const AudioControls = ({
permissionError,
start,
stop,
isStarting
isStarting,
getAudioInputDevices
}: AudioControlsProps) => {
// Check if we have valid audio devices (permissions granted)
const hasValidDevices = audioInputs.length > 0 && audioInputs.some(device => device.deviceId && device.deviceId.trim() !== '');
// Browsers only provide device labels after permission is granted
const hasValidDevices = audioInputs.length > 0 && audioInputs.some(device => device.label && device.label.trim() !== '');
const requestAudioPermissions = async () => {
try {
await navigator.mediaDevices.getUserMedia({ audio: true });
// This will trigger the parent component to refresh the device list
window.location.reload();
// Request audio permissions - this triggers the browser permission prompt
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
// Stop the stream immediately - we just needed to trigger the permission prompt
stream.getTracks().forEach(track => track.stop());
// Refresh the device list now that we have permissions
await getAudioInputDevices();
} catch (error) {
console.error('Failed to request audio permissions:', error);
}
};
// Handle auto-selection of first device if none selected
if (hasValidDevices && !selectedAudioInput) {
const firstValidDevice = audioInputs.find(device => device.deviceId && device.deviceId.trim() !== '');
if (firstValidDevice) {
setSelectedAudioInput(firstValidDevice.deviceId);
useEffect(() => {
if (hasValidDevices && !selectedAudioInput) {
const firstValidDevice = audioInputs.find(device => device.label && device.label.trim() !== '');
if (firstValidDevice) {
setSelectedAudioInput(firstValidDevice.deviceId);
}
}
}
}, [hasValidDevices, selectedAudioInput, audioInputs, setSelectedAudioInput]);
if (isCompleted) {
return null; // The parent component will handle showing the loading state

36
ui/src/app/workflow/[workflowId]/run/[runId]/hooks/useDeviceInputs.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import logger from '@/lib/logger';
@ -7,30 +7,32 @@ export const useDeviceInputs = () => {
const [selectedAudioInput, setSelectedAudioInput] = useState('');
const [permissionError, setPermissionError] = useState<string | null>(null);
useEffect(() => {
const getAudioInputs = async () => {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const audioDevices = devices.filter(device => device.kind === 'audioinput');
setAudioInputs(audioDevices);
const getAudioInputDevices = useCallback(async () => {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const audioDevices = devices.filter(device => device.kind === 'audioinput');
setAudioInputs(audioDevices);
const defaultAudioInput = audioDevices.find(device => device.deviceId === 'default');
if (defaultAudioInput) {
setSelectedAudioInput(defaultAudioInput.deviceId);
}
} catch (error) {
setPermissionError('Could not enumerate devices');
logger.error(`Error enumerating devices: ${error}`);
const defaultAudioInput = audioDevices.find(device => device.deviceId === 'default');
if (defaultAudioInput) {
setSelectedAudioInput(defaultAudioInput.deviceId);
}
};
getAudioInputs();
} catch (error) {
setPermissionError('Could not enumerate devices');
logger.error(`Error enumerating devices: ${error}`);
}
}, []);
useEffect(() => {
getAudioInputDevices();
}, [getAudioInputDevices]);
return {
audioInputs,
selectedAudioInput,
setSelectedAudioInput,
permissionError,
setPermissionError
setPermissionError,
getAudioInputDevices
};
};

6
ui/src/app/workflow/[workflowId]/run/[runId]/hooks/useWebSocketRTC.tsx
View file

@ -31,7 +31,8 @@ export const useWebSocketRTC = ({ workflowId, workflowRunId, accessToken, initia
selectedAudioInput,
setSelectedAudioInput,
permissionError,
setPermissionError
setPermissionError,
getAudioInputDevices
} = useDeviceInputs();
const useStun = true;
@ -435,6 +436,7 @@ export const useWebSocketRTC = ({ workflowId, workflowRunId, accessToken, initia
start,
stop,
isStarting,
initialContext
initialContext,
getAudioInputDevices
};
};