Skip to content

引入插件

shell
yarn add react-native-swarmcloud
shell
npm install --save react-native-swarmcloud

iOS

  • ios/Podfile 添加:
ruby
platform :ios, '13.0'

Android

TIP

以下设置用于 release 打包阶段, 开发阶段不需要

  • 为了保证正常使用 SDK ,打包时请在 android/app/proguard-rules.pro 文件中添加以下代码:
groovy
-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.**{*;}
  • 在 android/app/build.gradle 增加以下代码来引入 proguard 配置
groovy
buildTypes {
  release {
    ...
    ...
    ...
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  }
}

示例

tsx
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,
  },
});

其中 YOUR_TOKEN 是用于标识用户的字符串,请换成自己的token,点击这里查看如何注册 Appid 并获取 token

WARNING

如果媒体文件是由多个服务器生成的,为避免冲突,请增加以下配置:

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

Demo

完整的示例代码请参考这里

粤ICP备18075581号