Flex Audio SDK for Web: More options

After you add the Flex Audio SDK for web to your app using the Quickstart, you can use the options on this page to further customize your integration.

Use channel join states with your UI

This diagram shows the possible changes in join state for a channel:

stateDiagram-v2 notJoined: Not joined [*] --> notJoined notJoined --> Joining: join() called Joining --> Terminated: Remote or local\ntermination Joining --> Joined: join() completed Joined --> Rejoining: Network issues\nstart Rejoining --> Joined: Network issues\nstop Rejoining --> Terminated: Remote or local\ntermination Joined --> Terminated: Remote or local\ntermination

To build your UI, decide which actions to take in each join state:

`notJoined`	This is the initial state for new channels. To connect to the channel, your app can automatically call `join()`. Or, you can use your UI to call `join()` when the user decides to connect.
`joined` and `rejoining`	In the `joined` state, the channel is connected and receiving audio. In the `rejoining` state, the channel is reconnecting. Your app can automatically call `createLocalStream()` and `start()` to publish audio. Or, you can call these methods when the user decides to publish audio.
`terminated`	You can no longer use the channel. You can show the user that the channel is disconnected. You can also let the user create a new channel.

To terminate a channel, call the leave() method at any time, except when the join state is already terminated.

Get notifications for added and removed streams

All remote streams for a channel are listed in its remoteStreams property. Your app can receive events when streams are added to or removed and fir these notifications, the added or removed stream is passed along as the event data.

import { Channel, ChannelNotification } from '@aircore/aircore-media';

const addRemoteStreamEventListeners = (channel: Channel) => {
   channel.on(ChannelNotification.RemoteStreamWasAdded, (remoteStream) => {
      // Put your custom handler here
   });

   channel.on(ChannelNotification.RemoteStreamWasRemoved, (remoteStream) => {
      // Put your custom handler here
   });
};

Get notifications for stream connection status

You can receive notifications when the connection status for a remote stream changes:

import { RemoteStream, RemoteStreamNotification, RemoteStreamNotificationKey } from '@aircore/aircore-media';

const addConnectionStateListeners = (remoteStream: RemoteStream) => {
   remoteStream.on(RemoteStreamNotification.connectionStateDidChange, (data) => {
      // Get the new `connectionState` from the notification
      const newState = data[RemoteStreamNotificationKey.NewConnectionState];
      let terminationCause;
      switch(newState) {
         case RemoteStream.ConnectionState.connecting:
         case RemoteStream.ConnectionState.connected:
         case RemoteStream.ConnectionState.connecting:
         case RemoteStream.ConnectionState.terminated:
            // Optionally check the termination cause here
            terminationCause = remoteStream.terminationCause;
      }
   });
};