In-Session Communication

The EnableX React Native SDK provides several channels for participants to communicate beyond audio and video. This page covers text messaging (broadcast and targeted), custom signalling data, file sharing, screen sharing, canvas streaming, and whiteboard annotation.

The SDK provides two messaging methods. sendMessage() is the recommended approach for all new integrations. sendData() is a legacy method that routes messages through the WebRTC data channel of a local stream — it is deprecated and included here only for backward compatibility.

Recommended: Enx.sendMessage()

Use sendMessage() for all in-session text or JSON messaging. It works independently of any published stream and supports both room-wide broadcast and targeted delivery to specific participants.

// Broadcast to everyone in the room
Enx.sendMessage('Hello everyone!', true, []);

// Send to specific participants only
Enx.sendMessage('Private note', false, ['clientId_001', 'clientId_002']);

On the receiving side, listen for the messageReceived event in your eventHandlers object. The callback delivers the sender's client ID and the message content.

const eventHandlers = {
  messageReceived: (data) => {
    console.log('Message from:', data.from);
    console.log('Message:', data.message);
  }
};

Legacy: Enx.sendData() (Deprecated)

sendData() sends data through the WebRTC data channel tied to the local stream. Because it depends on that stream's data channel being active, it is fragile compared to sendMessage() — if the local stream is not published or its data channel is not open, delivery fails silently. It remains functional for older integrations but should not be used in new code.

// Legacy usage — avoid in new code
Enx.sendData(localStreamId, { type: 'chat', message: 'Hello' });

Callbacks for both messaging methods:

Enx.sendUserData() is for sending arbitrary application-level data during a session — not chat messages, but app-to-app communication. Use it to sync UI state, send custom control commands, run polls, or share collaborative data between participants.

Unlike sendMessage(), which is designed for user-visible messages, sendUserData() has no implied message structure — your app defines the payload shape entirely.

// Broadcast a state update to all participants
Enx.sendUserData(
  { action: 'poll_started', pollId: 'poll_001' },
  true,
  []
);

// Send a targeted signal to a specific participant
Enx.sendUserData(
  { action: 'spotlight_on', targetId: 'user_123' },
  false,
  ['moderator_client_id']
);

The recipient's app receives the payload via the userDataReceived callback:

const eventHandlers = {
  userDataReceived: (data) => {
    console.log('Custom signal from:', data.from);
    console.log('Payload:', data.message);
  }
};

Participants can upload files to the EnableX platform during a session. Once a file is uploaded, all participants in the room are notified and can download it. The SDK provides separate methods for initiating uploads, discovering available files, downloading, and cancelling in-progress transfers.

Sending Files — Enx.sendFiles()

Calling sendFiles() opens a native file picker. When the user selects a file, the SDK uploads it to EnableX and notifies all room participants via the filesReceived callback.

Enx.sendFiles();

Callbacks fired during and after the upload:

Getting Available Files — Enx.getAvailableFiles()

Call getAvailableFiles() to retrieve a list of all files currently shared in the session. This is particularly useful in reconnect scenarios — when a participant rejoins mid-session, you can call this method immediately after connection to display any files shared before they arrived.

Enx.getAvailableFiles((files) => {
  console.log('Available files:', files);
});

Downloading Files — Enx.downloadFile()

Download a specific file by passing its file ID. The autoSave flag controls whether the SDK automatically saves the file to device storage (true) or hands the raw data to your app to handle manually (false).

Enx.downloadFile(fileId, true);

Callbacks fired during the download:

Cancelling Uploads and Downloads

The SDK provides granular cancellation — you can cancel a single transfer by ID, or cancel all active transfers of a given type at once.

// Cancel everything — for example on session end or navigation away
Enx.cancelAllUploads();
Enx.cancelAllDownloads();

Participants can share their device screen with the room. The shared screen appears as a separate stream alongside the regular audio/video streams. In the React Native SDK, the screen share stream always uses the fixed stream ID 11.

Screen sharing is typically started by a single participant — for example, a presenter sharing their screen during a demo or review. All other participants in the room receive the shareStateEvent callback when sharing starts or stops, so they can update their UI accordingly.

Starting and Stopping

// Start screen sharing
Enx.startScreenShare();

// Stop screen sharing
Enx.stopScreenShare();

Callbacks fired during screen sharing lifecycle:

const eventHandlers = {
  screenShareStarted: () => {
    console.log('You are now sharing your screen');
  },
  screenShareStopped: () => {
    console.log('Screen sharing ended');
  },
  shareStateEvent: (data) => {
    if (data.isSharing) {
      console.log('Screen share active. Stream ID: 11');
    } else {
      console.log('Screen share stopped');
    }
  }
};

Canvas streaming lets a participant broadcast a custom visual — such as an image, a document slide, or any composited graphic — as a video stream in the room. Rather than sharing the device screen, canvas streaming allows your app to programmatically push a specific visual asset. The canvas stream always uses the fixed stream ID 21.

Typical use cases include presenting a slide deck, sharing a whiteboard image, or displaying a dynamic data visualisation to all participants.

Starting and Stopping

// Start canvas streaming with an image URL
Enx.startCanvasStreaming({ url: 'https://example.com/slide.png' });

// Stop canvas streaming
Enx.stopCanvasStreaming();

Callbacks fired during canvas streaming lifecycle:

The annotation feature overlays a shared drawing canvas on top of the video session. Participants can draw, highlight, or mark up content collaboratively in real time — useful for code reviews, design walkthroughs, document sign-offs, or any scenario where visual feedback during a live session adds value.

Annotation is a room-level feature: when one participant starts it, all participants are notified and the shared drawing canvas becomes visible to everyone in the session.

Starting and Stopping

// Start annotation mode
Enx.startAnnotation();

// Stop annotation mode
Enx.stopAnnotation();

Callbacks fired during annotation lifecycle: