Skip to main content

App architecture

Instead of starting from scratch, we will start with a bare bones React application that has only basic components present and, during these tutorials, we will fill the gaps in.

The starter_code is available in GitHub and you can download it from here.

The first thing that you will see is that the app preserves the default React folder structure. We have a public folder that contains all the static files, such as images and the index.html, and we have a src that will be where our code lives. All our relevant files will be in this folder.

In the following diagram we display a simplified version of the different files and folders that we have defined:

📁 src
↳ 📄 App.tsx
↳ 📁 components
  ↳ 📁 Conference
    ↳ 📁 Participants
    ↳ 📁 SettingsModal
    ↳ 📁 Toolbar
  ↳ 📁 Error
  ↳ 📁 Loading
  ↳ 📁 Pin
  ↳ 📁 Preflight

The main component that will be always displayed in our app is the one created by App.tsx. This component will display a child component that will depend on the state of the application.

  • Preflight: This is the first component that the user will see. It will display a form that can be filled with the information needed to connect to a conference.

Preflight

  • Loading: This component is displayed after pushing "Join" in the Preflight component. When this component is displayed means that we are connecting to the conference.

  • Error: We use this component if there is an error in our application. For example, if we can't connect to the conference or we entered the wrong PIN.

  • Pin: This is a component that will display a form to allow users to enter the conference PIN. It's only displayed when we try to connect to a conference that is protected by a PIN.

  • Conference: This component will be displayed when the conference is active. The component will use a type of object known as MediaStream, which is used in WebRTC and can contain various types of tracks, such as audio, video or both. As you can see in the previous diagram, we have some additional sub-components that are needed to build this functionality:

    • Participants: This component will display a panel with the participant list that represent all the users that are connected to the conference.

    • SettingsModal: This component will display a modal dialog to change the microphone, camera and speaker. We will later use the same dialog to apply blur or background replacement effect to the local video.

    • Toolbar: This element contains a set of buttons that are used to control the conference. For example, we can use these buttons to mute the microphone or share the screen.

info

From all these files you only will modify the following files during the tutorials:

  • App.tsx
  • Conference/Conference.css
  • Conference/Conference.tsx
  • Conference/Toolbar/Toolbar.tsx
  • Conference/SettingsModal/SettingsModal.tsx

We will also create some additional files during these tutorials:

  • types/Effect.ts
  • types/LocalStorageKey.ts
  • types/Settings.ts
  • utils/video-processor.ts

Pexip's npm packages​

The example app uses four @pexip packages; @pexip/infinity @pexip/components, @pexip/media-components and @pexip/media-processor.

Infinity​

@pexip/infinity - This package provides an API that allows the client to connect to Pexip's MCU.

Components​

@pexip/components - This package provides React Components, giving you a UI that's built on the Pexip Design System. In the example application we make use of the Box, Input and Button components, among others.

Media components​

@pexip/media-components - This package provides React Components that were specially developed for media applications. We will use them during this tutorial to change the devices (camera, microphone and speaker).

Media processor​

@pexip/media-processor - This package can be used for media processing using Web API. Some of the things that we can use it for:

  • Analyze the MediaStream: We can obtain important information from the MediaStream, such as the volume.
  • Gain control: Modify the gain to mute/unmute a MediaStream.
  • Noise suppression: We can use this package to reduce unwanted background noise from the audio signal, enhancing the clarity of the speech.
  • Background blur: This package can be used to detach the foreground and background of a video and blur the latter.
  • Background replacement: In a similar way to background blur, we can detach the background and replace it with an image.

CSS assets​

We import CSS assets in index.tsx so that styling is applied to the components:

import '@pexip/components/src/fonts.css';
import '@pexip/components/dist/style.css';

ThemeProvider​

Some components use the Theme Context, we can have a light & dark theme. We wrap the App component in ThemeProvider:

import {ThemeProvider} from '@pexip/components';

<ThemeProvider colorScheme="light">
  <App />
</ThemeProvider>;

Using a component​

There's plenty of components that you can use in your own apps, Box is one we make use of in the example app:

import {Box} from '@pexip/components';

<Box padding="small">Hello, World!</Box>;

Running the application​

For running the app you will need to run the following commands:

  • Download all the dependencies:

    $ npm install

  • Run development server:

    $ npm start

Now you can open your browser and access the application from https://localhost:4000.

Generate a production package​

Once you are done with your code, you will want to have a package that you can upload to your server. You can generate the dist folder with the following command:

$ npm run build

With these built files you will be able to upload the package to your web server and let others enjoy your app.

One important detail is that we need to serve the application through HTTPS with valid certificates. If we won't do this, the browser will block the access to the microphone and camera.