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:
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 DolbyIoGettingStarted
It 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 DolbyIoGettingStarted
1. Install the Dolby.io Communications SDK for React Native using npm
or yarn
:
npm install @dolbyio/comms-sdk-react-native --save
yarn add @dolbyio/comms-sdk-react-native
2. 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
:
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-ios
On Android, run the application:
npx react-native run-android
The 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