From 16785fd79702479f762743f7b5fe7d5974d9c88b Mon Sep 17 00:00:00 2001 From: ygit Date: Tue, 17 Dec 2024 10:01:37 +0530 Subject: [PATCH 1/2] updated ReadMe (#3424) --- README.md | 4 ++-- packages/react-icons/README.md | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 05ee429921..3318f1405f 100644 --- a/README.md +++ b/README.md @@ -31,14 +31,14 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live **There are two ways you can add 100ms to your apps:** -1. ## Custom UI +## 1. Custom UI - 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI. - **Related packages include:** `@100mslive/react-sdk`, `@100mslive/hms-video-store` and `@100mslive/react-icons`. - Get started with integrating the SDK using the [How to Guide](https://www.100ms.live/docs/javascript/v2/how-to-guides/install-the-sdk/integration). > Navigate to `react-sdk` for the base React Hooks and some commonly used functionalities by clicking [here](./packages/react-sdk). -2. ## 100ms Prebuilt +## 2. 100ms Prebuilt - 100ms Prebuilt is a high-level abstraction with no-code customization that enables you to embed video conferencing and/or live streaming UI—with a few lines of code. - **Related packages include:** `roomkit-react` and `roomkit-web`. - Get started with 100ms Prebuilt using the [Prebuilt Quickstart for Web](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart). diff --git a/packages/react-icons/README.md b/packages/react-icons/README.md index b9477db9d3..29e2731f66 100644 --- a/packages/react-icons/README.md +++ b/packages/react-icons/README.md @@ -5,22 +5,23 @@ [![License](https://img.shields.io/npm/l/@100mslive/react-icons)](https://www.100ms.live/) ![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/react-icons) - Using the package in your application -``` +```bash // npm npm install @100mslive/react-icons@latest --save // yarn yarn add @100mslive/react-icons@latest ``` -### How to add icons + +## How to add icons 1. add (only) 24x24 px svg file in `/assets` 2. Run ```bash - yarn build +yarn build ``` + The jsx files for the corresponding files will be autogenerated. \ No newline at end of file From acd0a1fd6e24b2694c4fc34be186bf8c1f75ac39 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Thu, 26 Dec 2024 11:52:35 +0530 Subject: [PATCH 2/2] fix: reuse audio context, no audio when using krisp in some cases --- .../audio-sink-manager/AudioSinkManager.ts | 8 +++-- .../plugins/audio/HMSAudioPluginsManager.ts | 35 ++++--------------- .../src/reactive-store/HMSSDKActions.ts | 35 +++++++++++-------- packages/hms-video-store/src/sdk/index.ts | 4 +++ packages/hms-video-store/src/utils/media.ts | 9 +++-- .../Notifications/AutoplayBlockedModal.tsx | 8 ++--- yarn.lock | 31 ++-------------- 7 files changed, 49 insertions(+), 81 deletions(-) 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() {