Rommel Rico: Random ramblings

Javascript para mostrar cuando ciertos streams están en vivo.

Como ustedes podrán saber, hice una pequeña comunidad de SC2 en Mexico, http://www.sc2mx.com/ Dentro de la misma, hay muchos jugadores que tienen sus propios streams o shows en vivo donde discuten el juego en vivo en las siguientes páginas: ustream, livestream, y justin.tv. También hay streams en own3d, pero desafortunadamente no tienen un API público.

Para darle más audiencia y atención a esos streams, decidí escribir un script sencillito que detecta cuando streams están en vivo y los pone en el foro principal junto con un chat. La idea surgió con mi abuela cuando una vez entre a su casa y tenía el futbol prendido en la televisión. Como ya estaba puesto, me quede a verlo. De igual manera, la idea es forzar a los visitantes a ver los streams para que se queden un rato a verlos y a chatear.

Para no hacer el cuento más largo, aquí está el código. El API de livestream se encuentra aquí: http://www.livestream.com/userguide/index.php?title=Channel_API_2.0
Para saber si un stream de livestream está en vivo, simplemente haces la siguiente llamada:
http://xsc2mxx.api.channel.livestream.com/2.0/livestatus.json?callback=livestatus
Lo cual retorna algo como esto:

livestatus({"channel":{"isLive":false,"currentViewerCount":0,"isPremium":false}});

Con ustream, la llamada al API (que se encuentra en http://developer.ustream.tv/docs) es:
http://api.ustream.tv/json/channel/castforfood/getValueOf/status?key=TuClaveSecreta &callback=set_status
Donde TuClaveSecreta es tu API key. Esto retorna algo como esto:

set_status("offline");

Por último, el API de Justin.tv está aquí: http://www.justin.tv/p/api. La llamada al API es: http://api.justin.tv/api/stream/list.json?channel=day9tv&jsonp=justinlive
Lo cual regresa algo como:

[]

(Una lista vacía indica que el stream no está en vivo)

Una vez aprendido los APIs, lo que sigue es ponerlo en Javascript para colocar el video en la página. Esto lo hice así en el fondo de la página:
[CODE REMOVED DUE TO PROBLEMS WITH BROWSERS MISINTERPRETING THE CODE. SORRY.]
Nótese que cada uno de esos scripts está llamando a las funciones “livestatus”, “set_status”, y “justinlive” respectivamente. También nótese que se están ejecutando en orden y que al final se ejecuta la llamada a print(). No incluyo otro script que coloca el chat en la parte inferior de la página. Simplemente checa que si todos los streams retornan “false”, entonces insertar el chat en la parte inferior de la pagina.

El Javascript que hace toda la magia esta a continuación. Ya sé que puede ser más eficiente (hay mucho codigo repetido), pero me da flojera cambiarlo y así se me hace más claro para mí:
[CODE REMOVED DUE TO PROBLEMS WITH BROWSERS MISINTERPRETING THE CODE. SORRY.]
En realidad el código es muy simple, así que no lo voy a explicar en detalle. Hay boolean flags que se ponen “true” si un stream esta en vivo. Al llegar a la función de print(), empotramos el stream junto con el chat, remplazando el Elemento vacio de “status.”

El problema con este método es que se hace 1 llamada de API a cada servicio cada vez que alguien entra a la página principal. Los servicios de ustream, livestream, y justin.tv te limitan las llamadas de API, así que este truco o hack no va a funcionar muy bien si la pagina crece mucho. Sin embargo, siempre se puede pedir incrementar la cantidad de llamadas de API.

Una manera más elegante de hacer esto sería con un chron job que se ejecutara cada 10 minutos. Esto minimizaría las llamadas de API cuando el foro crezca de tamaño. Pero mi filosofía es, “No hagas más de lo que tienes que hacer para que funcione bien.” Esta técnica me funciona y mientras no se descomponga no la voy a cambiar, ya que server-side scripting es mucho mas difícil que client-side.

Update: Tuve que quitar el javascript porque los browsers estaban tratando de ejecutarlo y esto resultaba en un error. Si saben como arreglar esto, haganmelo saber. Gracias.

  • se ve sencillo el codigo y como dijeras alla arriba podrias simplificarlo mas pero ya es cuestion tuya, creo que me animare a hacer unos cuantos scripts para ir aprendiendo mas
    gracias por el codigo

  • I enjoy, lead to I found exactly what I used to be taking a look for. 459608

  • Thank you, I

You can follow any responses to this entry through the RSS 2.0 feed.