引入插件
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
完整的示例代码请参考这里