diff --git a/packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts b/packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts index 9359b0b88e..16e74d3437 100644 --- a/packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts +++ b/packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts @@ -5,6 +5,7 @@ import { ErrorFactory } from '../error/ErrorFactory'; import { HMSAction } from '../error/HMSAction'; import { EventBus } from '../events/EventBus'; import { HMSDeviceChangeEvent, HMSTrackUpdate, HMSUpdateListener } from '../interfaces'; +import { HMSAudioContextHandler } from '../internal'; import { HMSRemoteAudioTrack } from '../media/tracks'; import { HMSRemotePeer } from '../sdk/models/peer'; import { Store } from '../sdk/store'; @@ -72,8 +73,9 @@ export class AudioSinkManager { */ async unblockAutoplay() { if (this.autoPausedTracks.size > 0) { - this.unpauseAudioTracks(); + await this.unpauseAudioTracks(); } + await HMSAudioContextHandler.resumeContext(); } init(elementId?: string) { @@ -184,12 +186,12 @@ export class AudioSinkManager { await this.playAudioFor(track); }; - private handleAudioDeviceChange = (event: HMSDeviceChangeEvent) => { + private handleAudioDeviceChange = async (event: HMSDeviceChangeEvent) => { // if there is no selection that means this is an init request. No need to do anything if (event.isUserSelection || event.error || !event.selection || event.type === 'video') { return; } - this.unpauseAudioTracks(); + await this.unpauseAudioTracks(); }; /** diff --git a/packages/hms-video-store/src/plugins/audio/HMSAudioPluginsManager.ts b/packages/hms-video-store/src/plugins/audio/HMSAudioPluginsManager.ts index fa84d76ed4..6accd28ac6 100644 --- a/packages/hms-video-store/src/plugins/audio/HMSAudioPluginsManager.ts +++ b/packages/hms-video-store/src/plugins/audio/HMSAudioPluginsManager.ts @@ -4,19 +4,13 @@ import AnalyticsEventFactory from '../../analytics/AnalyticsEventFactory'; import { ErrorFactory } from '../../error/ErrorFactory'; import { HMSAction } from '../../error/HMSAction'; import { EventBus } from '../../events/EventBus'; +import { HMSAudioContextHandler } from '../../internal'; import { HMSAudioTrackSettingsBuilder } from '../../media/settings'; import { standardMediaConstraints } from '../../media/settings/constants'; import { HMSLocalAudioTrack } from '../../media/tracks'; import Room from '../../sdk/models/HMSRoom'; import HMSLogger from '../../utils/logger'; -const DEFAULT_SAMPLE_RATE = 48000; - -//Handling sample rate error in case of firefox -const checkBrowserSupport = () => { - return navigator.userAgent.indexOf('Firefox') !== -1; -}; - /** * This class manages applying different plugins on a local audio track. Plugins which need to modify the audio * are called in the order they were added. Plugins which do not need to modify the audio are called @@ -50,7 +44,7 @@ export class HMSAudioPluginsManager { this.hmsTrack = track; this.pluginsMap = new Map(); this.analytics = new AudioPluginsAnalytics(eventBus); - this.createAudioContext(); + this.audioContext = HMSAudioContextHandler.getAudioContext(); this.room = room; } @@ -234,7 +228,6 @@ export class HMSAudioPluginsManager { //Keeping it separate since we are initializing context only once async closeContext() { - this.audioContext?.close(); this.audioContext = undefined; } @@ -248,15 +241,14 @@ export class HMSAudioPluginsManager { for (const plugin of plugins) { await this.addPlugin(plugin); } - this.updateProcessedTrack(); + await this.updateProcessedTrack(); } private async initAudioNodes() { if (this.audioContext) { - if (!this.sourceNode) { - const audioStream = new MediaStream([this.hmsTrack.nativeTrack]); - this.sourceNode = this.audioContext.createMediaStreamSource(audioStream); - } + // recreate this again, irrespective of it being already there so that the latest native track is used in source node + const audioStream = new MediaStream([this.hmsTrack.nativeTrack]); + this.sourceNode = this.audioContext.createMediaStreamSource(audioStream); if (!this.destinationNode) { this.destinationNode = this.audioContext.createMediaStreamDestination(); this.outputTrack = this.destinationNode.stream.getAudioTracks()[0]; @@ -316,19 +308,4 @@ export class HMSAudioPluginsManager { plugin.stop(); this.analytics.removed(name); } - - private createAudioContext() { - if (!this.audioContext) { - if (checkBrowserSupport()) { - /** - Not setting default sample rate for firefox since connecting - audio nodes from context with different sample rate is not - supported in firefox - */ - this.audioContext = new AudioContext(); - } else { - this.audioContext = new AudioContext({ sampleRate: DEFAULT_SAMPLE_RATE }); - } - } - } } diff --git a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts index 9b880b70f7..2d82826750 100644 --- a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts +++ b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts @@ -1534,24 +1534,29 @@ export class HMSSDKActions { try { const stream = await navigator.mediaDevices.getUserMedia(constraints); @@ -52,9 +56,10 @@ export const HMSAudioContextHandler: HMSAudioContext = { audioContext: null, getAudioContext() { if (!this.audioContext) { - this.audioContext = new AudioContext(); + this.audioContext = isFirefox ? new AudioContext() : new AudioContext({ sampleRate: DEFAULT_SAMPLE_RATE }); } - return this.audioContext; + + return this.audioContext!; }, async resumeContext() { try { diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx index ecd2a93f98..a8ba68b958 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx @@ -9,9 +9,9 @@ export function AutoplayBlockedModal() { return ( { + onOpenChange={async value => { if (!value) { - unblockAudio(); + await unblockAudio(); } resetError(); }} @@ -25,8 +25,8 @@ export function AutoplayBlockedModal() {