Dolby.io Communications SDK for React Native
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.
Prerequisites
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.
Create a new project
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
Installation
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'
}
Getting started
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;
Permissions
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();
}, []);
Initialization
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}` });
Create and join a conference
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);
}
};
Integrate video
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();
}, []);
Run the application
On iOS, run the application:
npx react-native run-ios
On Android, run the application:
npx react-native run-android
SDK License agreement
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.
Third Party licenses
Direct licenses can be found here
© Dolby, 2021