https://github.com/ralphpina/twiliorn
Twilio Video SDK for React Native
https://github.com/ralphpina/twiliorn
android react-native twilio-video
Last synced: about 2 months ago
JSON representation
Twilio Video SDK for React Native
- Host: GitHub
- URL: https://github.com/ralphpina/twiliorn
- Owner: ralphpina
- Created: 2017-02-18T03:51:33.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-21T01:43:47.000Z (over 9 years ago)
- Last Synced: 2025-03-30T18:44:16.731Z (over 1 year ago)
- Topics: android, react-native, twilio-video
- Language: Java
- Homepage: https://www.twilio.com/docs/api/video
- Size: 674 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Twilio Video SDK React Native Wrapper
--
###Currently Android Only
There is an iOS only project that can be found here:
https://github.com/gaston23/react-native-twilio-video-webrtc
##Installation
**TODO**: Currently it is not being distributed via npm. So you would need to import the `android/library` module and copy/paste the `TwilioVideoView` into your project.
##Running Sample
1) Clone this repo.
2) Install dependencies. I use Yarn, so you can do `yarn` in the directory. Or use NPM and run `npm i`.
3) Generate an access token as described [here](https://github.com/twilio/video-quickstart-android#quickstart).
4) Set the access token in `index.android.js`.
5) Run `react-native run-android` with an emulator or device connected.
Probably a good idea to read the [docs](https://www.twilio.com/docs/api/video/getting-started).
##Permissions
The library project declares the following permissions, which **will be merged** into your `AndroidManifest.xml`:
```xml
...
```
##Usage
There are two classes that can be used:
`TwilioVideoView` - this is a basic setup that does not allow customization. All the UI, buttons, behavior, etc. are implemented natively.
```javascript
```
`CustomTwilioVideoView` - this provides you you a way to customize and listen to events. You will need to create your own UI components such as buttons. You'll still get a main window for the call, as well as a thumbnail for the participant.
```javascript
export default class CustomizedTwilioVideo extends Component {
twilioView: CustomizedTwilioVideo;
constructor(props) {
super(props);
this.state = {
statusText: '',
isConnected: false,
};
}
connectButtonPress() {
this.state.isConnected ? this.twilioView.disconnect() : this.twilioView.connect(ROOM_NAME);
}
render() {
return (
{ this.twilioView = twilioView; }}
style={styles.twilioView}
twilioAccessToken={TWILIO_ACCESS_TOKEN}
onConnected={() => {
this.setState({
statusText: 'connected',
isConnected: true,
})
}}
onConnectFailure={event => this.setState({statusText: 'error: ' + event.nativeEvent.reason})}
onDisconnected={() => {
this.setState({
statusText: 'disconnected',
isConnected: false,
})
}}
onParticipantConnected={event => this.setState({statusText: 'new participant: ' + event.nativeEvent.participant})}
onParticipantDisconnected={event => this.setState({statusText: 'participant disconnected'})}
/>
this.props.navigator.pop()}
>
Back
this.twilioView.switchCamera()}
>
Camera
this.twilioView.toggleVideo()}
>
Video
this.twilioView.toggleSound()}
>
Audio
this.connectButtonPress()}
>
{this.state.isConnected ? 'D': 'C'}
{this.state.statusText}
);
}
}
```
##Screenshot
