Version: 0.x.x

Relay Media(PK Host) - React Native

Overview

The Relay Media feature enables hosts to relay their media (audio, video, screen share) to one or multiple other live streams. This creates cross-stream interactions similar to "PK battles" or collaborative broadcasts.

This feature allows audiences in one live stream to view and hear hosts from another live stream without changing rooms, creating powerful interactive experiences.

Key Concepts

Media Relay: The process of transmitting a host's audio/video from one live stream to another
Source Meeting: The original live stream where the host is broadcasting
Destination Meeting: The target live stream(s) where the host's media will be relayed
Relay Kinds: The types of media that can be relayed (video, audio, screen share, etc.)

Sequence Diagram

sequenceDiagram participant HostA as Host A participant HostB as Host B participant AudienceB as Audience B HostA->>HostB: requestMediaRelay(meetingB_Id, token, kinds) HostB-->>HostB: mediaRelayRequestReceived event alt Accept HostB->>HostA: accept() HostA-->>HostA: mediaRelayRequestResponse("accepted") HostA-->>HostA: mediaRelayStarted(meetingB_Id) HostA->>AudienceB: Media streaming else Reject HostB->>HostA: reject() HostA-->>HostA: mediaRelayRequestResponse("rejected") end HostA->>HostB: stopMediaRelay(meetingB_Id) HostA-->>HostA: mediaRelayStopped(meetingB_Id, reason);

Implementation Guide

1. Requesting Media Relay

`requestMediaRelay()`

Parameters:

destinationMeetingId (string): ID of the target liveStream
token (string, optional): Authentication token for the destination liveStream
kinds (array, optional): Array of media types to relay. Options:
- "video": Camera video
- "audio": Microphone audio
- "share": Screen share video
- "share_audio": Screen share audio

import { useMeeting } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

const LiveStreamView = () => {
  //Getting the requestMediaRelay method from hook
  const { requestMediaRelay } = useMeeting();

  const handleRequestMediaRelay = () => {
    requestMediaRelay({
      destinationMeetingId: "liveStream-B",
      token: "VIDEOSDK_AUTHENTICATION_TOKEN",
      kinds: ["video", "audio"],
    });
  };

  return (
    <TouchableOpacity style={styles.button} onPress={handleRequestMediaRelay}>
      <Text style={styles.buttonText}>Request Media Relay</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#007AFF",
    padding: 12,
    borderRadius: 8,
    alignItems: "center",
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
});

2. Handling Relay Requests (Destination Meeting)

In the destination liveStream, hosts (participants with SEND_AND_RECV mode) will receive relay requests:

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

const LiveStreamView = () => {
  function onMediaRelayRequestReceived(
    participantId,
    meetingId,
    displayName,
    accept,
    reject
  ) {
    console.log(
      `Relay request from ${displayName} (${participantId}) in liveStream ${meetingId}`
    );
    // Show native alert to accept/reject the request
    showRelayRequestDialog(displayName, meetingId, accept, reject);
  }

  // Example dialog handler using React Native Alert
  function showRelayRequestDialog(displayName, meetingId, accept, reject) {
    Alert.alert(
      "Media Relay Request",
      `${displayName} wants to relay their media to this live stream. Accept?`,
      [
        {
          text: "Reject",
          onPress: reject,
          style: "cancel",
        },
        {
          text: "Accept",
          onPress: accept,
        },
      ]
    );
  }

  //Getting the requestMediaRelay method from hook
  const { requestMediaRelay } = useMeeting({
    onMediaRelayRequestReceived,
  });

  return null;
};

3. Handling Request Responses (Source Meeting)

In the source liveStream, track the response to your relay requests:

import { useMeeting } from "@videosdk.live/react-native-sdk";
import { ToastAndroid, Platform, Alert } from "react-native";

const LiveStreamView = () => {
  function onMediaRelayRequestResponse(participantId, decision) {
    if (decision === "accepted") {
      console.log(`Relay request accepted by ${participantId}`);
      // Show notification for both platforms
      showNotification(`Relay request accepted by ${participantId}`);
      // Update UI to show relay is active
      updateRelayStatus(participantId, true);
    } else {
      console.log(`Relay request rejected by ${participantId}`);
      // Show notification for both platforms
      showNotification(`Relay request rejected by ${participantId}`);
      // Update UI to show relay was rejected
      showRelayRejectedMessage(participantId);
    }
  }

  // Helper function to show notifications across platforms
  const showNotification = (message) => {
    if (Platform.OS === "android") {
      ToastAndroid.show(message, ToastAndroid.SHORT);
    } else {
      Alert.alert("Notification", message, [{ text: "OK" }]);
    }
  };

  //Getting the requestMediaRelay method from hook
  const { requestMediaRelay } = useMeeting({
    onMediaRelayRequestResponse,
  });

  return null;
};

4. Tracking Active Relays

When a relay successfully starts:

import { useMeeting } from "@videosdk.live/react-native-sdk";
import { ToastAndroid, Platform, Alert } from "react-native";

const LiveStreamView = () => {
  function onMediaRelayStarted(meetingId) {
    console.log(`Media relay started to ${meetingId}`);
    // Show notification for both platforms
    showNotification(`Media relay started to ${meetingId}`);
    // Update UI to show active relay
    addActiveRelayToUI(meetingId);
  }

  // Helper function to show notifications across platforms
  const showNotification = (message) => {
    if (Platform.OS === "android") {
      ToastAndroid.show(message, ToastAndroid.SHORT);
    } else {
      Alert.alert("Notification", message, [{ text: "OK" }]);
    }
  };

  //Getting the requestMediaRelay method from hook
  const { requestMediaRelay } = useMeeting({
    onMediaRelayStarted,
  });

  return null;
};

5. Stopping Media Relay

To stop an ongoing relay:

`stopMediaRelay()`

Parameters:

meetingId (string): ID of the liveStream where the relay should stop

import { useMeeting } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

const LiveStreamView = () => {
  //Getting the stopMediaRelay method from hook
  const { stopMediaRelay } = useMeeting();

  const handleStopMediaRelay = () => {
    stopMediaRelay("liveStream-B");
  };

  return (
    <TouchableOpacity style={styles.button} onPress={handleStopMediaRelay}>
      <Text style={styles.buttonText}>Stop Media Relay</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#FF3B30",
    padding: 12,
    borderRadius: 8,
    alignItems: "center",
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
});

6. Handling Relay Stop Events

When a relay stops for any reason:

import { useMeeting } from "@videosdk.live/react-native-sdk";
import { ToastAndroid, Platform, Alert } from "react-native";

const LiveStreamView = () => {
  function onMediaRelayStopped({meetingId, reason}) {
    console.log(`Relay to ${meetingId} stopped. Reason: ${reason}`);

    // Show notification for both platforms
    let message = "";
    switch (reason) {
      case "user_stopped":
        message = `You stopped relaying to ${meetingId}`;
        break;
      case "connection_lost":
        message = `Relay to ${meetingId} ended due to connection issues`;
        break;
      default:
        message = `Relay to ${meetingId} ended: ${reason}`;
    }
    showNotification(message);

    // Remove from active relays in UI
    removeActiveRelayFromUI(meetingId);
  }

  // Helper function to show notifications across platforms
  const showNotification = (message) => {
    if (Platform.OS === "android") {
      ToastAndroid.show(message, ToastAndroid.SHORT);
    } else {
      Alert.alert("Notification", message, [{ text: "OK" }]);
    }
  };

  //Getting the requestMediaRelay method from hook
  const { requestMediaRelay } = useMeeting({
    onMediaRelayStopped,
  });

  return null;
};

7. Handling Relay Errors

To handle errors that may occur during relay:

import { useMeeting } from "@videosdk.live/react-native-sdk";
import { ToastAndroid, Platform, Alert } from "react-native";

const LiveStreamView = () => {
  function onMediaRelayError({meetingId, error}) {
    console.error(`Relay error to ${meetingId}: ${error}`);
    // Show error notification for both platforms
    showNotification(`Couldn't relay to ${meetingId}: ${error}`);
  }

  // Helper function to show notifications across platforms
  const showNotification = (message) => {
    if (Platform.OS === "android") {
      ToastAndroid.show(message, ToastAndroid.LONG);
    } else {
      Alert.alert("Error", message, [{ text: "OK" }]);
    }
  };

  //Getting the requestMediaRelay method from hook
  const { requestMediaRelay } = useMeeting({
    onMediaRelayError,
  });

  return null;
};

Use Cases

Guest Appearances: Allow popular hosts to make guest appearances in other streams without leaving their audience
Cross-Stream Competitions: Create "battles" or competitions between hosts in different streams
Multi-Location Broadcasting: Connect hosts from different physical locations into a shared experience
Expert Commentary: Bring in subject matter experts to comment on events in another stream

Troubleshooting

Common Issues

Relay Request Not Received
- Verify both meetings are active
- Check that destination liveStream ID is correct
- Ensure the token has proper permissions
Media Not Visible After Acceptance
- Verify network connectivity
- Check that appropriate media kinds were specified
- Ensure the host has enabled their camera/microphone
Unexpected Relay Termination
- Check for network connectivity issues
- Verify that both meetings remain active
- Look for error events with specific reasons

API Reference

Got a Question? Ask us on discord

Overview​

Key Concepts​

Sequence Diagram​

Implementation Guide​

1. Requesting Media Relay​

requestMediaRelay()​

2. Handling Relay Requests (Destination Meeting)​

3. Handling Request Responses (Source Meeting)​

4. Tracking Active Relays​

5. Stopping Media Relay​

stopMediaRelay()​

6. Handling Relay Stop Events​

7. Handling Relay Errors​

Use Cases​

Troubleshooting​

Common Issues​

API Reference​