Detectar velocidad de conexión en Flash

Flash nos permite hacer una recopilación de datos acerca de nuestro usuario. Podemos obtener información acerca del Sistema Operativo vigente en su computador, también podemos saber su resolución de pantalla. A pesar de que hoy en día la mayoría de las personas cuentan con un acceso a internet de alta velocidad, existen aquellos que se conectan vía Módem, y crear aplicaciones para aquellos con altas velocidades, sería discriminar al otro resto de los usuarios. Bien, teniendo esto como fundamento, podríamos crear aplicaciones mas eficientes y destinadas a todos los usuarios.

Este tutorial nos enseña una manera, (de las tantas) de obtener la velocidad de descarga del usuario. ¿De que nos sirve? Pues sirve para muchas cosas. Relacionado con aplicaciones multimedia para la web, contar con este dato nos permite modificar ciertos valores, como por ejemplo el tiempo de buffer. Aquellos usuarios que cuenten con altas velocidades de descarga, requerirán un menor tiempo de buffer. Cambiando estas variables se evita que los videos y/o audios ,que son reproducidos mediante streaming, se entrecorten. Esto favorece una visualización fluida (en el caso de los videos), como tambien un audio parejo.

Método

En el ejemplo siguiente, emplearemos un método sencillo para estimar la velocidad de descarga del usuario. Aunque este dato obtenido no es el 100% exacto, se aproxima bastante a los valores reales.

El proceso de medición es simple. Cargaremos una imagen pequeña, tomaremos el tiempo que tarda en cargarse y lo dividimos por el peso de la misma. Esto lo realizaremos dos veces, para tener un promedio y para que el valor sea mas preciso. Hay que tener en cuenta que la imagen a cargar debe ser pequeña. Con unos 100kb o menos estaría bien. Recuerden que la cargaremos dos veces. Si es muy pesada, nos haría lenta la aplicación en aquellos equipos con conexiones débiles. Bien, hasta aquí nada complicado. Los conceptos son simples y fáciles, asi que, ¡Manos a la obra!

Codificación

Para realizar las mediciones utilizaremos la clase MovieClipLoader(). Dispondremos una etiqueta de texto en el escenario para mostrar los eventos y la velocidad. En mi caso le di un nombre de instancia "texto" y le asigné el tipo "Dinámico". En caso de querer agregar mas diseño, correrá por tu cuenta y gusto.

stop();
       //primero creamos las variables que vamos a emplear
   
       //Primera medicion:
       var tiempo_inicial_1:Number; //tiempo inicial de descarga - medicion 1 
       var tiempo_final_1:Number; //tiempo final de descarga - medicion 1 
       var tiempo_total_1:Number; //promedio de tiempos - medicion 1 
       var promedio_1:Number; //promedio de velocidad - medicion 1 
   
       //Segunda medicion:
       var tiempo_inicial_2:Number;
       var tiempo_final_2:Number;
       var tiempo_total_2:Number;
       var promedio_2:Number;
   
       //Resultados:
       var velocidad:Number; //promedio de velocidad entre las mediciones
   
       //Creamos un MC vacio para alojar una imagen:
       this.createEmptyMovieClip("contenedor", this.getNextHighestDepth());
       //Creamos el objeto MovieClipLoader:
       carga = new MovieClipLoader();

Una vez que ya tenemos todo declarado, procedemos a realizar la primera medición. Lo primero que haremos es es tomar el tiempo de inicio de la carga. Para eso usamos getTimer():

tiempo_inicial_1 = getTimer()/1000; //nos devuelve el tiempo en segundos 

Ahora usamos los eventos de la clase MovieClipLoader() para hacer algunos cálculos y establecer la ruta de carga:

 carga.onLoadStart = function(target_mc) {
     texto.text = "Detectando..."; //mostramos un mensaje de que estamos midiendo la velocidad
 };

Una vez que se completó la carga de la imagen, debemos obtener el tiempo transcurrido desde el inicio de la carga y calcular el tiempo total que nos llevó cargar la imagen. Con estos valores, ya estamos en condiciones de obtener una velocidad "parcial". Esta velocidad será el resultado de la división entre lo cargado y el tiempo empleado en dicha carga. El resultado será una relación tamaño/tiempo (kb/segundos):

 carga.onLoadComplete = function(target_mc) {
     tiempo_final_1 = getTimer()/1000; //obtenemos el tiempo final en segundos 
     tiempo_total_1 = tiempo_final_1-tiempo_inicial_1; //calculamos el tiempo total 
     promedio_1 = (target_mc.getBytesTotal()/1024)/tiempo_total_1; //calculamos la velocidad expresada en kb/seg 
     gotoAndStop(2); //pasamos al segundo frame para la segunda medicion 
 }; 

Ahora solo nos queda cargar la imagen en el clip creado con anterioridad. Al la ruta de la imagen, le agregaremos unos parámetros al fin de evitar la caché del browser:

carga.loadClip("fotografia.jpg?noCache="+new Date().getTime(), "contenedor"); //cargamos la imagen

Bien! ya tenemos nuestra primera medición y un valor parcial. Ahora nos queda por realizar otra carga y obtener otro valor, para luego hacer un promedio. Esta medición será similar a la anterior,solo que haremos unos calculos de la velocidad final y mostraremos el resultado mediante un mensaje:

stop();
 tiempo_inicial_2 = getTimer()/1000; 
 
 carga.onLoadStart = function(target_mc) {
     texto.text = "Verificando...";
 };
 
 carga.onLoadComplete = function(target_mc) {
     tiempo_final_2 = getTimer()/1000;
     tiempo_total_2 = tiempo_final_2-tiempo_inicial_2;
     promedio_2 = (target_mc.getBytesTotal()/1024)/tiempo_total_2;
     velocidad = Math.round((promedio_1+promedio_2)/2); //hacemos un promedio de las velocidades parciales 
     texto.text = velocidad+" kbps"; //mostramos el resultado 
     target_mc._visible = false; //ocultamos la imagen 
 };
 
 carga.loadClip("fotografia.jpg?noCache="+new Date().getTime(), "contenedor"); //cargamos la imagen

Probando la velocidad de descarga

Eso es todo. Luego de realizar las dos cargas, un mensaje nos dirá la velocidad de descarga del usuario. Puedes probarlo en tu servidor, y luego darle actualizar desde el browser para ver los resultados.

Aplicación

Habíamos mencionado antes que conocer la velocidad de descarga del usuario nos permitia crear aplicaciones mas eficientes. Este es un ejemplo de una de las tantas utilidades. Lo que haremos será cargar un video y reproducirlo con streaming. Usaremos un video en formato .flv que es uno de los mas recomendados.

Recuerda que si tienes dudas de como hacer un video .flv, puedes recorrer los tutoriales acerca del asunto. Mas abajo encontrarás las referencias necesarias. Empecemos por modificar el codigo anterior y adaptarlo a nuestras necesidades actuales. El codigo es el mismo, solo que agregaremos un par de sentencias para la visualizacion del video. En el frame en donde hacemos las declaraciones, agregamos esto:

// Craemos un objeto NetConnection:
 var conexion:NetConnection = new NetConnection();
 conexion.connect(null);
 var stream:NetStream = new NetStream(conexion);
 mi_video.attachVideo(stream);

NOTA: para poder ver el video debes ir a la biblioteca (CRTL+L) y en el menú seleccionar "nuevo video". Luego lo arrastras al escenario y le das un nombre de instancia. En este ejemplo "mi_video". Recuerda checar los tutoriales sobre video.

Ahora, con una serie de condicionales, podríamos cambiar el tiempo del buffer para garantizarnos una correcta visualización. Este cambio de parámetro del video lo haremos en la segunda medición, luego de obtener la velocidad de descarga:

carga.onLoadComplete = function(target_mc) {
     tiempo_final_2 = getTimer()/1000;
     tiempo_total_2 = tiempo_final_2-tiempo_inicial_2;
     promedio_2 = (target_mc.getBytesTotal()/1024)/tiempo_total_2;
     velocidad = Math.round((promedio_1+promedio_2)/2);
     texto.text = velocidad+" kbps";
     target_mc._visible = false;
     //seteo del buffer
     if (velocidad>=0 && velocidad<=20) {
         stream.setBufferTime(10);
     } else if (velocidad>20 && velocidad<=100) {
         stream.setBufferTime(5);
     } else if (velocidad>100) {
         stream.setBufferTime(3);
     }
     gotoAndStop(3); //pasamos a un tercer frame
 };

Bien, ya hemos seteado el tiempo de buffer, ahora solo nos queda reproducirlo. En un tercer frame colocamos la sentencia para reproducir el video:

stop();
stream.play("video.flv");

Pues eso es todo. Ya tienes tu aplicación funcionando de mil maravillas y accesible para todo usuario.

Referencias

Control de video FLV en Flash
Tutorial de Flash Video FLV para Flash MX 2004
Uso de la clase MovieClipLoader()

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo