React Twilio Video

Install

1. npm i --save react-twilio-video
2. 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>

3. 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.