freepbx-react-webrtc

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

Event	Description
Idle	Called when connected to service and there is no call coming in or going out
Calling	Called when there is an outgoing call
Alerting	Called when there is an incoming call going on
InCall	Called multiple times while call is connected and running
error	Called when error is happening, passes 2 parameters (response, cause)

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

Event	Description
answerCall	Accept an incoming call when there is one ("Alerting")
placeCall	Calls the defined destination URI
hangupCall	Cancels outgoing or running Call
toggleMicrophone	Toggles outgoing sound track (true / false). Used to mute outgoing sound only.
toggleVideo	Toggles outgoing video track (true / false). Used to mute outgoing video only.

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

Parameter	Description
enableVideo	indicates if video should be enabled for calls
enableSound	indicates if sound should be enabled for calls
autoRegister	indicates if the component should send a SIP Register to be able to receive calls
sipDomain	is the SIP domain to be used for registration and calls
sipServer	This is an optional property indicating where to connect with the server. If this is not set the value of sipDomain is used
sipUser	is the user id to be used for authentication
destination	is the remote URI destination to be called
metaData	is an object to be passed to the remote side in a X-MetaData SIP header. The object is JSON stringified and then URL encoded before inserted as header value
alertVideoUrl	is an optional sring with an URL pointing to a video file supported by the video element. This file is played when an inbound call is received. If the property is omitted a default file is played
ringbackVideoUrl	is an optional sring with an URL pointing to a video file supported by the video element. This file is played when an call is placed until it has been answered. If the property is omitted a default file is played
skipStunServer	indicates if a STUN server should be used. Disable when only working in local network
stunServerList	list of Dicts with STUN Servers to use
eventHandler	EventHandler to communicate between the parent and child component
eventHandlerEmit	Function to pass to the WebRTCClient so it can emit events
updateCallState	Function that gets called with the CallState on change with a string as parameter
updateConnectionState	Function that gets called with the ConnectionState with a string as parameter
traceSip	Boolean to enable or disable advanced SIP output

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.