Events

In most cases, you can simply use the reactive state store to be notified about state changes. However, for some advanced use cases, you might need to subscribe to the underlying WebSocket events.

List of events

Client events

Client events are always delivered if a user is connected to the client using the connectUser method.

The list of client events:

NameDescription
connection.okFired when the authentication process finished successfully
connection.errorFired when the WS connections fails

Call events

These events are related to a specific call. Some of these events are only delivered to clients that are watching the specific call. There are 3 ways to watch a call:

  1. Call the queryCalls method with the watch option set to true:
import { StreamVideoClient } from '@stream-io/video-react-native-sdk';

let client: StreamVideoClient;

client.queryCalls({
    ...
    watch: true
});
  1. Join a call:
import { StreamVideoClient } from '@stream-io/video-react-native-sdk';

let client: StreamVideoClient;

client.call('default', 'test-call').join();
  1. Watch a call:
import { StreamVideoClient } from '@stream-io/video-react-native-sdk';

let client: StreamVideoClient;

client.call('default', 'test-call').getOrCreate();
// or
client.call('default', 'test-call').get();

The list of call events:

NameDescriptionDelivered to
call.acceptedA user accepts a notification to join a callAll call members
call.blocked_userA user is blocked from the callCall watchers
call.createdThe call was createdAll call members
call.endedThe call was endedAll call members
call.hls_broadcasting_failedThe call failed to broadcastCall watchers
call.hls_broadcasting_startedThe call started to broadcastCall watchers
call.hls_broadcasting_stoppedThe call stopped broadcastingCall watchers
call.live_startedThe call left backstage modeCall watchers
call.member_addedOne or more members were added to the callAll call members
call.member_removedOne or more members were removed from the callAll call members
call.member_updatedOne or more members were updatedAll call members
call.member_updated_permissionOne or more members’ role was updatedAll call members
call.notificationA user is calling all call membersAll call members
call.permission_requestA user is requesting permissionsCall watchers
call.permissions_updatedA member’s permissions were updatedCall watchers
call.reaction_newA new reaction was sentCall watchers
call.recording_failedA recording failedCall watchers
call.recording_readyA recording is readyCall watchers
call.recording_startedA recording has been startedCall watchers
call.recording_stoppedThe recording was stoppedCall watchers
call.rejectedA user declined to join the callAll call members
call.ringA user is calling all call membersAll call members
call.session_endedA call session ended (all participants have left the call)Call watchers
call.session_participant_joinedA participant joined to the call sessionsCall watchers
call.session_participant_leftA participant left a call sessionCall watchers
call.session_startedA call session started (the first participant joined the call)Call watchers
call.unblocked_userA user is unblockedCall watchers
call.updatedThe call was updatedCall watchers
customCustom eventAll call members

Listening to client and call events

You can use the on method of the StreamVideoClient instance to subscribe to client and call WebSocket events.

The on method takes the type of the event you want to subscribe to or the ‘all’ keyword indicating that you want to be notified about all events.

The event handler will receive an object with type StreamVideoEvent that has a type attribute that tells the type of the event. The available event types are described by the EventTypes type.

The on method returns a method that can be called to unsubscribe from WebSocket events.

Subscribing to all events:

import { StreamVideoClient } from '@stream-io/video-react-native-sdk';

let client: StreamVideoClient;

// Subscribe to all events
const unsubscribe = client.on('all', (event: StreamVideoEvent) => {
  console.log(event);
});

// Unsubscribe
unsubscribe();

Subscribing to call.created events:

import { StreamVideoClient } from '@stream-io/video-react-native-sdk';

let client: StreamVideoClient;

// Subscribe to all events
const unsubscribe = client.on('call.created', (event: StreamVideoEvent) => {
  if (event.type === 'call.created') {
    console.log(`Call created: ${event.call_cid}`);
  }
});

// Unsubscribe
unsubscribe();

Listening to call events

You can use the on method of the Call instance to subscribe to WebSocket events belonging to a specific call.

The on method takes the type of the event you want to subscribe to.

The event handler will receive an object with type StreamCallEvent that has a type attribute that tells the type of the event. The available event types are described by the CallEventTypes type.

The on method returns a method that can be called to unsubscribe from WebSocket events.

Subscribing to call.reaction_new event.

import { Call } from '@stream-io/video-react-native-sdk';

let call: Call;

// Subscribe to new reactions event
const unsubscribe = call.on('call.reaction_new', (event: StreamVideoEvent) => {
  if (event.type === 'call.reaction_new') {
    console.log(`New reaction: ${event.reaction}`);
  }
});

// Unsubscribe
unsubscribe();

Custom events

You can send custom events between the call participants using the sendCustomEvent method of the call instance. Note that the payload for these events is limited to 5KB in size.

import {
  Call,
  CustomVideoEvent,
  StreamVideoEvent,
} from '@stream-io/video-react-native-sdk';

let call: Call;

// sending a custom event
await call.sendCustomEvent({
  type: 'my-event-type',
  payload: {
    foo: 'bar',
  },
});

// listening to or receiving a custom event
call.on('custom', (event: StreamVideoEvent) => {
  const customEvent = event as CustomVideoEvent;
  const payload = customEvent.custom;
  if (payload.type === 'my-event-type') {
    console.log(payload.foo);
  }
});
© Getstream.io, Inc. All Rights Reserved.