Usage

Installation

yarn

Install the SDK using yarn.

yarn add react-native-swarmcloud

npm

Install the SDK using npm.

npm install --save react-native-swarmcloud

Android

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.**{*;}

2. 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'
  }
}

iOS

iOS minimum version 13.0

We support minimum OS version 13.0 for our iOS SDK.

1. Open your podfile and make sure your platform is set to ios 12

platform :ios, '13.0'

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