Skip to main content

Usage

Installation

Install the SDK using yarn.

yarn add react-native-swarmcloud
info

The below instructions are for the release builds, debug builds should work without any additional steps.

  1. Create / append to the file android/app/proguard-rules.pro
-dontwarn com.p2pengine.**
-keep class com.p2pengine.**{*;}
-keep interface com.p2pengine.**{*;}
-keep class com.cdnbye.libdc.**{*;}
-keep interface com.cdnbye.libdc.**{*;}
-keep class com.snapchat.djinni.**{*;}
  1. In your android/app/build.gradle edit the release configuration and add the following line importing the proguard configuration
buildTypes {
release {
...
...
...
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}

Example

import { useState, useEffect } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import { Header } from 'react-native/Libraries/NewAppScreen';
import Video from 'react-native-video';
import {
initP2pEngine,
parseStreamURL,
TrackerZone,
} from 'react-native-swarmcloud';

export default function App() {
const [source, setSource] = useState({
uri: '',
});

useEffect(() => {
initP2pEngine(YOUR_TOKEN, {
trackerZone: TrackerZone.Europe, // Set HongKong or USA if you changed zone
})
.then(() => {
const url = parseStreamURL(YOUR_STREAM_URL);
setSource({ uri: url });
})
.catch((e) => console.error(e.toString()));
}, []);

return (
<SafeAreaView>
<Header />
<Video
source={source}
controls={true}
style={styles.backgroundVideo}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});

Where YOUR_TOKEN is your Customer ID. Please replace it by your own token obtained from console, click here for more information.

note

If the media segment is generated by multiple servers, please add this line to P2pConfig:

initP2pEngine(YOUR_TOKEN, {
...
useStrictHlsSegmentId: true,
})

Demo

A completed example can be found here