import React from "react";
import { Text, SafeAreaView, Button } from "react-native";
import { registerGlobals } from "react-native-webrtc";
import InCallManager from "react-native-incall-manager";
import { useWebRTC, RealtimePlayer } from "@outspeed/react-native";
import { createConfig } from "@outspeed/core/dist/create-config";

registerGlobals();

export default function HomeScreen() {
  const { connect, remoteStreams, connectionStatus } = useWebRTC();

  const createConfigAndConnect = React.useCallback(async () => {
    InCallManager.setSpeakerphoneOn(true);
    const config = createConfig({
      // Add your function url
      functionURL: "<my-function-url>", 
      audioConstraints: {}
    });

    connect({
      config,
    });
  }, [connect]);

  return (
    <SafeAreaView style={{ display: "flex", marginTop: 50 }}>
      <Text>Connection Status: {connectionStatus}</Text>
      <Button title="Connect" onPress={createConfigAndConnect} />
      {remoteStreams[0] && (
        <RealtimePlayer streamURL={remoteStreams[0].toURL()} />
      )}
    </SafeAreaView>
  );
}
We assume you have already deployed your backend. If not, please follow this tutorial to deploy your backend with outspeed-client.
import React from "react";
import { Text, SafeAreaView, Button } from "react-native";
import { registerGlobals } from "react-native-webrtc";
import InCallManager from "react-native-incall-manager";
import { useWebRTC, RealtimePlayer } from "@outspeed/react-native";
import { createConfig } from "@outspeed/core/dist/create-config";

registerGlobals();

export default function HomeScreen() {
  const { connect, remoteStreams, connectionStatus } = useWebRTC();

  const createConfigAndConnect = React.useCallback(async () => {
    InCallManager.setSpeakerphoneOn(true);
    const config = createConfig({
      // Add your function url
      functionURL: "<my-function-url>", 
      audioConstraints: {}
    });

    connect({
      config,
    });
  }, [connect]);

  return (
    <SafeAreaView style={{ display: "flex", marginTop: 50 }}>
      <Text>Connection Status: {connectionStatus}</Text>
      <Button title="Connect" onPress={createConfigAndConnect} />
      {remoteStreams[0] && (
        <RealtimePlayer streamURL={remoteStreams[0].toURL()} />
      )}
    </SafeAreaView>
  );
}

The code shown establishes a peer connection with the backend and streams local audio to it.

  • We import necessary components from the @outspeed/react-native and @outspeed/core libraries.
  • useWebRTC: This hook is used to manage WebRTC connections. Visit here to learn more about useWebRTC.
  • The useWebRTC hook is set up with a URL (functionURL) and option to enable audio.
    • audioConstraints: {}: This selects the default audio input device and streams the audio to the backend. You can also specify any MediaTrackConstraints to customize the audio input.
  • Streaming: Using RealtimePlayer component to stream. Learn more about RealtimePlayer component here.

​
Resources

Example

Explore our example repository where we use @outspeed/react-native to build a mobile app that connects to the Outspeed backend.

GitHub

Check out the GitHub repository of @outspeed/react-native.

Was this page helpful?

InstallationuseWebRTC