freepbx-react-webrtc v2.1.3

This is a fork of the iotcomms implementation for general webrtc

To get started:

$ npm install freepbx-react-webrtc --save

The main objective of the component is to provide a high-level logic providing WebRTC functionality to web applications where the developer should not have to dig into the details of how SIP, Peer connections, Sessions and Video elements interact during the lifecycle of a call.

An example application is found here

Events that are called by component

Events that are needed to get called to interact with the component

To toggle incoming sound / video interact with the video element directly

Below is an example of how to embed the component in a React.js application

  import WebRTCClient from "freepbx-react-webrtc";
  import EventEmitter from "events";

  constructor(props) {
    super(props)

    this.state = {
        eventHandler: new EventEmitter()
    };
  }
  
  // Default Events that are called by the WebRTCClient
  componentDidMount() {
    // On Error
    this.state.eventHandler.on("error", function(response, cause) {
      // Do something...
    });

    // Connected and Idle
    this.state.eventHandler.on("Idle", function() {
      // Do something...
    });

    // Outgoing call happening
    this.state.eventHandler.on("Calling", function() {
      // Do something...
    });

    // Incoming Call
    this.state.eventHandler.on("Alerting", function() {
      // Do something...
    });

    // Call started
    this.state.eventHandler.on("InCall", function() {
      // Do something...
    });
  }
  
  acceptCall = () => {
  	this.state.eventHandler.emit("answerCall");
  }

  render() {
    return (
      <div className="App">
        //Video element used for rendering video self-view
        <video width="25%"  id="localVideo" autoPlay playsInline  muted="muted"></video>

        //Video element used for rendering video of remote party
        <video width="50%" id="remoteVideo" autoPlay playsInline ></video>


        // Example Accept Button
        <Button onClick={this.acceptCall}>Accept Call</Button>
		
        <WebRTCClient
          enableVideo={true}
          enableSound={true}
          webSocketPort="8089"
          autoRegister = {true}
          sipDomain={sipDomain}
          sipServer={sipServer}
          sipUser={sipUser}
          sipPassword={sipPassword}
          destination={destinationUri}
          metaData={metaDataObject}
          alertVideoUrl="alertUrl"
          ringbackVideoUrl="ringbackUrl"
          localVideoTagId="localVideo"
          remoteVideoTagId="remoteVideo"
          skipStunServer={false}
          stunServerList=[{urls: "stun:stun.l.google.com:19302"}]
          eventHandler={this.state.eventHandler}
          eventHandlerEmit={this.eventHandlerEmit}
          updateCallState={this.updateCallState}
          updateConnectionState={this.updateConnectionState}
          traceSip={true}
        />
      </div>
    );
  }
}

Component Parameters

The component will try to play out audio and video feedback when calling and alerting incoming calls. Due to autoplay limitations and logic in different web browsers this may not play.