how to use twilio in your browser with jsclient

A java CDI controller where we will create js token, using the logged user:


import javax.enterprise.context.SessionScoped;
import javax.inject.Inject;
import javax.inject.Named;

import org.twiliofaces.inject.configuration.TwilioCapabilityToken;

public class TwilioJsController implements Serializable

   private static final long serialVersionUID = 1L;

   @TwilioCapabilityToken(client = "#{loginController.userRegistration.lastName}")
   String jsToken;

   public TwilioJsController()

   public String getJsToken()
      return jsToken;


Below the jsf page where we use js twilio client:

<!DOCTYPE html>
<html xmlns=""
	xmlns:tf="" lang="en">

	<title>Twilio Client Call</title>
	<tf:jsClient token="#{twilioJsController.jsToken}" debug="true"
		<f:facet name="ready">
		 	 $("#log").text("Client 'twiliofaces' is ready");
		<f:facet name="offline">
		<f:facet name="incoming">
			 $("#log").text("Incoming connection from " + incoming.parameters.From);
       		// accept the incoming connection and start two-way audio
       		if (confirm('Accept incoming call from ' + incoming.parameters.From + '?')){
		<f:facet name="cancel"></f:facet>
		<f:facet name="connect">
		 	$("#log").text("Successfully established call");
		<f:facet name="disconnect">
		 	$("#log").text("Call ended");
		<f:facet name="presence">
				 if (presence.available) {
          			// create an item for the client that became available
         		 	$("<li />", {id: presence.from, text: presence.from}).click(function () { $("#number").val(presence.from); callNumber();
				else {
					// find the item by client name and remove it
					$("#" + presence.from).remove();
		<f:facet name="error">
			$("#log").text("Error: " + error.message);
		<f:facet name="javascript">

      	function callNumber() {
	        // get the phone number or client to connect the call to
	        // This will get passed through to the Voice URL
	        // ( That URL will
	        // Dial the correct number
	         params = {"PhoneNumber": $("#number").val()};

      	function hangup() {
	welcome #{loginController.userRegistration.fullName}<br/>
	<button class="call" onclick="callNumber();">Call</button>

	<button class="hangup" onclick="hangup();">Hangup</button>

	<input type="text" id="number" name="number"
		placeholder="Enter a phone number to call" />

	<div id="log">...</div>
	<br />
	<ul id="people" />
	<br />
	<a href="../logout.jsp">logout</a>

the twiml page used configured in our twilio account dashboard:

<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns=""
	<f:event type="preRenderView" listener="#{logController.log}" />
		<tf:dial callerId="#{param.From}"
			rendered="#{not twimlClientController.isClient()}">
			<tf:client value="#{param.PhoneNumber}"></tf:client>

		<tf:dial callerId="#{twimlClientController.twilioNumber}"
			<tf:number value="#{param.PhoneNumber}"></tf:number>

We use a CDI controller to understand if we have a number or client alias:

import javax.enterprise.context.RequestScoped;
import javax.inject.Inject;
import javax.inject.Named;

import org.twiliofaces.inject.configuration.TwilioNumber;
import org.twiliofaces.annotations.notification.PhoneNumber;

public class TwimlClientController

   String twilioNumber;

   String phoneNumber;

   public String getTwilioNumber()
      return twilioNumber;

   public boolean isClient()
      return isNumeric(phoneNumber);

   public static boolean isNumeric(String str)
      return str.matches("[+-]?\\d*(\\.\\d+)?");

comments powered by Disqus


Do you want collaborate with us?
Do you like this project?
Please send me an email!

Github code

Fork the twiliofaces repository on GitHub
and clone it to your local PC.

Get Started

Copy the Twiliofaces JAR file into your /WEB-INF/lib directory, or include all required Maven dependencies in your pom.xml!