Skip to content

Commit 5734acc

Browse files
committed
Add observer prop to the BG Blur and Replacement Provider
1 parent ee11e41 commit 5734acc

File tree

3 files changed

+39
-5
lines changed

3 files changed

+39
-5
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1212
### Added
1313

1414
- Refactor `toggleContentShare` function to allow specifying a `MediaStream` to share. This can be used to share non-screen share content.
15+
- Add the observer as a prop of Background Blur and Background Replacement Providers, so that builders can provide observers to the provider.
1516

1617
### Removed
1718

src/providers/BackgroundBlurProvider/index.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import {
55
BackgroundBlurOptions,
66
BackgroundBlurProcessor,
77
BackgroundBlurVideoFrameProcessor,
8+
BackgroundBlurVideoFrameProcessorObserver,
89
BackgroundFilterSpec,
910
ConsoleLogger,
1011
DefaultVideoTransformDevice,
1112
Device,
1213
LogLevel,
1314
NoOpVideoFrameProcessor,
14-
VideoFrameProcessor,
1515
} from 'amazon-chime-sdk-js';
1616
import React, {
1717
createContext,
@@ -33,6 +33,10 @@ interface Props extends BaseSdkProps {
3333
/** A set of options that can be supplied when creating a background blur video frame processor. For more information, refer to
3434
* [Amazon Chime SDK for JavaScript Background Filter Guide](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/15_Background_Filter_Video_Processor.md#adding-a-background-filter-to-your-application). */
3535
options?: BackgroundBlurOptions;
36+
/**
37+
* Observer callback functions. The observer will be added to the background blur processor on mount and removed on unmount.
38+
*/
39+
observer?: BackgroundBlurVideoFrameProcessorObserver;
3640
}
3741

3842
interface BackgroundBlurProviderState {
@@ -46,12 +50,12 @@ const BackgroundBlurProviderContext = createContext<
4650
BackgroundBlurProviderState | undefined
4751
>(undefined);
4852

49-
const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
53+
const BackgroundBlurProvider: FC<Props> = ({ spec, options, observer, children }) => {
5054
const logger = useLogger();
5155
const [isBackgroundBlurSupported, setIsBackgroundBlurSupported] = useState<
5256
boolean | undefined
5357
>(undefined);
54-
const [processor, setProcessor] = useState<VideoFrameProcessor | undefined>();
58+
const [processor, setProcessor] = useState<BackgroundBlurProcessor | undefined>();
5559

5660
const blurSpec = useMemoCompare(
5761
spec,
@@ -97,6 +101,18 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
97101
};
98102
}, [blurOptions, blurSpec]);
99103

104+
useEffect(() => {
105+
if (!!processor && !!observer) {
106+
processor.addObserver(observer);
107+
}
108+
109+
return () => {
110+
if (!!processor && !!observer) {
111+
processor.removeObserver(observer);
112+
}
113+
};
114+
}, [observer, processor]);
115+
100116
async function initializeBackgroundBlur(): Promise<
101117
BackgroundBlurProcessor | undefined
102118
> {

src/providers/BackgroundReplacementProvider/index.tsx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import {
66
BackgroundReplacementOptions,
77
BackgroundReplacementProcessor,
88
BackgroundReplacementVideoFrameProcessor,
9+
BackgroundReplacementVideoFrameProcessorObserver,
910
ConsoleLogger,
1011
DefaultVideoTransformDevice,
1112
Device,
1213
LogLevel,
1314
NoOpVideoFrameProcessor,
14-
VideoFrameProcessor,
1515
} from 'amazon-chime-sdk-js';
1616
import React, {
1717
createContext,
@@ -33,6 +33,10 @@ interface Props extends BaseSdkProps {
3333
/* A set of options that can be supplied when creating a background replacement video frame processor such as the background replacement image blob. For more information, refer to
3434
* [Amazon Chime SDK for JavaScript Background Filter Guide](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/15_Background_Filter_Video_Processor.md#adding-a-background-filter-to-your-application). */
3535
options?: BackgroundReplacementOptions;
36+
/**
37+
* Observer callback functions. The observer will be added to the background replacement processor on mount and removed on unmount.
38+
*/
39+
observer?: BackgroundReplacementVideoFrameProcessorObserver;
3640
}
3741

3842
interface BackgroundReplacementProviderState {
@@ -49,14 +53,15 @@ const BackgroundReplacementProviderContext = createContext<
4953
const BackgroundReplacementProvider: FC<Props> = ({
5054
spec,
5155
options,
56+
observer,
5257
children,
5358
}) => {
5459
const logger = useLogger();
5560
const [
5661
isBackgroundReplacementSupported,
5762
setIsBackgroundReplacementSupported,
5863
] = useState<boolean | undefined>(undefined);
59-
const [processor, setProcessor] = useState<VideoFrameProcessor | undefined>(
64+
const [processor, setProcessor] = useState<BackgroundReplacementProcessor | undefined>(
6065
undefined
6166
);
6267

@@ -104,6 +109,18 @@ const BackgroundReplacementProvider: FC<Props> = ({
104109
};
105110
}, [replacementSpec, replacementOptions]);
106111

112+
useEffect(() => {
113+
if (!!processor && !!observer) {
114+
processor.addObserver(observer);
115+
}
116+
117+
return () => {
118+
if (!!processor && !!observer) {
119+
processor.removeObserver(observer);
120+
}
121+
};
122+
}, [observer, processor]);
123+
107124
async function initializeBackgroundReplacement(): Promise<
108125
BackgroundReplacementProcessor | undefined
109126
> {

0 commit comments

Comments
 (0)