This guide explains how to create a basic audio video conference application for mobile with React Native. It starts with importing the Dolby.io Communications SDK for React Native and guides you through the steps to launch a conference call.
Make sure that you have:
- A Dolby.io account
- An iOS or Android device to run the application on, or the device emulator
- React Native 0.66+ (including Expo projects)
For reference, see the GitHub sample repository.
Please review Supported Environments for more information on iOS and Android requirements.
Please see the documentation for a complete list of available services and methods.
1. Create a new React Native project:
npx react-native init DolbyIoGettingStartedIt will take a minute or two to download the template and install the different components needed for the project to run.
2. Once the project is created, go to the newly created folder:
cd DolbyIoGettingStarted1. Install the Dolby.io Communications SDK for React Native using npm or yarn:
npm install @dolbyio/comms-sdk-react-native --saveyarn add @dolbyio/comms-sdk-react-native2. Complete the installation:
For iOS, install native dependencies via CocoaPods:
pod install --repo-update --project-directory=ios/For Android, add the following line to your android/build.gradle file, in the allprojects, repositories section:
maven { url("https://android-sdk.voxeet.com/release") }
and also add following lines to your android/app/build.gradle file:
packagingOptions {
pickFirst '**/armeabi-v7a/libc++_shared.so'
pickFirst '**/x86/libc++_shared.so'
pickFirst '**/arm64-v8a/libc++_shared.so'
pickFirst '**/x86_64/libc++_shared.so'
}
Replace the content of your App.js with the following:
import React, { useEffect, useState } from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Button,
TextInput,
Platform,
PermissionsAndroid,
} from 'react-native';
import {
Colors,
} from 'react-native/Libraries/NewAppScreen';
const Section = ({children, title}) => {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
};
const App = () => {
const [conferenceAlias, setConferenceAlias] = useState("react-native");
const [streamingUsers, setStreamingUsers] = useState([]);
const joinConference = async () => {
};
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Section title="Conference">
<Text>Alias:</Text>
<TextInput
style={styles.textInput}
onChangeText={setConferenceAlias}
value={conferenceAlias} />
<Button onPress={joinConference} title="Join the conference" />
</Section>
<Section title="Videos" style={{backgroundColor: 'black'}}>
{streamingUsers.map(({ participant, stream }) => (
<VideoView
key={`video-${participant.id}`}
style={{height: 200, width: 180, borderWidth: 1}}
ref={async element => {
try {
await element.attach(participant, stream);
} catch (error) {
console.error(error);
}
}}
/>
))}
</Section>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
textInput: {
height: Platform.OS == 'android' ? 40 : 20,
margin: 12,
borderWidth: 1,
padding: 10,
lineHeight: 14,
},
});
export default App;For iOS, establish privacy permissions by adding two new keys in Info.plist:
- Privacy - Microphone Usage Description.
- Privacy - Camera Usage Description.
For Android, the application must request permissions to access the microphone and camera. When the application component loads, we will request the permissions. In the const App = () => { }; add the following code:
const requestPermissions = async () => {
try {
const cameraGranted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "Camera Permission",
message:"This App needs access to your camera",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (cameraGranted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the camera");
} else {
console.log("Camera permission denied");
}
const micGranted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
{
title: "Microphone Permission",
message: "This App needs access to your microphone so you can talk to people.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (micGranted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the microphone");
} else {
console.log("Camera permission denied");
}
} catch (error) {
console.warn(error);
}
};
useEffect(async () => {
async function initialize() {
if (Platform.OS === 'android') {
// Request the permissions to access the camera and the microphone
// required for Android only
await requestPermissions();
}
// Initialization of the SDK...
}
initialize();
}, []);1. Import the SDK to the application by adding the following line at the top of the App.js file:
import CommsAPI, { VideoView } from '@dolbyio/comms-sdk-react-native';2. Initialize the SDK with the Dolby.io credentials found in your dashboard. Replace the APP_KEY and the APP_SECRET with your application key and secret. Insert the following code after requesting the permissions for the microphone and camera (look for // Initialization of the SDK...):
// WARNING: It is best practice to use the initializeToken function to initialize the SDK.
// Please read the documentation at:
// https://docs.dolby.io/communications-apis/docs/rn-client-sdk-references-commsapi#initializetoken
await CommsAPI.initialize(APP_KEY, APP_SECRET);3. Add the following code after the SDK initialization to automatically open a session after initializing the SDK. The session will open with a random user name.
const rand = Math.round(Math.random() * 10000);
await CommsAPI.session.open({ name: `user-${rand}` });Locate the function joinConference in the code and replace it with the following to add a button to create and join a conference:
const joinConference = async () => {
try {
const conferenceOptions = {
alias: conferenceAlias,
params: {},
};
// Create the conference
const conference = await CommsAPI.conference.create(conferenceOptions);
console.log(`Conference ${conference.id} created`);
const joinOptions = {
constraints: {
audio: true,
video: true,
}
};
// Join the conference with Audio and Video on
await CommsAPI.conference.join(conference, joinOptions);
console.log('Conference joined');
} catch (error) {
console.error(error);
}
};Use the onStreamsChange event handler provided by the conference object of the SDK to integrate video into your application. This event is triggered when a participant video stream changes, for example, a new video stream coming in or the video is stopped. Add the following code to create VideoView objects and insert them into the videoElements dictionary. The videoElements dictionary is used to generate the UI within the function getVideoElements.
1. Add the following import statement at the top of your document:
import { VideoView } from '@dolbyio/comms-sdk-react-native';2. Insert the following code in your App component:
useEffect(() => {
const unsubscribe = CommsAPI.conference.onStreamsChange((data, type) => {
if (type === 'EVENT_CONFERENCE_STREAM_REMOVED') {
// Remove the users without a video stream
setStreamingUsers(usr => usr.filter(d => d.participant.id !== data.participant.id));
return;
}
if (
!streamingUsers
.map(d => d.participant.id)
.includes(data.participant.id) &&
data?.stream?.videoTracks?.length > 0
) {
setStreamingUsers(sp => [...sp, data]);
}
});
return () => unsubscribe();
}, []);On iOS, run the application:
npx react-native run-iosOn Android, run the application:
npx react-native run-androidThe Dolby.io Communications SDK for React Native and its repository are licensed under the MiT License.
Before using the latest version of the @dolbyio/comms-sdk-react-native, please review and accept the Dolby Software License Agreement.
Direct licenses can be found here
© Dolby, 2021