You are viewing the Spanish (Mexico) site, but your language preference is set to English. Switch to English site →

Menu

Expand
Calificar esta página:

SDK de Voice para JavaScript: Cómo empezar

Estás viendo la documentación de la versión 2.X del SDK de Voice para JavaScript. Consulta la Guía de migración para aprender a migrar de 1.X a 2.X o consulta la documentación específica de 1.x.

¿Estás preparado para agregar comunicaciones por voz a la interfaz de tus aplicaciones web? Cuando completes uno de estos inicios rápidos, tendrás una aplicación totalmente funcional que podrá realizar y recibir llamadas telefónicas desde un navegador web.

Antes de empezar a crear, debes familiarizarte con el funcionamiento del SDK para JavaScript.

Aunque el SDK para JavaScript te permite realizar llamadas desde tu navegador, aun así deberás contar con algún tipo de servidor web de actividad en segundo plano que proporcione a tu aplicación Access Tokens (tokens de acceso) y brinde a Twilio instrucciones TwiML. Los repositorios de inicio rápido que se muestran en la siguiente lista incluyen servidores web en una variedad de marcos y lenguajes.

Elige tu marco de actividad en segundo plano preferido a continuación:

Un inicio rápido debería servir como punto de partida para crear una aplicación basada en Twilio. Una aplicación de inicio rápido no está diseñada para proporcionar una aplicación lista para su lanzamiento en producción ni para cubrir todos los casos de uso empresariales.

Para obtener más información sobre el SDK de Voice para JavaScript, consulta la documentación:

Inicio rápido sin servidores

Si deseas ver el SDK de Voice para JavaScript en acción usando el entorno sin servidores de Twilio Runtime, sigue las instrucciones que se indican a continuación.

1. Instala la herramienta CLI de Twilio

La interfaz de línea de comandos de Twilio, CLI, te permite interactuar con la API de Twilio desde tu terminal. Te permite gestionar y configurar todas tus herramientas Twilio, y para eso la vamos a utilizar en nuestro caso.

La manera recomendada de instalar twilio-cli en macOS es a través de Homebrew. Si aún no lo has instalado, visita el sitio web de Homebrew para ver las instrucciones de instalación y, luego, vuelve aquí.

Una vez que hayas instalado Homebrew, ejecuta el siguiente comando para instalar twilio-cli:

rew tap twilio/brew && brew install twilio

La manera recomendada de instalar twilio-cli es mediante el uso de Scoop, un instalador de línea de comandos para Windows. Si aún no lo has instalado, visita el sitio web de Scoop para ver las instrucciones de instalación y, luego, vuelve aquí.

Ten en cuenta que PowerShell necesitará ejecutarse como administrador para evitar los problemas de permisos habituales con la instalación a través de Scoop.

  1. Agrega el Bucket twilio-cli:
    scoop bucket add twilio-scoop https://github.com/twilio/scoop-twilio-cli
  2. Instala la app:
    scoop install twilio​

twilio-cli se puede instalar con la Herramienta Avanzada de Empaquetado (apt) que está disponible en la mayoría de las distribuciones, como Debian, Ubuntu y Mint.

Para hacerlo, ejecuta los siguientes comandos en tu terminal:

wget -qO- https://twilio-cli-prod.s3.amazonaws.com/twilio_pub.asc \
  | sudo apt-key add -
sudo touch /etc/apt/sources.list.d/twilio.list
echo 'deb https://twilio-cli-prod.s3.amazonaws.com/apt/ /' \
  | sudo tee /etc/apt/sources.list.d/twilio.list
sudo apt update
sudo apt install -y twilio

Para conocer otros métodos de instalación, consulta el Inicio rápido de la CLI de Twilio.

2. Instala el plugin serverless de la CLI de Twilio

La CLI de Twilio admite plugins que te brindan control y funcionalidades adicionales.

Vamos a instalar el plugin serverless (sin servidor) que te permite implementar funciones sin problemas desde tu equipo local en Twilio Runtime, el entorno serverless de Twilio.

Ejecuta el siguiente comando en tu terminal:

twilio plugins:install @twilio-labs/plugin-serverless

3. Crea tu aplicación mediante una plantilla de Function

El plugin serverless (sin servidores) permite inicializar una aplicación desde una plantilla. La plantilla que vamos a utilizar tiene todo lo que necesitamos:

  • una aplicación de interfaz;
  • una Twilio Function para generar Access Tokens (Tokens de acceso);
  • una Twilio Function para manejar las llamadas entrantes y dirigirlas a tu navegador;
  • una sección de admin para conectar tu cuenta.

Profundizaremos más en esto después de ponernos en marcha.

Ejecuta el siguiente comando en tu terminal para crear la app:

twilio serverless:init quickstart-voice-javascript-sdk --template="voice-javascript-sdk"

Esto creará un nuevo directorio llamado quickstart-voice-javascript-sdk que contendrá todo tu código.

Muévete a ese nuevo directorio con el siguiente comando:

cd quickstart-voice-javascript-sdk

4. Implementa tu aplicación

El plugin serverless te permite implementar código desde tu equipo local en Twilio Runtime. Una vez implementada, podrás acceder a tu aplicación alojada.

Para implementarla, ejecuta los siguientes comandos en tu terminal:

twilio serverless:deploy

Este comando creará un servicio, que es un contenedor para tus funciones, activos y entornos dentro de Twilio Runtime.

El comando mostrará todas las Twilio Functions y los activos que se han implementado en tu entorno de desarrollo.

Ejecuta twilio serverless:deploy cada vez que desees implementar cambios en la aplicación.

5. Inicializa tu entorno

Cuando implementaste la aplicación, te entregaron una lista de direcciones URL. Toma nota del prefijo, ya que es personalizado para tu implementación.

  1. Abre la página de admin en el navegador. Es la URL que termina con /admin/index.html.
  2. La contraseña es default (puedes cambiarla, lo haremos más adelante).
  3. Haz clic en el botón de la página de admin para inicializar el entorno.

El proceso de inicialización creará y conectará todas las herramientas necesarias para que funcionen las llamadas basadas en navegador.

Esta página ahora alojará una lista de comprobación que validará que tu entorno funcione correctamente. También proporciona enlaces útiles para llegar a los elementos que se inicializaron automáticamente.

Debes tener en cuenta que hay un error de comprobación, y eso se debe a que todavía no hemos cambiado la contraseña predeterminada. Lo haremos en breve, pero primero exploremos tu nueva aplicación.

6. Explora tu aplicación

La aplicación de ejemplo está ahora activa y en ejecución en /index.html. Ábrela en tu navegador.

Verás que se solicita un Access Token (Token de acceso) y deberías ver una notificación cuando lo reciba. Dirá "Twilio.Device está listo".

Adelante, utiliza la interfaz para realizar una llamada. Se te pedirá que otorgues acceso al micrófono y a los altavoces.

Ten en cuenta que la aplicación de ejemplo utiliza el nombre de usuario the_user_id. La Twilio Function que estamos usando para generar el Access Token (Token de acceso) no está usando ningún tipo de verificación de autenticación. Esto es algo que deberás implementar con tu sistema de gestión de usuarios.

7. Modifica la aplicación

Definitivamente deberíamos cambiar esa contraseña de admin. En tu equipo local, edita el archivo llamado .env.

Hay una entrada para ADMIN_PASSWORD; cámbiala por otra que no sea la predeterminada.

ADMIN_PASSWORD=SOME-NEW-PASSWORD-HERE

Guarda los cambios.

Implementa los cambios usando el siguiente comando en la terminal:

twilio serverless:deploy

Después de la implementación, vuelve a visitar la página /admin/index.html, utiliza tu nueva contraseña y verás que ahora las comprobaciones son todas verdes. ¡Lo hiciste!

Cada vez que realices un cambio en la aplicación de ejemplo, recuerda guardarlo y volver a implementarla.

8. Más información

Ahora que ya viste que las cosas funcionan, nos gustaría invitarte a explorar cómo funcionan.

Primero, dirígete a tu carpeta local y echa un vistazo a los dos archivos del lado del cliente assets/index.html y assets/quickstart.js. Ten en cuenta que el archivo index.html incluye la siguiente etiqueta script:

<script src="https://cdn.jsdelivr.net/npm/@twilio/voice-sdk@2.0.1/dist/twilio.min.js"></script>

Esta es la biblioteca SDK de Voice para JavaScript.

En el archivo quickstart.js, observarás que el dispositivo se inicializa con un token. Apunta a una función serverless (sin servidores) que se puede encontrar en /functions/voice-token.js. Este archivo acuña un Access Token (Token de acceso) en tu nombre basado en una clave de API REST y un secreto que se generó durante la inicialización. Verás que también contiene un VoiceGrant que activa las llamadas entrantes y salientes a través de una aplicación TwiML específica. Este es el SDK de Twilio Voice para JavaScript y puedes verlo en uso en el bien documentado archivo assets/quickstart.js.

Si vuelves a la página del administración, /admin/index.html, verás un enlace a una aplicación TwiML creada para ti. Una aplicación TwiML te permite especificar lo que ocurre cuando se realiza y recibe una llamada. TwiML es Twilio Markup Language, un lenguaje que instruye a Twilio respecto a qué hacer con la llamada en un momento determinado.

Proporcionamos este TwiML a través de una Function que puedes encontrar en functions/client-voice-twiml-app.js. Hemos programado tu aplicación TwiML para que ejecute esta función en llamadas de voz entrantes y salientes. Esta función puede marcar a un cliente en la misma aplicación o a un número. Al realizar la llamada saliente, utilizará tu CALLER_ID.

Calificar esta página:

¿Necesitas ayuda?

Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

        
        
        

        Gracias por tus comentarios.

        Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

        Enviando tus comentarios…
        🎉 Gracias por tus comentarios.
        Se produjo un error. Inténtalo de nuevo.

        Gracias por tus comentarios.

        ¡Recomiéndanos y gana USD 10 en 3 pasos sencillos!

        Paso 1

        Obtén un enlace

        Obtén un enlace gratuito de referencia personal aquí

        Paso 2

        Regala USD 10

        Tu usuario se registra y actualiza mediante el enlace

        Paso 3

        Obtén USD 10

        1250 SMS gratuitos
        O 1000 minutos gratuitos de voz
        O 12 000 chats
        O más