{"id":2250,"date":"2023-09-18T08:10:47","date_gmt":"2023-09-18T08:10:47","guid":{"rendered":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/?p=2250"},"modified":"2023-09-18T08:57:10","modified_gmt":"2023-09-18T08:57:10","slug":"primeros-pasos-con-azure-communication-service-en-flutter-para-hacer-video-llamadas","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/primeros-pasos-con-azure-communication-service-en-flutter-para-hacer-video-llamadas\/","title":{"rendered":"Primeros pasos con Azure Communication Service en Flutter para hacer videollamadas"},"content":{"rendered":"

\"\" En este post vamos a ver c\u00f3mo comenzar a integrar Azure Communication Service<\/strong> en nuestras aplicaciones. Crearemos el servicio en Azure y lo utilizaremos desde una aplicaci\u00f3n Android\/iOS creada con flutter<\/strong>.<\/p>\n

<\/p>\n

<\/p>\n

\u00a1\u00a1\u00a1Comenzamos!!! <\/p>\n

<\/p>\n

<\/p>\n

\u00bfQu\u00e9 vamos a crear?<\/h2>\n

<\/p>\n

<\/p>\n

Para poneos en contexto, aqu\u00ed vemos el resultado final de la app que vamos a crear.<\/p>\n

<\/p>\n

<\/p>\n

\"Aplicaci\u00f3n<\/a><\/figure>\n

<\/p>\n

<\/p>\n

N\u00f3tese que las opciones que nos ofrece Communication Service<\/em> son tan amplias que es imposible abordarlas todas en un art\u00edculo, por lo que, como he indicado en el t\u00edtulo, aqu\u00ed vamos a dar nuestros primeros pasos. Nos permite el env\u00edo de email, SMS, llamadas de voz, chat y videollamadas. Concretamente, vamos a tratar la llamada grupal, aunque utilizando este servicio tambi\u00e9n se podr\u00eda implementar llamadas punto a punto.<\/p>\n

<\/p>\n

<\/p>\n

Creando el servicio en Azure<\/h2>\n

<\/p>\n

<\/p>\n

Crear este servicio es bastante sencillo. Lo primero que tenemos que hacer es ir a nuestro portal de Azure<\/strong> y crear un nuevo recurso<\/strong>.<\/p>\n

<\/p>\n

<\/p>\n

\"Portal<\/a><\/figure>\n

<\/p>\n

<\/p>\n

El recurso que nos interesa es Communication Service. <\/em>Una vez localizado, lo creamos e informamos toda la informaci\u00f3n que se nos solicita.<\/p>\n

<\/p>\n

<\/p>\n

\"Creaci\u00f3n<\/a><\/figure>\n

<\/p>\n

<\/p>\n

\"Datos<\/a><\/figure>\n

<\/p>\n

<\/p>\n

Una vez creado el servicio, lo que vamos a necesitar para empezar a utilizarlo es la cadena de conexi\u00f3n<\/strong>, que podemos encontrarla dentro de la secci\u00f3n Keys, <\/em>que la utilizaremos para obtener los tokens<\/em> utilizados por las aplicaciones cliente que utilizan el servicio.<\/p>\n

<\/p>\n

<\/p>\n

Precios del servicio<\/h2>\n

<\/p>\n

<\/p>\n

Antes de continuar, creo que es importante conocer el pricing<\/em> de este servicio, por lo que aqu\u00ed dejo una tabla con los datos para el oeste de Europa.<\/p>\n

<\/p>\n

<\/p>\n

\"\"<\/a><\/figure>\n

<\/p>\n

<\/p>\n

Asimismo, aqu\u00ed os dejo el link con todos los detalles: https:\/\/azure.microsoft.com\/es-es\/pricing\/details\/communication-services\/<\/a><\/p>\n

<\/p>\n

<\/p>\n

Obteniendo token de acceso<\/h2>\n

<\/p>\n

<\/p>\n

Dado que el objetivo de este post es hacer una introducci\u00f3n a Azure Communication Service<\/em> y empezar a usarlo en flutter<\/em>, no nos hemos preocupado por la implementaci\u00f3n de la seguridad. Por ello, hemos creado un Azure Function<\/strong> que, utilizando la cadena de conexi\u00f3n del servicio, siempre devuelve un token nuevo, sin hacer ninguna comprobaci\u00f3n de seguridad.<\/p>\n

<\/p>\n

<\/p>\n

using Azure;\r\nusing Azure.Communication;\r\nusing Azure.Communication.Identity;\r\nusing Azure.Core;\r\nusing Microsoft.Azure.Functions.Worker;\r\nusing System.Text.Json;\r\n\r\nnamespace AuthFunction\r\n{\r\n    public class AuthFunction\r\n    {\r\n\r\n        [Function(\"function\")]\r\n        public static async Task<object> Run([HttpTrigger(AuthorizationLevel.Anonymous, \"get\", Route = null)] HttpRequestMessage req)\r\n        {\r\n            string connectionString = \"{YOUR_CONNECTION_STRING}}\";\r\n            CommunicationIdentityClient identityClient = new CommunicationIdentityClient(connectionString);\r\n            Response<CommunicationUserIdentifier> user = await identityClient.CreateUserAsync();\r\n            Response<AccessToken> userToken = await identityClient.GetTokenAsync(user, new[] { CommunicationTokenScope.VoIP });\r\n\r\n            JsonSerializerOptions options = new JsonSerializerOptions\r\n            {\r\n                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,\r\n                WriteIndented = true\r\n            };\r\n            return JsonSerializer.Serialize(userToken.Value, options);\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n
<\/p>\n
<\/p>\n
Por otro lado, si no quer\u00e9is implementar est\u00e1 funci\u00f3n, tambi\u00e9n se puede obtener un token<\/em> para hacer pruebas desde el propio servicio en el portal de Azure<\/em>, en el apartado Identities & User Access Tokens<\/em><\/p>\n
<\/p>\n
<\/p>\n
\"Generando<\/a><\/figure>\n
<\/p>\n
<\/p>\n
Creando la aplicaci\u00f3n m\u00f3vil con Flutter<\/h2>\n
<\/p>\n
<\/p>\n
Una vez que tenemos el servicio y la funci\u00f3n de Azure<\/em> para servirnos tokens<\/em>, es el momento de crear los diferentes clientes que se conectar\u00e1n a este servicio.<\/p>\n
<\/p>\n
<\/p>\n
Dado que, en el momento de escribir este post, no hay ning\u00fan paquete que nos permita operar con Communication Service <\/em>directamente en flutter<\/em>, vamos a utilizar el SDK nativo. Por lo que vamos a dividir esta secci\u00f3n en tres puntos. En el primero de ellos, veremos todo el c\u00f3digo escrito en Dart<\/strong>, en la parte propia de flutter<\/em>, la cual ser\u00e1 com\u00fan a la aplicaci\u00f3n Android y iOS<\/strong>. Y en las otras dos escribiremos todo lo relacionado con la parte de iOS y Android<\/strong> (escrito en swift y<\/strong> kotlin<\/strong>, respectivamente).<\/p>\n
<\/p>\n
<\/p>\n
Desarrollando parte com\u00fan en Dart<\/h3>\n
<\/p>\n
<\/p>\n
El primer paso que vamos a dar es el de a\u00f1adir los paquetes necesarios<\/strong> para hacer la app:<\/p>\n
<\/p>\n
<\/p>\n