DOCSEARCHbyAlgolia
Submit Docs

Amazon Chime SDK React Component Library

repository·main·Indexed 43 days ago

https://github.com/aws/amazon-chime-sdk-component-library-react

A library of reusable UI components and state management tools for building audio, video, and screen-sharing features in React applications. Version 3.13.0 provides video tile grids, microphone activity indicators, and call controls, utilizing React Providers and Hooks to synchronize with the amazon-chime-sdk-js library.

Tokens
127.1K
Snippets
517
Records
630
Agent score
51%

What's inside Amazon Chime SDK React Component Library

  1. What is the Amazon Chime SDK React Component Library?

    main

    The library provides client-side state management and reusable UI components for building audio and video conferencing web applications.

    Key features include:

    • UI Components: Video tile grids, microphone activity indicators, and call controls with a modern design.
    • Customization: Components can be used as-is or restyled using a custom theme.
    • State Management: It uses React Providers and Hooks to connect to the amazon-chime-sdk-js library, simplifying state synchronization between the Chime SDK and the UI layer.

  2. What is MeetingEventProvider and how does it work?

    main

    The MeetingEventProvider is a context provider responsible for broadcasting the latest meeting event posted by the Amazon Chime SDK for JavaScript.

    Important Behavior: It only provides the latest meeting event. When a new event is received, any previous event is overridden.

    To consume the event data within your component tree, use the useMeetingEvent hook.

  3. What is the Portal component and how to use it

    main

    The Portal component allows you to render its children into a DOM node that exists outside the current component's DOM hierarchy. This is useful for rendering elements like modals, tooltips, or dropdowns that need to break out of parent containers with overflow: hidden or specific stacking contexts.

    To use it, provide the rootId prop, which must match the id of the target DOM element where the children should be mounted.

    <Flex justifyContent="space-between">
  <Portal rootId="root-div-1">
    <div>Portal content</div>
  </Portal>
  <div id="root-div-1">Root Div 1</div>
  <div id="root-div-2">Root Div 2</div>
</Flex>

  4. Guidelines for creating Mini Test Apps

    main

    When adding tests to the React Testing Demo, follow these organizational guidelines:

    • Create a new Mini Test App if you are testing a new group of related features (e.g., if you are adding video features, create a 'Video Test App').
    • Extend an existing Mini Test App if you are adding tests for features that already have a dedicated app (e.g., if you are adding a new hook related to the roster, improve the existing 'Roster Test App').

  5. Use AudioInputProvider to manage audio input devices

    main

    The AudioInputProvider manages the list of available audio input devices and tracks the currently selected device.

    Key Behaviors:

    • Default Device Handling (Chrome): In Chrome, the "default" device is used. When a new device is added during a meeting, it becomes the new "default". Because the deviceId remains the string "default", the selectedDevice state might not appear to change even though the physical device has changed. To detect when the default device changes, you should watch for changes to the first element in the devices array (devices[0]).
    • Auto-selection: If you are using DeviceLabels.None or overriding the default device label trigger, AudioInputProvider will not automatically select a device when the list changes. To ensure auto-selection works, provide DeviceLabels.Audio or DeviceLabels.AudioVideo to the meetingManager.join or meetingManager.invokeDeviceProvider APIs.

    Accessing State: You can access the provider's state using the useAudioInputs hook.

    import { AudioInputProvider } from 'amazon-chime-sdk-component-library-react';

  6. Use SDK Hooks to build custom meeting UIs

    main

    The Amazon Chime SDK React Component Library provides a set of React hooks designed to help you build custom meeting user interfaces. These hooks expose functionality and state related to your active Amazon Chime meeting.

    Prerequisites: Before using these hooks, you must have:

    1. Set up your application with a MeetingProvider.
    2. Successfully joined a meeting using the provider's capabilities.

  7. Use ContentShareProvider to manage content sharing state

    main

    The ContentShareProvider provides state and functionality for content sharing within a meeting. It manages information about active content shares, such as which users are sharing, whether the local user is sharing, and the status of content share tiles.

    If you are using MeetingProvider, the ContentShareProvider is included by default and does not need to be explicitly added. If you are not using MeetingProvider, you must wrap your component tree with ContentShareProvider and ensure its dependency, AudioVideoProvider, is rendered higher in the tree.

    import React from 'react';
import {
  MeetingProvider,
  useContentShareState,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const { isLocalUserSharing } = useContentShareState();

  return isLocalUserSharing ? <div>Sharing</div> : <div>Not sharing</div>;
};

  10. AudioInputControl dependencies

    main

    The AudioInputControl component requires the following context and hooks to function correctly:

    • MeetingProvider: Must wrap the component tree to provide the necessary Chime SDK meeting context.
    • useToggleLocalMute: Used to handle the mute/unmute state toggle.
    • useAudioInputs: Used to fetch and provide the list of available audio input devices for the pop-over menu.

  11. Use the AudioOutputProvider to manage audio output devices

    main

    The AudioOutputProvider manages the list of available audio output devices and tracks the currently selected device via its deviceId.

    Note on Browser Support: Firefox and Safari currently do not list 'audiooutput' media devices. This is a known browser limitation documented in the amazon-chime-sdk-js FAQ.

    If you are already using MeetingProvider, the AudioOutputProvider is rendered by default and you do not need to wrap your application with it manually.

    import { AudioOutputProvider } from 'amazon-chime-sdk-component-library-react';

  12. Use the VideoGrid component

    main

    The VideoGrid component provides a responsive layout for video tiles, adapting to screen size and orientation. It can render up to 25 VideoTile components.

    By default, it uses a standard grid layout. You can also use the layout="featured" prop to enable a featured layout, where one tile occupies a larger portion of the space and others are rendered as smaller thumbnails.

    <div style={{ padding: '1rem', height: '70vh', boxSizing: 'border-box' }}>
  <VideoGrid>
    <VideoTile
      style={{ border: '1px solid grey', gridArea: '' }}
      nameplate="Tile 1"
    />
    <VideoTile
      style={{ border: '1px solid grey', gridArea: '' }}
      nameplate="Tile 2"
    />
  </VideoGrid>
</div>