feat: Media call - generated DTMF tone sounds (RocketChat#37074)

Author: gabriellsh

.changeset/plenty-tips-care.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/ui-voip": minor
+---
+
+Introduces audio feedback for the Voice Call Dialpad.

packages/ui-voip/src/v2/MediaCallProvider.tsx

@@ -21,6 +21,7 @@ import { useCallSounds } from './useCallSounds';
 import { useMediaSession } from './useMediaSession';
 import { useMediaSessionInstance } from './useMediaSessionInstance';
 import useMediaStream from './useMediaStream';
+import { isValidTone, useTonePlayer } from './useTonePlayer';
 import { stopTracks, useDevicePermissionPrompt2, PermissionRequestCancelledCallRejectedError } from '../hooks/useDevicePermissionPrompt';
 
 const MediaCallProvider = ({ children }: { children: React.ReactNode }) => {
@@ -40,7 +41,7 @@ const MediaCallProvider = ({ children }: { children: React.ReactNode }) => {
 	const setOutputMediaDevice = useSetOutputMediaDevice();
 	const setInputMediaDevice = useSetInputMediaDevice();
 
-	const { audioInput } = useSelectedDevices() || {};
+	const { audioInput, audioOutput } = useSelectedDevices() || {};
 
 	const requestDevice = useDevicePermissionPrompt2();
 
@@ -178,8 +179,13 @@ const MediaCallProvider = ({ children }: { children: React.ReactNode }) => {
 		setModal(<TransferModal onCancel={onCancel} onConfirm={onConfirm} />);
 	};
 
+	const playTone = useTonePlayer(audioOutput?.id);
+
 	const onTone = (tone: string) => {
 		session.sendTone(tone);
+		if (isValidTone(tone)) {
+			playTone(tone);
+		}
 	};
 
 	const onEndCall = () => {

packages/ui-voip/src/v2/components/Keypad/Keypad.stories.tsx

@@ -1,10 +1,15 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
 import Keypad from './Keypad';
+import { useTonePlayer } from '../../useTonePlayer';
 
 export default {
 	title: 'V2/Components/Keypad',
 	component: Keypad,
 } satisfies Meta<typeof Keypad>;
 
 export const KeypadStory: StoryFn<typeof Keypad> = () => <Keypad onKeyPress={(key) => console.log(key)} />;
+export const KeypadStoryWithTone: StoryFn<typeof Keypad> = () => {
+	const playTone = useTonePlayer();
+	return <Keypad onKeyPress={(key) => playTone(key as any)} />;
+};

packages/ui-voip/src/v2/useTonePlayer.ts

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+class TonePlayer {
+	private audioContext: AudioContext;
+
+	private audioElement: HTMLAudioElement;
+
+	private gainNode: GainNode;
+
+	private filter: BiquadFilterNode;
+
+	private destination: MediaStreamAudioDestinationNode;
+
+	constructor() {
+		this.audioContext = new AudioContext();
+		this.audioElement = new Audio();
+
+		// Route audio through an audio element
+		// In order to be able to set the sink id
+		this.destination = this.audioContext.createMediaStreamDestination();
+		this.audioElement.srcObject = this.destination.stream;
+
+		// Audio volume control
+		this.gainNode = this.audioContext.createGain();
+		this.gainNode.gain.value = 0.5;
+
+		// This filter makes the sound more natural
+		this.filter = this.audioContext.createBiquadFilter();
+		this.filter.type = 'lowpass';
+		this.filter.frequency.value = 8000;
+
+		this.gainNode.connect(this.filter);
+		this.filter.connect(this.destination);
+	}
+
+	public setSinkId(sinkId: string) {
+		if (this.audioElement.setSinkId) {
+			return this.audioElement.setSinkId(sinkId);
+		}
+		console.warn('setSinkId not supported on this browser');
+	}
+
+	public static setupOscillator(audioCtx: AudioContext, filter: AudioNode) {
+		const oscillator = audioCtx.createOscillator();
+		oscillator.type = 'sine';
+		oscillator.connect(filter);
+		return oscillator;
+	}
+
+	public play(highFreq: number, lowFreq: number, durationMs?: number) {
+		const highFrequencyOscillator = TonePlayer.setupOscillator(this.audioContext, this.gainNode);
+		const lowFrequencyOscillator = TonePlayer.setupOscillator(this.audioContext, this.gainNode);
+
+		lowFrequencyOscillator.frequency.value = lowFreq;
+		highFrequencyOscillator.frequency.value = highFreq;
+
+		lowFrequencyOscillator.start();
+		highFrequencyOscillator.start();
+
+		// Ensure audio element is playing
+		if (this.audioElement.paused) {
+			this.audioElement.play().catch((error) => {
+				console.warn('Failed to play audio element:', error);
+			});
+		}
+
+		setTimeout(() => {
+			lowFrequencyOscillator.stop();
+			highFrequencyOscillator.stop();
+			highFrequencyOscillator.disconnect();
+			lowFrequencyOscillator.disconnect();
+		}, durationMs ?? 400);
+	}
+
+	public destroy() {
+		this.audioContext.close();
+		this.audioElement.pause();
+		this.audioElement.srcObject = null;
+	}
+}
+
+const DIGIT_TONE_MAP = {
+	'1': [1209, 697],
+	'2': [1336, 697],
+	'3': [1477, 697],
+	'4': [1209, 770],
+	'5': [1336, 770],
+	'6': [1477, 770],
+	'7': [1209, 852],
+	'8': [1336, 852],
+	'9': [1477, 852],
+	'*': [1209, 941],
+	'0': [1336, 941],
+	'#': [1477, 941],
+} as const;
+
+export const isValidTone = (tone: string): tone is keyof typeof DIGIT_TONE_MAP => {
+	return Object.keys(DIGIT_TONE_MAP).includes(tone);
+};
+
+export const useTonePlayer = (sinkId?: string) => {
+	const tonePlayer = useRef<TonePlayer | null>(null);
+
+	useEffect(() => {
+		tonePlayer.current = new TonePlayer();
+		return () => tonePlayer.current?.destroy();
+	}, []);
+
+	useEffect(() => {
+		if (tonePlayer.current && sinkId) {
+			tonePlayer.current.setSinkId(sinkId);
+		}
+	}, [sinkId]);
+
+	const playTone = useCallback(
+		(digit: keyof typeof DIGIT_TONE_MAP) => {
+			if (!tonePlayer.current) {
+				return;
+			}
+			tonePlayer.current.play(DIGIT_TONE_MAP[digit][0], DIGIT_TONE_MAP[digit][1], 250);
+		},
+		[tonePlayer],
+	);
+
+	return playTone;
+};