DataStream - React

DataStream enables participants in a meeting to exchange arbitrary data—such as text, signals, or binary payloads—directly alongside audio and video. Unlike PubSub (which is topic-based), DataStream provides a lightweight, low-level way to send messages, files, or binary data between participants.

This is particularly useful when you need low-latency communication, such as collaborative tools, quick signals, or real-time updates.

To utilize a DataStream in a meeting, VideoSDK provides methods and events in the useMeeting hook. You can send messages via the send() method, and listen for incoming messages with the onData event.

send()

The send() method is used to transmit data directly over the DataStream to all connected participants in a meeting. It supports both textual data (like strings) and binary data (like ArrayBuffer, Blob), making it suitable for chat messages, control signals, file chunks, or real-time data.

Key Notes

• Works at the transport layer, bypassing topics/persistence (unlike PubSub).
• Supports two reliability modes: "reliable" (guaranteed delivery, may increase latency) and "unreliable" (best effort, lower latency).
• The maximum payload size is 15 KiB per message. Larger data (like files) should be chunked before sending.
• If the connection cannot send the message or payload type is invalid, the method will throw an error.

Parameters

• payload (string | Blob | ArrayBuffer | ArrayBufferView) The message/data to send. Examples:

  • String: "Hello world!"
  • Binary: new Uint8Array([72, 101, 108, 108, 111])

• options (object, optional)

  • reliability ("reliable" | "unreliable")

    • "reliable": Ensures the data eventually arrives, even under poor network conditions.
    • "unreliable": Prioritizes low-latency; packets may drop during loss.

Returns

• Promise<boolean>

  • Resolves to true → The message send request was made.
  • Resolves to false → Sending failed (payload too large, invalid type, or network issue).

Example

import { useMeeting } from "@videosdk.live/react-sdk";

const MeetingView = () => {
  //Getting the send method from hook
  const { send } = useMeeting();

  const handleSendData = () => {
    const sent = await send("Hello world!", {
      reliability: "unreliable",
  });
  };

  return (
    <>
      <button onClick={handleSendData}>Send Data</button>
    </>
  );
};

---

onData Event

The onData event is emitted whenever a message is received over the DataStream. It provides both the content and metadata so you can process messages accordingly.

Callback Parameters

• payload (Uint8Array | string)
  The actual data received from the sender.

  • If the sender transmitted a string, the payload will already be a string.
  • If the sender transmitted binary data (ArrayBuffer, Blob, etc.), the payload will be a Uint8Array that you can process directly or decode.

• timestamp (number) The time (in milliseconds since epoch) when the message was sent. Useful for ordering or debugging delays.

• from (string) The unique identity (participantId) of the sender.

• reliability ("reliable" | "unreliable") Indicates whether the sender used reliable or unreliable delivery mode.

Example

import { useMeeting } from "@videosdk.live/react-sdk";

const MeetingView = () => {
  //Event to recieve the data
  function onData({payload,timestamp,from,reliability}) {
    console.log("onData",payload,timestamp,from,reliability);
  }

  //Getting the send method from the hook and assigning event callbacks
  const { send } = useMeeting({
    onData
  });

  return <>...</>;
};

note

• Participants in send_and_recv mode can both send and receive DataStream messages. However, they are the only ones permitted to send.
• Participants in recv_only mode (as well as those in send_and_recv) can receive messages.

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• send()
• onData