react-twilio-video
v1.1.16React Twilio Video
Install
npm i --save react-twilio-video
- Add the following scripts to your page:
<script src="https://media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script>
<script src="https://media.twiliocdn.com/sdk/js/conversations/v0.13/twilio-conversations.min.js"></script>
- PARTY!!!!
Usage
This module is broken down into 2 parts, the decorator and the 2 React components
Sample:
var accessToken = "<your token>";
@twilio((props) => {
return props.accessToken
})
class App extends Component {
render() {
return (
<div>
remote
<TwilioRemote width={this.state.windowWidth} height={this.state.windowWidth * 0.75}/>
local
<TwilioLocal video={false} audio ={false} width={this.state.windowWidth} height={this.state.windowWidth * 0.75}/>
</div>
);
}
}
Note in this example that the decorator is the only required item here. The components are not both required (although if you dont use ether... whats the point right :)
The decorator adds the following props to the component:
- disconnect - (Function) used to disconnect from the conversation if their is one
- participants - (Array) Array of active participants
- connected - (String) The last/most recent user to be added to the call
- disconnected - (String) The last/most recent user to be removed/leave from the call
- invite - (Function) to invite one or many users. Accepts a string or an array of strings as a param
Note the twilio decorator creates a HOC that is needed for the twilio components to work.