Ejemplo Flex/JSP: Subir video usando la Media API de Brightcove June 23
Este ejemplo muestra como cargar video a Brightcove usando la Media Write API en una aplicación Flex.
Incluye elementos del cliente y del servidor:
- En el lado del cliente,
VideoUploader.mxmles un aplicacion Flex que ofrece al usuario una interfaz (UI) para navegar hacia y seleccionar un archivo para subir, muestra el progreso del proceso de carga, y llama al script proxy en el servidor. A su vez, lee el video Id si la llamada a la Media API es correcta, o un mensaje de error en el caso que la carga falle. - En el lado del servidor, use un script proxy, en este caso una pagina JSP (Uploader.jsp) que recibe la multipart/form-data del cliente Flex, incluyendo el nombre del video, y un la descripción corta y larga, y si anuncios están permitidos o no. Este JSP desglosa la petición y es el que al final llama
create_videoMedia API. Los resultados de la API, incluyendo el id del video recién cargado, se envían al cliente de Flex.
La aplicación Flex hace uso de las clase FileReference para manejar todo lo relacionado a seleccionar el archivo de video, y pasarlo junto con los atributos del video a la pagina JSP. Si no están familiarizados con esta clase, es posible que quieran leer primero la ayuda de Flex. Antes de usar este ejemplo, asegúrense de tener todos los componentes estén instalados. Todos los archivos que necesitan están incluidos en FlexVideoUploaderExample.zip:
- Flex app. Extraigan
VideoUploader.zipe importenlo en Flex Builder. Opción Import > Existing Project Into Workspace > Select archive file >VideoUploader.zip.VideoUploader.mxmlcontiene la aplicación principal. - UploaderVideo.jsp. Extraigan
uploader.wary copienlo a un servidor web que soporte Java. En Tomcat por ejemplo, solo necesitan copiar el archivo war bajo el directoriowebappsy es automáticamente reconocido. Despues de eso, deben tener un proyecto web llamadouploader. Revisen los archivos en el proyecto. La pagina JSP se llamaUploaderVideo.jsp. Este JSP usaClientHTTPRequestpara manipular el multipart/form-data enviado a la Media API. El JSP también necesita los JARs Apache Commonscommons-ioycommons-fileupload, también incluidos en el archivo war. No necesitan cambiar la utileria ClientHTTPRequest , a menos que quieran usar otra utileria HTTP que pueda manipular el envio multiparte. Tambien antes de ejecutar este ejemplo, asegurense de añadir su propio token de escritura de la Media API enUploaderVideo.jsp. Busquen por la variable WRITE_API_TOKEN y asignen su token ahi. Si no cuentan con un token, por favor contacten al servicio al cliente de Brightcove ( en Ingles)
La aplicación Flex
Sin han usado FileReference antes, notaran que este ejemplo basicamente usa los tres pasos principales para cargar un archivo a un servidor:
- Navegar hacia y seleccionar un archivo.
- Llamar a un script en el servidor después de que el usuario ha seleccionado un archivo, y
- Manejar el resultado de la carga.
Navegando hacia el archivo
Esta acción es empezada cuando el usuario presiona el botón 'Upload' en la forma uploadForm de la aplicación. La información acerca del video tiene que ser llenada. Noten que dado que solo queremos subir archivos de video, un filtro (FileFilter) con las extensiones comunes para video es usado. Este es también el lugar donde se ponen los metodos que procesan los eventos cuando el archivo es seleccionado (Event.SELECT) y cuando la carga se completa (DataEvent.UPLOAD_COMPLETE_DATA
/** * Abre un mensaje de dialogo para que el usuario seleccione un archivo de vídeo
* y agrega los métodos para procesar errores y cuando el video ha sido cargado al servidor
*/
private function fileBrowse():void {
fileRef = new FileReference();
fileRef.addEventListener(Event.SELECT,selectHandler);
fileRef.addEventListener(Event.COMPLETE,onComplete);
// Procesar cuando el archivo de video ha sido cargado.
fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA ,onUploadCompleteData);
fileRef.addEventListener(IOErrorEvent.IO_ERROR,onError);
var videoFilter:FileFilter =
new FileFilter ("Video (*.flv,*.mov,*.avi,*.mp4,*.wmv,*.mpeg)",
"*.flv;*.mov;*.avi;*.mp4;*.wmv;*.mpeg");
// Queremos subir solo archivos de video
fileRef.browse([videoFilter]);
}
Llamando al JSP despues de que el usuario ha seleccionado un archivo.
Usamos el método fileReference.upload() para llamar al JSP y enviamos los meta datos del vídeo desde la forma (nombre, descripción, soporta anuncios , etc) como parametros. El JSP es donde en verdad se hace la llamada al metodo de la Media API. Aqui seria donde agregarian mas meta datos como tags, cue points o ids de referencia.create_video
private function selectHandler(event:Event): void {
// Contruye una URL para llamar al script proxy en el servidor
var request:URLRequest = new URLRequest(UPLOAD_VIDEO_URL);
fileName.text = FileReference(event.target).name;
// Enviar los atributos del video entrados por el usuario. La API de video
// create_video soporta varios parametros. En este ejemplo son limitados a
// shortDescription, longDescription, adEnabled, y name.
// Cada atributo de 'createVideoParams'
// debe pertenecer a uno de create_video
// Para una lista completa de los atributos de create_video ver:
// http://docs.brightcove.com/en/media/#Video_Write
var createVideoParams:URLVariables = new URLVariables();
createVideoParams.name=videoName.text;
createVideoParams.shortDescription=shortDescription.text;
createVideoParams.longDescription =longDescription.text;
// Los videos que se cargan a Brightcove soportan anuncios de entrada
// este ejemplo muestra como subir videos que no permitan anuncios, usando un
// parametro de create_video createVideoParams.adEnabled = adEnabledCheckBox.selected?"AD_SUPPORTED":"FREE"; var parametersObject:Object = new Object(); request.method = URLRequestMethod.POST; request.data = createVideoParams; fileRef.upload(request); fileUploadProgressBar.visible= true; }
Procesando el resultado de la transferencia del archivo de vídeo
En onUploadCompleteData, verificamos que la llamada a create_video en el JSP haya sido exitosa y el vídeo haya sido agregado. Si la llamada falla, un mensaje de error es regresado. Si reciben un vídeo id, significa que el archivo ha sido agregado al sistema y esta siendo procesado. Pueden verificar el resultado de la transferencia usando la API get_upload_status de la Media API o en el Media Module.
/**
* Se llama cuando UploadVideo.jsp termina de procesar la carga.
* Si la llamada es exitosa, se puede leer el video id
* de contenido de JSONResponse.result
* Si falla, el mensaje de error con los detalles
* puede leerse de JSONResponse.error.message
*/
private function onUploadCompleteData(event:DataEvent):void {
trace("onUploadCompleteData");
var JSONResponse:Object = (JSON.decode(event.data));
if(JSONResponse.error != null && JSONResponse.error != ""){
videoResult.text = "Error : " + JSONResponse.error.message;
}else {
// Una llamada exitosa regresa el siguiente contenido JSON
// {"result": 34414648001, "error";: null, "id": null}
// Obtener el video id de la propiedad 'result'
videoResult.text = " Video ID : " + JSONResponse.result;
}
}
El lado del Servidor
Entre el paso 2 y 3, la pagina JSP es llamada. El JSP analiza la información enviada por fileReference.upload() y prepara la llamada al método create_video. Este JSP es otra version del java servlet usado en un ejemplo previo "Java Example: Video Uploader", el cual usa HTML en vez de Flex. Una buena explicación del código puede encontrarse ahí. Una diferencia sin embargo, es la adición del parámetro 'anuncios' al subir los videos, para permitir o no anuncios de entrada, y es aqui donde se pueden agregar otros parametros que corresponden al video. Así mismo, usando un script del lado del servidor protege su token de escritura para API.
Que sigue
Aunque este ejemplo demuestra la idea básica de usar Flex para subir vídeos a su cuenta en el sistema de Brightcove, puede ser expandido para incluir mas funcionalidad. Aquí un par de ideas que ustedes pueden implementar :
- Agregar suporte para subir vídeos usando etiquetas para su clasificacion (tags).
- Cambiar este ejemplo a una aplicación de Adobe AIR donde se pueda navegar al vídeo y verlo antes de subirlo.
- Agregar suporte para cue points.
- Obtener el estado de la carga del vídeo al sistema Brightcove. Tip: Llamar el método get_upload_status de la Media API
Espero escuchar pronto de lo que han desarrollado!