diff --git a/docs/javascript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation.mdx b/docs/javascript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation.mdx new file mode 100644 index 0000000000..d3a73c82af --- /dev/null +++ b/docs/javascript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation.mdx @@ -0,0 +1,118 @@ +--- +title: Krisp Noise Cancellation Plugin +nav: 1.51 +--- + +## Introduction + +Background noise always rears its ugly head while live streaming outside, on site, or in any untreated setting. Sounds can ruin anyone's listening or watching experience, whether it's from passing cars, construction noise, or mechanical whirs. +Krisp Noise cancellation plugin helps in eliminating one’s background sound. This can help eliminate wide variety of background sounds. +This guide provides an overview of usage of the noise suppression plugin of 100ms and below is the demo of it. + + +## Pre-requisites + +**Get the 100ms noise cancellation Package** + +```bash section=GetHMSNoiseCancellationPackage sectionIndex=1 +npm install --save @100mslive/hms-noise-cancellation@latest +``` + +The plugin has the following methods: + +```ts +getName(): string; // HMSKrispPlugin + +// Whether the plugin is supported by the browser. Safari/Mobile browsers are not supported currently +isSupported(): boolean; + +// Toggles the noise cancellation +toggle(): void; + +// whether the noise cancellation is currently enabled +isEnabled(): boolean | undefined; + +stop(): void; + +``` + +Checking if noise cancellation is enabled for the room. Please reach out to us to get this enabled for you. + + +{' '} + + + +```js +import { selectRoom } from '@100mslive/hms-video-store'; +import { HMSKrispPlugin } from '@100mslive/hms-noise-cancellation'; + +// Call this after preview/join is successful +const isNoiseCancellationEnabled = hmsStore.getState(selectRoom)?.isNoiseCancellationEnabled; +const plugin = new HMSKrispPlugin(); +// check if audio track is available +const localAudioTrack = hmsStore.getState(selectLocalAudioTrackID); +let inProgress = false; +hmsStore.subscribe((isPluginAdded) => { + if(!isPluginAdded && !inProgress) { + inProgress = true; + await hmsActions.addPluginToAudioTrack(plugin); + } +}, selectIsLocalAudioPluginPresent(plugin.getName())); + +// Once the plugin is added, to disable/enable again, you can use the `plugin.toggle` method; +// Current state of plugin can be obtained from `plugin.isEnabled()`; +``` + + + + + +```jsx +import { useEffect, useState } from 'react'; +import { HMSKrispPlugin } from '@100mslive/hms-noise-cancellation'; +import { + selectLocalAudioTrackID, + selectIsLocalAudioPluginPresent, + selectRoom, + useHMSActions, + useHMSStore, +} from '@100mslive/react-sdk'; + +const plugin = new HMSKrispPlugin(); + +export const NoiseCancellation = () => { + const localPeerAudioTrackID = useHMSStore(selectLocalAudioTrackID); + const isPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(plugin.getName())); + const [active, setActive] = useState(isPluginAdded); + + const [inProgress, setInProgress] = useState(false); + const actions = useHMSActions(); + const room = useHMSStore(selectRoom); + + useEffect(() => { + // This is to toggle. Here the plugin is removed if active is false but `plugin.toggle` can also be used. + (async () => { + setInProgress(true); + if (active && !isPluginAdded) { + await actions.addPluginToAudioTrack(plugin); + } + if (!active && isPluginAdded) { + await actions.removePluginFromAudioTrack(plugin); + } + setInProgress(false); + })(); + }, [actions, active, isPluginAdded]); + + if (!plugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) { + return null; + } + return +} +``` + + diff --git a/docs/javascript/v2/release-notes/release-notes.mdx b/docs/javascript/v2/release-notes/release-notes.mdx index deabc42598..b961be57d7 100644 --- a/docs/javascript/v2/release-notes/release-notes.mdx +++ b/docs/javascript/v2/release-notes/release-notes.mdx @@ -14,6 +14,32 @@ description: Release Notes for 100ms JavaScript SDK | @100mslive/hls-player | [![npm version](https://badge.fury.io/js/%40100mslive%2Fhls-player.svg)](https://badge.fury.io/js/%40100mslive%2Fhls-player) | | @100mslive/hms-video-react(deprecated) | [![npm version](https://badge.fury.io/js/%40100mslive%2Fhms-video-react.svg)](https://badge.fury.io/js/%40100mslive%2Fhms-video-react) | +## 2024-03-22 + +Released: `@100mslive/hms-video-store@0.12.3`, `@100mslive/react-sdk@0.10.3`, `@100mslive/hls-player@0.3.3`, `@100mslive/roomkit-react@0.3.3` + +### Fixed: + +- Analytics improvements +- Subscriber stats calculations +- Roomkit Prebuilt: Save draft answers for quizzes +- Roomkit Prebuilt: Enhanced whiteboard layout +- Roomkit Prebuilt: Fullscreen UI enhancements for HLS Player + +## 2024-03-15 + +Released: `@100mslive/hms-video-store@0.12.2`, `@100mslive/react-sdk@0.10.2`, `@100mslive/hls-player@0.3.2`, `@100mslive/roomkit-react@0.3.2` + +### Added: + +- Roomkit Prebuilt: Sidebar layout for screenshare +- Roomkit Prebuilt: Peers can seek in stream using arrow keys +- Roomkit Prebuilt: Option to lower hands and bring to stage in peer list for peers with raised hands + +### Fixed: +- Roomkit Prebuilt: Toggle play/pause on click +- Frozen stats in Stats For Nerds + ## 2024-03-07 Released: `@100mslive/hms-video-store@0.12.1`, `@100mslive/react-sdk@0.10.1`, `@100mslive/hls-player@0.3.1`, `@100mslive/roomkit-react@0.3.1`