Building a React Native App with Huddle01
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-webrtcImportant 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:
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 KeyprojectId
Once done, initialize your project by adding the HuddleProvider and pass projectId in params.
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
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.
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
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.
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.