Skip to content

Commit

Permalink
调整AgoraView 修复安卓样式bug 添加文档
Browse files Browse the repository at this point in the history
  • Loading branch information
邓博 authored and 邓博 committed Jul 5, 2017
1 parent 6d9daa9 commit d3a1108
Show file tree
Hide file tree
Showing 12 changed files with 421 additions and 40 deletions.
2 changes: 1 addition & 1 deletion AgoraView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default class AgoraView extends Component {
}

AgoraView.propTypes = {
localUid: PropTypes.number,
showLocalVideo: PropTypes.bool,
remoteUid: PropTypes.number,
...View.propTypes
};
Expand Down
352 changes: 352 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,354 @@
[![QQ Group](https://img.shields.io/badge/QQ%20Group-471757030-red.svg)]()

# react-native-agora

## Installation and linking libraries

Install with npm:

`npm install --save react-native-agora`

Or, install with yarn:

`yarn add react-native-agora`

Either way, then link with:

`react-native link react-native-agora`

#### iOS

TARGETS->Build Phases-> Link Binary With Libaries中点击“+”按钮，选择

libresolv.tbd
libc++.tbd
AVFoundation.framework
AudioToolbox.framework
VideoToolbox.framework
CoreMotion.framework
CoreMedia.framework
CoreTelephony.framework
TARGETS->Build Phases-> Link Binary With Libaries中点击“+”按钮，在弹出的窗口中点击“Add Other”按钮，选择
node_modules/react-native-agora/ios/RCTAgora/libs/libcrypto.a
node_modules/react-native-agora/ios/RCTAgora/libs/AgoraRtcCryptoLoader.framework
node_modules/react-native-agora/ios/RCTAgora/libs/AgoraRtcEngineKit.framework
TARGETS->Build Settings->Search Paths->Framework Search Paths添加
"$(SRCROOT)/../node_modules/react-native-agora/ios/RCTAgora/libs"
TARGETS->Build Settings->Search Paths->Library Search Paths添加
"$(SRCROOT)/../node_modules/react-native-agora/ios/RCTAgora/libs"
TARGETS->Build Settings->Enable Bitcode设置为No

TARGETS->Capabilities->Background Modes->Modes勾选Audio,AirPlay,and Picture In Picture

项目目录->Info.plist->增加2项

"Privacy - Camera Usage Description":"use camera to start video call"
"Privacy - Microphone Usage Description":"use microphone to start video call"


#### Android

Add following to `AndroidManifest.xml`

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

当您在写混淆代码时，请添加以下代码:

-keep class io.agora.**{*;}


## Documentation

[声网API文档](https://docs.agora.io/cn/1.11.1/user_guide/API/ios_api_live_cn.html)

##### RtcEngine方法

| Property | Type | Description |
| -------------------------------- | ---------------------------------------- | ------------------------------------- |
| init | object {appid: 'agora注册的应用id', channelProfile: '频道模式', videoProfile: '视频模式', clientRole: '角色'} | 初始化Agora引擎 |
| joinChannel | string channelName （房间名称） number uid （用户设置的uid 传0系统会自动分配） | 加入房间 |
| leaveChannel | | 离开频道 |
| destroy | | 销毁引擎实例 |
| startPreview | | 开启视频预览 |
| stopPreview | | 关闭视频预览 |
| switchCamera | | 切换前置/后置摄像头 |
| enableVideo | | 开启视频模式 |
| disableVideo | | 关闭视频 |
| setEnableSpeakerphone | bool | 开启扬声器 trun: 音频输出至扬声器 false: 音频输出至听筒 |
| muteLocalAudioStream | bool (default false) | 将自己静音 |
| muteAllRemoteAudioStreams | bool (default false) | 静音所有远端 音频 |
| muteRemoteAudioStream | number uid（用户uid） bool mute（是否静音） | 静音指定用户 音频 |
| muteLocalVideoStream | bool (default false) | 暂停发送本地 视频流 |
| enableLocalVideo | bool (default false) | 禁用本地视频功能 |
| muteAllRemoteVideoStreams | bool (default false) | 暂停所有远端视频流 |
| muteRemoteVideoStream | number uid（用户uid） bool mute（是否暂停） | 暂停指定远端视频流 |
| startRecordingService (ios only) | string recordingKey | 启动服务端录制服务 |
| stopRecordingService (ios only) | string recordingKey | 停止服务端录制服务 |
| getSdkVersion | callback | 获取版本号 |

##### 原生通知事件

```
RtcEngine.eventEmitter({
onFirstRemoteVideoDecoded: data => {},
onJoinChannelSuccess: data => {},
onUserOffline: data => {},
onUserJoined: data => {},
onError: data => {},
onWarning: data => {},
onLeaveChannel: data => {}
})
```

| Name | Description |
| ------------------------- | ------------ |
| onFirstRemoteVideoDecoded | 远端首帧视频接收解码回调 |
| onJoinChannelSuccess | 加入频道成功的回调 |
| onUserOffline | 其他用户离开当前频道 |
| onUserJoined | 其他用户加入当前频道 |
| onError | 错误信息 |
| onWarning | 警告 |
| onLeaveChannel | 退出频道 |

##### AgoraView 组件

| Name | Description |
| -------------- | -------------------- |
| showLocalVideo | 是否显示本地视频（bool） |
| remoteUid | 显示远程视频（number 传入uid） |

## Usage

```
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
Image,
Dimensions
} from 'react-native';
const {width, height} = Dimensions.get('window');
import {RtcEngine, AgoraView} from 'react-native-agora'
export default class Meeting extends Component {
constructor(props) {
super(props);
this.state = {
remotes: [],
isJoinSuccess: false,
isSpeaker: false,
isMute: false
};
}
componentWillMount() {
//初始化Agora
const options = {
appid: '',
channelProfile: 1,
videoProfile: 40,
clientRole: 1,
};
RtcEngine.init(options);
}
componentDidMount() {
//加入房间
RtcEngine.joinChannel();
//所以的原生通知统一管理
RtcEngine.eventEmitter({
onFirstRemoteVideoDecoded: (data) => {
console.log(data);
//有远程视频加入 返回重要的 uid AgoraView 根据uid 来设置remoteUid值
const {remotes} = this.state;
let arr = [...remotes];
let sign = false;
arr.forEach(v => {
sign = v === data.uid
});
if (!sign) {
arr.push(data.uid)
}
this.setState({
remotes: arr
})
},
onUserOffline: (data) => {
console.log(data);
//有人离开了！
const {remotes} = this.state;
let arr = [...remotes];
let newArr = [];
newArr = arr.filter(v => {
return v !== data.uid
});
this.setState({
remotes: newArr
});
},
onJoinChannelSuccess: (data) => {
console.log(data);
//加入房间成功!
this.setState({
isJoinSuccess: true
});
},
onUserJoined: (data) => {
console.log(data);
//有人来了!
},
onError: (data) => {
console.log(data);
//错误!
RtcEngine.leaveChannel();
}
})
}
componentWillUnmount() {
RtcEngine.removeEmitter()
}
handlerCancel = () => {
RtcEngine.leaveChannel();
const {navigator} = this.props;
navigator.pop()
};
handlerSwitchCamera = () => {
RtcEngine.switchCamera();
};
handlerMuteAllRemoteAudioStreams = () => {
this.setState({
isMute: !this.state.isMute
}, () => {
RtcEngine.muteAllRemoteAudioStreams(this.state.isMute)
})
};
handlerSetEnableSpeakerphone = () => {
this.setState({
isSpeaker: !this.state.isSpeaker
}, () => {
RtcEngine.setEnableSpeakerphone(this.state.isSpeaker)
});
};
render() {
const {isMute, isSpeaker, remotes, isJoinSuccess} = this.state;
if (!isJoinSuccess) {
return(
<View style={{flex:1, backgroundColor:'#fff', justifyContent:'center', alignItems:'center'}}>
<Text>正在创建视频会议...</Text>
</View>
)
}
return (
<View style={styles.container}>
<AgoraView style={styles.localView} showLocalVideo={true} />
<View style={styles.absView}>
<View style={styles.videoView}>
{remotes.map((v, k) => {
return (
<AgoraView
style={styles.remoteView}
key={k}
remoteUid={v}
/>
)
})}
</View>
<View>
<TouchableOpacity
style={{alignSelf: 'center'}}
onPress={this.handlerCancel}>
<Image
style={{width: 60, height: 60}}
source={require('../images/btn_endcall.png')}/>
</TouchableOpacity>
<View style={styles.bottomView}>
<TouchableOpacity onPress={this.handlerMuteAllRemoteAudioStreams} activeOpacity={.7}>
<Image
style={{width: 50, height: 50}}
source={ isMute ? require('../images/icon_muted.png') : require('../images/btn_mute.png')}/>
</TouchableOpacity>
<TouchableOpacity onPress={this.handlerSwitchCamera} activeOpacity={.7}>
<Image
style={{width: 50, height: 50}}
source={ require('../images/btn_switch_camera.png')}/>
</TouchableOpacity>
<TouchableOpacity onPress={this.handlerSetEnableSpeakerphone} activeOpacity={.7}>
<Image
style={{width: 50, height: 50}}
source={isSpeaker ? require('../images/icon_speaker.png') : require('../images/btn_speaker.png')}/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F4F4F4'
},
absView: {
position: 'absolute',
top: 20,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'space-between'
},
videoView: {
padding: 5,
flexWrap: 'wrap',
flexDirection: 'row',
zIndex: 100
},
localView: {
flex: 1
},
remoteView: {
width: (width - 40) / 3,
height: (width - 40) / 3,
margin: 5
},
bottomView: {
padding: 20,
flexDirection: 'row',
justifyContent: 'space-around'
}
});
```
4 changes: 2 additions & 2 deletions RtcEngine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export default {
this.listener && this.listener.remove();
Agora.init(options);
},
joinChannel(channelName = '001'){
Agora.joinChannel(channelName)
joinChannel(channelName = '00001', uid = 0){
Agora.joinChannel(channelName, uid)
},
eventEmitter(fnConf) {
//there are no `removeListener` for NativeAppEventEmitter & DeviceEventEmitter
Expand Down
Loading

0 comments on commit d3a1108

Please sign in to comment.