Hola, esta vez les quiero compartir una aplicación para smartphones Android, la cual sirve para obtener los canales SIP activos de nuestro servidor Asterisk y poder monitorearlos a través del softphone que tengamos en nuestro celular.
Screenshots:
ICON
SPLASH SCREEN
First RUN
SETTINGS
SETTINGS 2
HOME / GET CHANS
FETCHING
NO CHANS
ACTIVE CHAN
FORBIDDEN ID
ABOUT
Requisitos:
Un smartphone con un cliente SIP ya registrado.
Android >= 2.3.3 (GingerBread).
Habilita la instalación de paquetes no firmados en tu teléfono: AJUSTES--->APLICACIONES--->ORIGENES DESCONOCIDOS
Instalar la aplicación en el smartphone.
Instalar la GUI en el servidor Asterisk.
Instalación:
Descarga el APK para tu celular desde este enlace: Descargar APK
Uno de los primeros artículos de este sitio fue crear la notificación de correo tipo HTML para los buzones de Voz que recibimos en Asterisk. Ahora ese script lo he adaptado para que se pueda usar con FreePBX > 2.10.
Hola, en este artículo vamos a crear un sistema de atención a cliente usando las herramientas WebRTC-SIPML5 y Elastix junto con su addon de Call Center. La idea general es generar 0 costos entre el usuario y nuestro centro de atención. Es por esto que vamos a usar WebRTC y Elastix dos herramientas open source las cuales van a interactuar usando nuestra conexión de internet.
Paso 1.
Instalar el soporte de WebRTC para el módulo de Call Center de Elastix que publiqué anteriormente.
Paso 2.
Crear una cola de atención:
Crear al menos 2 dispositivos SIP. Menú PBX--->Extensions.
Crear una cola de atención. Menú PBX--->Queue.
Asignar a la nueva cola de atención uno de los dispositivos SIP como miembro dinámico y usando el prefijo S, por ejemplo, para el dispositivo 1500 quedará de la siguiente manera: S1500,0
Seleccionar el 'ring strategy'(estrategia de timbrado) con 'fewestcalls'(menos llamadas recibidas).
Añadir los Anuncios necesarios.
Aplicar los cambios.
Paso 3.
Configurar el Módulo de Call Center de Elastix, para recibir llamadas:
Ir al menú 'Agent Options'(Opciones de agente).
Crear al menos una 'callback extension'(Extension callback). Tiene que coincidir con el dispositivo que se añadió como miembro a la cola de atención.
Ir a 'Ingoing calls'(llamadas entrantes)---> Queues(Colas).
Seleccionar la Cola de atención previamente creada.
Paso 4.
Crear nuestra página web que será desde donde nuestros usuarios van a contactarnos(el diseño de la página web queda al gusto y capacidades de cada quien).
Para usar la API de SIPML5 pueden checar el ejemplo online con el que ellos cuentan o su documentación. Les dejo el código con el que llevo trabajando en algunos proyectos y el cual estoy usando en este artículo:
<head>
<title>Navaismo's ElastixCC-WebRTC</title>
<!-- SIPMl5 API for WEBRTC calls -->
<script src="js/SIPml-api.js"></script>
<link href="css/bootstrap.min.css" media="screen" rel="stylesheet"></link>
</head>
<script>
//Variables
var mySipStack;
var mycallSession;
var myregisterSession;
// readycallback for INIT
var readyCallback = function(e){
console.log("engine is ready");
//CHeck if the SIPml start
if(SIPml.isInitialized() == 1){
console.log("Done to initialize the engine");
//If the stack is started, create the sip stack
startSipStack();
}else{
//If not started display console msg
console.log("Failed to initialize the engine");
}
}
// error callback for INIT
var errorCallback = function(e){
console.error('Failed to initialize the engine: ' + e.message);
}
//INIT SIPML5 API
SIPml.init(readyCallback, errorCallback);
//Here we listen stack messages
function listenerFunc(e){
//Log incoming messages
tsk_utils_log_info('==stack event = ' + e.type);
switch(e.type){
//If failed msg or error Log in console & Web Page
case 'failed_to_start': case 'failed_to_stop': case 'stopping': case 'stopped': {
console.log("Failed to connect to SIP SERVER")
mycallSession = null;
mySipStack = null;
myregisterSession = null;
$("#mysipstatus").html('');
$("#mysipstatus").html('<i>Disconnected: </i>'+e.description);
break;
}
//If the msg is 'started' now try to Login to Sip server
case 'started': {
console.log("Trying to Login");
login();//function to login in sip server
//Display msg in the web page
$("#mysipstatus").html('');
$("#mysipstatus").html('<i>Trying to Connect</i>');
break;
}
//If the msg 'connected' display the register OK in the web page
case 'connected':{
$("#mysipstatus").html('');
$("#mysipstatus").html('<i>Registered with Sip Server</i>');
break;
}
//If the msg 'Sent request' display that in the web page---Pattience
case 'sent_request':{
$("#mysipstatus").html('');
$("#mysipstatus").html('<i>'+e.description+'</i>');
break;
}
//If the msg 'terminated' display that on the web---error maybe?
case 'terminated': {
$("#mysipstatus").html('');
$("#mysipstatus").html('<i>'+e.description+'</i>');
break;
}
//If the msg 'i_new_call' the browser has an incoming call
case 'i_new_call': {
if (mycallSession) {
// do not accept the incoming call if we're already 'in call'
e.newSession.hangup(); // comment this line for multi-line support
}else{
mycallSession = e.newSession;
//Change buttons values
btnCall.value = 'Answer';
btnHangUp.value = 'Reject';
btnCall.disabled = false;
btnHangUp.disabled = false;
//Start ringing in the browser
startRingTone();
//Display in the web page who is calling
var sRemoteNumber = (mycallSession.getRemoteFriendlyName() || 'unknown');
$("#mycallstatus").html("<i>Incoming call from [<b>" + sRemoteNumber + "</b>]</i>");
showNotifICall(sRemoteNumber);
}
break;
}
case 'm_permission_requested':{
break;
}
case 'm_permission_accepted':
case 'm_permission_refused': {
if(e.type == 'm_permission_refused'){
btnCall.value = 'Call';
btnHangUp.value = 'HangUp';
btnCall.disabled = false;
btnHangUp.disabled = true;
mycallSession = null;
stopRingbackTone();
stopRingTone();
$("#mysipstatus").html("<i>" + s_description + "</i>");
}
break;
}
case 'starting': default: break;
}
}
//Function to Listen the call session events
function calllistener(e){
//Log all events
tsk_utils_log_info('****call event**** = ' + e.type);
switch(e.type){
//Display in the web page that the call is connecting
case 'connected': case 'connecting': {
var bConnected = (e.type == 'connected');
if (e.session == myregisterSession) {
$("#mycallstatus").html("<i>" + e.description + "</i>");
}else if (e.type == 'connecting') {
$("#mycallstatus").html("<i>" + e.description + "</i>");
}else if (e.session == mycallSession) {
btnHangUp.value = 'HangUp';
if (bConnected) {
stopRingbackTone();
stopRingTone();
}
}
break;
}
//Display in the browser teh call is finished
case 'terminated': case 'terminating': {
if (e.session == mycallSession) {
mycallSession = null;
myregisterSession = null;
$("#mycallstatus").html("<i>" + e.description + "</i>");
stopRingbackTone();
stopRingTone();
}else if (e.session == mycallSession) {
btnCall.value = 'Call';
btnHangUp.value = 'HangUp';
btnCall.disabled = false;
btnHangUp.disabled = true;
mycallSession = null;
stopRingbackTone();
stopRingTone();
}
break;
}
// future use with video
case 'm_stream_video_local_added': {
if (e.session == mycallSession) {
}
break;
}
//future use with video
case 'm_stream_video_local_removed': {
if (e.session == mycallSession) {
}
break;
}
//future use with video
case 'm_stream_video_remote_added': {
if (e.session == mycallSession) {
}
break;
}
//future use with video
case 'm_stream_video_remote_removed': {
if (e.session == mycallSession) {
}
break;
}
//added media audio todo messaging
case 'm_stream_audio_local_added':
case 'm_stream_audio_local_removed':
case 'm_stream_audio_remote_added':
case 'm_stream_audio_remote_removed': {
stopRingTone();
stopRingbackTone();
break;
}
//If the remote end send us a request with SIPresponse 18X start to ringing
case 'i_ao_request':{
var iSipResponseCode = e.getSipResponseCode();
if (iSipResponseCode == 180 || iSipResponseCode == 183) {
startRingbackTone(); //function to start the ring tone
$("#mycallstatus").html('');
$("#mycallstatus").html('<i>Remote ringing...</i>');
$("#btnHangUp").show();
}
break;
}
// If the remote send early media stop the sounds
case 'm_early_media': {
if (e.session == mycallSession){
stopRingTone();
stopRingbackTone();
$("#mycallstatus").html('');
$("#mycallstatus").html('<i>Call Answered</i>');
}
break;
}
}
}
//function to send the SIP Register
function login(){
//Show in the console that the browser is trying to register
console.log("Registering");
//create the session
myregisterSession = mySipStack.newSession('register', {
events_listener: { events: '*', listener: listenerFunc } // optional: '*' means all events
});
//send the register
myregisterSession.register();
}
// function to create the sip stack
function startSipStack(){
//show in the console that th browser is trying to create the sip stack
console.info("attempting to start the SIP STACK");
//stack options
mySipStack = new SIPml.Stack({
realm: 'asterisk',
impi: 'usuario',
impu: 'sip:usuario@myip',
password: 'mipassword', // optional
display_name: 'TS', // optional
websocket_proxy_url: 'ws://miip:10060', // optional
outbound_proxy_url: 'udp://miip:5060', // optional
//ice_servers: [{ url: 'stun:stun.l.google.com:19302'}, { url:'turn:user@numb.viagenie.ca', credential:'myPassword'}], // optional
enable_rtcweb_breaker: true, // optional
enable_click2call: false, // optional
events_listener: { events: '*', listener: listenerFunc }, //optional
sip_headers: [ //optional
{name: 'User-Agent', value: 'DM_SIPWEB-UA'},
{name: 'Organization', value: 'Digital-Merge'}
]
});
//If the stack failed show errors in console
if (mySipStack.start() != 0) {
console.info("Failed to start Sip Stack");
}else{
console.info("Started the Sip Stack");
}
}
//Fucntion to call/answer
function call(){
var calltype;
if(mySipStack){
//create the session to call
mycallSession = mySipStack.newSession('call-audio', {
audio_remote: document.getElementById('audio_remote'),
audio_local: document.getElementById('audio_local'),
video_remote: document.getElementById('video_remote'),
video_local: document.getElementById('video_local'),
events_listener: { events: '*', listener: calllistener } // optional: '*' means all events
});
$("#mycallstatus").show();
//call using the number 80000
mycallSession.call("80000");
}else if(!mySipStack){
alert('Stack not ready!');
//If the textbox is empty and the button call is ANSWER, then is a incoming call
}else if(flag =='Answer' && mySipStack && mycallSession){
stopRingbackTone();
stopRingTone();
//Accept the session call
mycallSession.accept({
audio_remote: document.getElementById('audio_remote'),
audio_local: document.getElementById('audio_local'),
events_listener: { events: '*', listener: calllistener } // optional: '*' means all events
});
}
}
//function to hangup the call
function hangup(){
//If exist a call session, hangup and reset button values
if(mycallSession){
mycallSession.hangup({events_listener: { events: '*', listener: calllistener }});
stopRingbackTone();
stopRingTone();
btnCall.value = 'Call';
btnHangUp.value = 'HangUp';
$("#callnumber").attr('value','');
$("#mycallstatus").html("Call Terminated")
$("#btnHangUp").hide();
//destroy the call session
mycallSession = null;
}else{
$("#callnumber").attr('value','');
}
}
//Fucntion to send DTMF frames
function sipSendDTMF(c){
if(mycallSession && c){
if(mycallSession.dtmf(c) == 0){
try { dtmfTone.play(); } catch(e){ }
}
}else{
var lastn = $("#callnumber").val();
$("#callnumber").val( lastn + c );
try { dtmfTone.play(); } catch(e){ }
}
}
/**************** fucntion to play sounds *******************/
function startRingTone() {
try { ringtone.play(); }
catch (e) { }
}
function stopRingTone() {
try { ringtone.pause(); }
catch (e) { }
}
function startRingbackTone() {
try { ringbacktone.play(); }
catch (e) { }
}
function stopRingbackTone() {
try { ringbacktone.pause(); }
catch (e) { }
}
function showNotifICall(s_number) {
// permission already asked when we registered
if (window.webkitNotifications && window.webkitNotifications.checkPermission() == 0) {
if (oNotifICall) {
oNotifICall.cancel();
}
oNotifICall = window.webkitNotifications.createNotification('images/sipml-34x39.png', 'Incaming call', 'Incoming call from ' + s_number);
oNotifICall.onclose = function () { oNotifICall = null; };
oNotifICall.show();
}
}
</script>
<div class="col">
<h2>Llamenos Usando WebRTC</h2>
ll <audio id='audio_remote'></audio>
<button class="btn btn-primary" id="btnCall" onclick="call()" >Click Aquí Para Llamarnos!</button>
<br>
<button class="btn btn-danger hide" id="btnHangUp" onclick="hangup()" >Colgar Llamada</button><br>
<span class="label hide" id="mycallstatus"></span>
<br>
<span class="label label-inverse" id="mysipstatus">Si ve esta etiquete usted necesita usar Chrome para llamar</span>
<br><br>
<p style="font-size: 10px;">WebRTC es una nueva tecnología que usa el Navegador Web para establecer una llamada, en este caso la llamada es de Audio y Usted necesita contar con una diadema(o bien micrófono y bocinas) para llamarnos sin costo alguno.<br>Esta tecnología por ahora solo es compatible con el navegador Chrome para descargarlo <a href="">de click aqui.</a>
</div>
<div class="col">
<!-- Audios -->
<audio id="audio_remote" autoplay="autoplay" />
<audio id="ringtone" loop src="sounds/ringtone.wav" />
<audio id="ringbacktone" loop src="sounds/ringbacktone.wav" />
<audio id="dtmfTone" src="sounds/dtmf.wav" />
Si van a usar el ejemplo anterior sólo tienen que editar el siguiente código con los datos de su dispositivo SIP.
Y lo más importante es apuntar el número de la llamada hacia nuestra cola de atención previamente creada, eso se logra editando el código(en éste ejemplo la cola creada tiene el número 80000):
//call using the number 80000
mycallSession.call("80000");
Al finalizar tendrán algo como esto:
Paso 5.
Probar el sistema. Video Demo(sin audio por problemas técnicos):
Notas.
Es claro que este ejemplo sólo usa un peer SIP, sin embargo estos son algunos hints para crear múltiples usuarios.
Crear una página web de atención donde primero verifique los peers registrados.
Basados en el punto anterior elegir qué peer registrar.
Crear un formulario para que el usuario registre algunos datos básicos como su nombre y pasar estos datos con el peer de registro.
Adaptar realtime o bien escribir directamente en la base de datos de asterisk para crear peers 'dinámicos'.
Crear una página web para clientes/usuarios registrados y crear extensiones/peers basados en estos datos, así mismo se pueden crear campañas entrantes con estos datos.
El registro no es necesario realmente, pero de esta forma demuestro que es posible interactuar con asterisk y WebRTC.
WebRTC no necesita de Asterisk para lograr esto, de hecho lo puede hacer Peer to Peer(punto a punto) como lo haría la fantástica aplicación llamada Twelephone, sin embargo este artículo esta diseñado para integrar un sistema de atención online con Elastix y su módulo de call center.
Se puede añadir video a las llamadas ;).
Asterisk Plano también es capaz de esto(y más) usando extensiones directamente o bien una cola de atención. Es solo que estoy de buenas con Elastix. :D
Para aquellos que no sólo quieran tener soporte en Chrome existe una extensión que permite a los navegadores como Internet Explorer y Opera funcionar con WebRTC se llama webrtc4all.
Hola, quienes me conocen saben que yo prefiero usar Asterisk Plano sobre cualquier cosa. Cuando la gente me dice que quieren usar sí o sí una GUI para administrar su asterisk porque no se quieren meter en líos, recomiendo FreePBX. Son pocas las veces que me veo en la necesidad de usar Elastix o recomendarlo de hecho me puedo considerar hasta cierto punto un 'hater' de esa Distro; sin embargo, como dice la canción: "...No todo es blanco, O negro: es gris Todo depende del matiz...", debo decir que una de las cualidades más atractivas de Elastix es su Módulo de Call Center. El cual permite crear campañas de Salida o de Entrada de manera más que sencilla y que su operación es muy pulcra, sin contar además que, integrar nuestro propio CRM es sumamente sencillo.
Este año vendrá de nueva cuenta el ElastixWorld a México y esta vez si pienso asistir ya que dejar pasar las conferencias de las personalidades que vendrán sería un error y más si tomo en cuenta que asistir al Astricon en Atlanta es prácticamente imposible para mi. Es por esta razón que decidí "contribuir"(si se le puede llamar así a una simple edición de código) un poquito al proyecto de Elastix, no quiero ir solo a recibir información valuable al ElastixWorld sin haber "contribuido" en algo.
Elegí un tema de "moda": WebRTC y una herramienta útil como el Módulo de Call Center que combinadas podrían tener mucho éxito-según yo-. Así que me di a la tarea de integrar la fantástica API SIPML5 y el Gateway WebRTC2SIP ambos de Doubango a una instalación de Elastix.
Notas sobre la Integración y Operación.
Se requiere una versión de 'libtool' más reciente de modo que se instala la version 2.4.2
Se requiere instalar el Gateway WebRTC2SIP para su operación ya que la versión de Asterisk no soporta WebRTC. La conexión es ws.
Solo funciona correctamente con el explorador Google Chrome.
Se modifican algunos archivos(consideren respaldarlos antes) utilizados por Elastix entre ellos:
Estilos para botones del Teléfono: /var/www/html/modules/agent_console/themes/default/css/bootstrap.css
Sonidos utilizados por el Teléfono: /var/www/html/modules/agent_console/themes/default/sounds
No se puede marcar desde el Teléfono. Esto lo hice así pensando en que el agente sólo debe de recibir las llamadas de una cola Entrante o una campàña del Dialer(Se puede modificar a futuro).
Si no se esta en llamada y se presiona el botón (CALL/Answer) se enviará la llamada al buzón de voz del Agente.
La integración esta hecha para trabajar solamente en modo 'Agent CallBack'. Esto se debe a la facilidad de tener el Teléfono registrado en 'Stand-by' una vez que se accedió a la consola del Agente.
El gateway WebRTC2SIP corre bajo una sessión 'screen' con el comando:
Para Salir de la sesión sin detener el gateway usar la combinación de teclas CRTL+A+D.
Para detener el Gateway, entrar en la sesión y escribir 'quit'+ENTER.
Instalación.
Actualización 17/Sep/2013:
Este es el último RPM usado para adaptar chat y marcado libre al módulo de call center.
Si se cuenta con las versiones más recientes de Elastix y el módulo de Call Center instalar los RPMs hasta el punto 14 y después ejecutar los siguientes comandos :
Los pasos anteriores corrigen el bug que elimina los submenús de la barra de Menús y corrige también que no se registre el cliente SIPML5.
Instalación antigua:
Descargar el tarball desde este enlace. Y extraer el contenido con el comando:
# tar zxvf Elastix_CC_ML5.tar.gz
Cambiar al directorio creado con:
# cd ccml5
Instalar el gateway webrtc2sip.
Para instalar el Gateway ejecutar el siguiente comando:
# ./install_wrtcgw.sh
Esto instalará el framework de doubango, las dependencias y el gateway, dependiendo de la velocidad del equipo puede tomar desde 30 minutos hasta un par de horas.
Añadir el Teléfono WebRTC a la consola de Agente.
Para integrar el teléfono a la consola de agente ejecutar el siguiente comando:
# ./install_webfiles.sh
Si no se ha instalado el Módulo de Call Center previamente, el script preguntará si desean instalarlo. Basta presionar Y+enter para que así lo haga.
Inicio de Sesión Consola de Agente modo 'Callback login'
Consola de Agente con el Telefóno WebRTC Insertado
Demo.
Para configurar y usar el Módulo del Call Center de Elastix pueden usar el manual oficial que esta en este enlace Recuerden que el Teléfono WebRTC solo trabajará correctamente en el modo 'callback login' en el manual se refieren a él como modo dinámico.
Yo ya tengo preparado una Cola de Entrada sin datos y una Campaña saliente con un CRM Custom. Y este es el Resultado:
Inbound Queue:
Outgoing Campaign:
Feedback: Como nada en esta vida es perfecto cualquier feedback se agradecerá. ;)
Hola, he creado un script para instalar el media gateway de Doubango WebRTC2SIP en un sistema FreePBX basado en CentOS, Fedora o La Distro de FreePBX.
El gateway permitirá de manera sencilla tener integración con WebRTC basado en la API SIPML5 con conexión a Asterisk; además de que permite el funcionamiento correcto del módulo emergencyphones-0.1.b3 creado anteriormente para dotar de un télefono web a los usuarios y administradores de FreePBX.
También he creado un módulo para poder cambiar la configuración del gateway WebRTC2SIP desde la Página web de FreePBX.
Vista de la página de configuración del Gateway con Warning de Archivo.
Vista de la Página con Hint y Configuración completa.
El paquete que contiene las instrucciones de instalación, el script para instalar el gateway y ambos módulos lo pueden descargar de este enlace.
Hola, aquí les dejo un módulo(bastante mal hecho pero funcional) que provee un teléfono de software utilizando SIPML5 embebido en FreePBX.
La idea de este módulo es dar a los usuarios/clientes la posibilidad de un teléfono de emergencia en caso que las troncales locales fallen. El teléfono necesita registrarse a un server SIP remoto para poder operar correctamente.
La instalación es bastante sencilla basta con ir a MODULE ADMIN---->Upload y seleccionar el modulo para instalarlo.
Una vez instalado se creara un enlace dentro de la categoría Conectividad(Connectivity).
Las pruebas las he hecho con mi FreePBX 2.11 registrando a mi Asterisk en la RaspberryPi usando el gateway webrtc2Sip de doubango. Todo el feedback es apreciado.
En el futuro espero mejorar el código del módulo.
Imagen del Modulo:
Actualización 17/04/2013:
Usando el archivo CSS del dashboard actualicé la apariencia, para que se viera más decente.
Dejo un vídeo de como se instala el modulo y su funcionamiento:
Actualización 22/04/2013:
Se añadió esta función a la página del usuario(ARI) sin opción a edición de datos. Por lo que el administrador deberá registrar por primera vez el módulo.
Vista de la Página de Usuario(ARI).
Vista de la Página Admin sin registrar.
Vista de la Página de Admin con detalles.
Vista de la página de Admin teléfono Registrado.
Actualización 29/04/2013:
Se añadió el al módulo de ARI un softphone que se registra usando las credenciales del usuario, registrándose en el servidor local.
Cambio el nombre del módulo y los menús en la sección ARI.
