React Native Walkthrough

Building a React Native App with Huddle01

💡

We have upgraded our SDK to v2 (2.x.x). For the previous stable release, please visit here

Walkthrough

The following guide explains how you can integrate audio/video into your React Native mobile app seamlessly using the Huddle01 React SDK.

Install @huddle01/react in your react native app

To power your React Native app with audio/video communication using Huddle01 install the following:

pnpm i @huddle01/react @huddle01/server-sdk react-native-get-random-values react-native-webrtc 

Important Step: Make sure to add camera and mic permissions to your AndroidManifest.xml file (for Android) (opens in a new tab) and Info.plist file (for iOS) (opens in a new tab).

If you are building for iOS, don’t forget to run pod install inside the ios directory to install the iOS native dependencies.

Now that we have our packages installed and app permissions granted, we need to add a few more lines of code for configuring the SDK. Go to your top-level index.js file and replace all of the code with the following:

index.js
import { AppRegistry } from 'react-native';
import 'react-native-get-random-values';
import { registerGlobals } from 'react-native-webrtc';
import App from './App';
import { name as appName } from './app.json';
 
registerGlobals();
 
AppRegistry.registerComponent(appName, () => App);

That’s all the SDK setup we need to build a full-fledged video conferencing app. Kudos if you made it till here! Let’s move on to the fun part now.

Initialization of project

Head over to API Keys Page and connect your wallet to get your project credentials:

  • API Key
  • projectId

Once done, initialize your project by adding the HuddleProvider and pass projectId in params.

app.tsx
import { HuddleClient, HuddleProvider } from '@huddle01/react';
 
const huddleClient = new HuddleClient({
  projectId: env.NEXT_PUBLIC_PROJECT_ID,
  options: {
    activeSpeakers: {
      size: 8,
    },
  },
});
 
const Parent = () => {
  return (
    <HuddleProvider key="huddle01-provider" client={huddleClient}>
      <App />
    </HuddleProvider>
  );
};

Generating the access token

Room Id can be generated using the : Create Room API

AccessToken for each peer is to be generated on a backend server using the: Server SDK

Joining and leaving the room

app.tsx
import { useRoom } from '@huddle01/react/dist/hooks';
import {Button, View} from 'react-native';
 
const App = () => {
  const { joinRoom, leaveRoom } = useRoom({
    onJoin: () => {
      console.log('Joined the room');
    },
    onLeave: () => {
      console.log('Left the room');
    },
  });
 
  return (
    <View>
    <Button
      title="Join Room"
      onPress={() => {
        joinRoom({
          roomId: 'YOUR_ROOM_ID',
          token: 'YOUR_ACCESS_TOKEN'
        })
      }}
      />
       
      <Button title=" Leave Room" onPress={leaveRoom} />
      
    </View>
  );
};
 

Sending media across to other participants

Here, we are using a term PRODUCE which means sending your audio/video stream across to the other peer who will CONSUME (or receive) the streams. Make sure to ask the user for the necessary permissions to access the device cam/mic before enabling the media devices.

app.tsx
  import { useLocalVideo, useLocalAudio } from '@huddle01/react/dist/hooks';
 
  const App = () => {
    const { stream: videoStream, enableVideo, disableVideo, changeVideoSource } = useLocalVideo();
    const { stream: audioStream, enableAudio, disableAudio, changeAudioSource } = useLocalAudio();
    const { getPermission: getCamPermission } = useDevices({ type: 'cam' });
    const { getPermission: getMicPermission } = useDevices({ type: 'mic' });
 
    return (
        {/* Webcam */} 
        <Button 
        title="Fetch and Produce Video Stream"
        onPress={async () => {
          const status = await getCamPermission();
          if (status.permission === 'granted') {
            await enableVideo();
          }
        }}
        />
          
 
        {/* Mic */} 
       <Button 
       title=" Fetch and Produce Audio Stream"
       onPress={async () => {
          const status = await getMicPermission();
          if (status.permission === 'granted') {
            await enableAudio();
          }
        }}
        />
         
 
      </View>
    );
  };
 

Advanced: Using the useLocalMedia hook

app.tsx
  import { useLocalMedia } from '@huddle01/react/dist/hooks';
 
  const App = () => {
    const { fetchStream } = useLocalMedia();
 
    return (
      <View>
        {/* Webcam */} 
        <Button 
        title="Fetch Cam Stream"
          onPress={() => fetchStream({ mediaDeviceKind: 'cam' })} />
         
 
        {/* Mic */} 
       <Button title="Fetch Mic Stream"
          onPress={() => fetchStream({ mediaDeviceKind: 'mic' })} />
          
 
      </View>
    );
  };
 

Receiving the audio and video streams

Here, we are using a term PRODUCE which means sending your audio/video stream across to the other peer who will CONSUME (or receive) the streams.

RemotePeer.tsx
import { usePeerIds } from '@huddle01/react/dist/hooks';
import { MediaStream, RTCView } from "react-native-webrtc";
 
const RemotePeer = ({ peerId }) => {
  
  const { stream } = useRemoteVideo({ peerId });
 
  return (
    <View>
      <RTCView
      streamURL={(stream as MediaStream | null)?.toURL() ?? ""}
    />
    </View>
  ) 
}
 
 
export default function() {
  const { peerIds } = usePeerIds({ roles: [Role.HOST, Role.CO_HOST] }); // Get Hosts And Cohost's peerIds
 
  return 
    <View>
      {peerIds.map(peerId => {
        return <RemotePeer peerId={peerId}  />
      })}
    </View>
}

You're all set! Happy Hacking! 🎉

For more information, please refer to the SDK Reference.

Audio/Video Infrastructure designed for developers to empower them to ship simple yet powerful Audio/Video Apps.
support
company
Copyright © 2024 Graphene 01, Inc. All Rights Reserved.