Cómo subir vídeos es una de las preguntas más frecuentes que nos hacen los nuevos clientes. Para los desarrolladores, la carga de archivos es algo que probablemente han hecho varias veces, pero siempre es un engorro.
Entrar en Filepicker
Filepicker (ahora Filestack) facilita la carga de archivos. Muy fácil. No estás limitado sólo a archivos locales; soportan una amplia gama de fuentes, desde Dropbox y Google hasta incluso grabar un vídeo directamente desde tu webcam. Lo mejor es que puedes hacer todo esto sin salir del front-end.
Antes de hacer nada más, tendrás que registrarte para obtener una cuenta de Filepicker. Una vez que lo haya hecho, cree una nueva aplicación en su panel de control si no existe una. Toma nota de la clave API que ves, la usaremos más adelante. Filepicker es lo suficientemente amable como para proporcionar un cubo S3 para empezar, pero tómese un segundo para configurar un cubo S3 de destino para sus cargas.
Empecemos en la misma página con una plantilla HTML5 básica. Vamos a utilizar jQuery para hacer las cosas simples, así que vamos a incluir que con nuestro boilerplate junto con la biblioteca Filepicker.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Zencoder Dropzone</title>
<!-- jQuery Include -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Filepicker.io Include -->
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
</head>
<body>
<div id="content">
<h1>Upload all the things!</h1>
</div>
</body>
</html>Ahora podemos utilizar la API JavaScript Filepicker para permitir a nuestros usuarios seleccionar un archivo y guardarlo en nuestro cubo S3. También necesitaremos asociar esto con un enlace en el cuerpo para que el usuario tenga algo en lo que hacer clic. Añade esto debajo del Filepicker JavaScript include. Primero vamos a añadir el enlace de carga. Dado que ya tenemos un gran y prominente h1 añadamos el enlace.
<h1><a href="#" id="upload-link">Upload all the things!</a></h1>Ahora queremos utilizar ese enlace para activar filepicker.pickAndStore al hacer clic. Aquí es donde utilizaremos la clave API que anotó anteriormente. Coloque este fragmento debajo del Filepicker JavaScript incluir en la cabecera de la página.
<script type="text/javascript">
$(function() {
filepicker.setKey('The_Key_From_Your_Dashboard');
$('a').click(function(e) {
e.preventDefault(); // This keeps the normal link behavior from happening
filepicker.pickAndStore({},{location: 's3'},function(fpfiles){
console.log(JSON.stringify(fpfiles));
});
});
});
</script>Tendrás que utilizar algún tipo de servidor web para servir el HTML o de lo contrario no podrás cargar los archivos JavaScript externos. Puedes usar algo como http-server, pero hay una aplicación básica de Node que servirá archivos estáticos en el repositorio de GitHub.
Elija cualquier archivo (puede que quiera elegir algo relativamente pequeño) y súbalo. En este momento, una carga exitosa sólo registra el archivo fpfiles a la consola, así que después de subir un archivo echa un vistazo a la consola. Si todo ha ido según lo previsto, deberías tener un objeto con información sobre el archivo que acabas de subir.
Acabas de subir un archivo desde tu ordenador con sólo 27 líneas de código en total, incluyendo un simple marcado HTML. Pero subir archivos y dejarlos ahí no es útil, así que hagamos que los usuarios puedan subir vídeos y codificarlos.
Añadir Zencoder
En primer lugar, vamos a modificar nuestro cargador para que sólo acepte archivos de vídeo. Filepicker nos permite restringir por mimetype, así que si usted es como yo puede estar tentado a tratar de {mimetype: 'video/*'}. Esto funcionará bien en Chrome, pero los usuarios de Safari verán un subconjunto mucho más pequeño de archivos que pueden subir. Para vídeo, es mucho más fiable restringir por extensión, así que vamos a tomar esa ruta.
$('a').click(function(e) {
e.preventDefault(); // This keeps the normal link behavior from happening
var acceptedExtensions = ['3g2','3gp','3gp2','3gpp','3gpp2','aac','ac3','eac3','ec3','f4a','f4b','f4v','flv','highwinds','m4a','m4b','m4r','m4v','mkv','mov','mp3','mp4','oga','ogg','ogv','ogx','ts','webm','wma','wmv'];
filepicker.pickAndStore({extensions: acceptedExtensions},{location: 's3'},function(fpfiles){
console.log(JSON.stringify(fpfiles));
});
});Puede restringir este conjunto de archivos aceptados o añadir más, pero he optado por la vía fácil y he utilizado la lista de formatos de salida válidos de la documentación de formatos de Zencoder. Incluye algunos archivos de audio, pero como Zencoder sólo admite codificación de audio, podemos dejarlos ahí. Ahora, si haces clic en el enlace y exploras tus archivos locales, te darás cuenta de que sólo puedes seleccionar archivos con una extensión de la lista. Si intentas arrastrar y soltar un archivo inaceptable, obtendrás un error.
Ahora que sabemos que solo subiremos archivos compatibles con Zencoder, hagamos que una subida correcta envíe el archivo a Zencoder para su codificación. Antes de hacerlo, tendremos que establecer nuestra clave API de Zencoder. Puede incluirla justo debajo de la clave de Filepicker.
filepicker.setKey('The_Key_From_Your_Dashboard');
var zenKey = 'Zencoder_API_Key';Ahora usaremos la función de jQuery $.ajax para enviar nuestra solicitud de API a Zencoder cuando la carga se haya realizado correctamente.
filepicker.pickAndStore({extensions: acceptedExtensions},{location: 's3'},function(fpfiles){
// This is the simplest Zencoder API call you can make. This will output an h.264 mp4 with AAC audio and
// save it to Zencoder's temporary storage on S3.
var request = {
"input": fpfiles[0].url
}
// Let's use $.ajax instead of $.post so we can specify custom headers.
$.ajax({
url: 'https://app.zencoder.com/api/v2/jobs',
type: 'POST',
data: JSON.stringify(request),
headers: { "Zencoder-Api-Key": zenKey },
dataType: 'json',
success: function(data) {
$('body').append('Job created! <a href="https://app.zencoder.com/jobs/'+ data.id +'">View Job</a>')
},
error: function(data) {
console.log(data);
}
});
});Ahora actualiza tu página y sube un vídeo. Si todo ha ido según lo previsto, deberías ver un mensaje de éxito con un enlace a tu trabajo recién creado.
Sólo 47 líneas de código después tendrás una página web que te permitirá subir un vídeo y enviarlo para su codificación.
Notas y advertencias
Es una mala idea poner tu clave API de Zencoder en texto plano dentro de JavaScript. Para repetirlo una vez más: No la utilice en código al que otras personas puedan acceder. Nada impediría que alguien cogiera su clave API y codificara todo el vídeo que quisiera.
Una idea mucho mejor sería utilizar Filepicker como se describe, pero en realidad hacer la llamada a la API Zencoder en su back-end donde su clave de API está a salvo de miradas indiscretas.
Un paso más allá
Arrastrar y soltar es realmente genial, así que queríamos hacer una página completa que utiliza Filepicker's makeDropPane. Los usuarios tienen que introducir su clave API antes de hacer nada y no se almacena en el código, por lo que el demo es seguro ponerlo en línea.
Esta versión valida la clave de la API, incluye un historial de sus trabajos recientes con Zencoder y le permite modificar la plantilla de solicitud. Todos estos ajustes se guardan en el localStorage de su navegador para que no lo pierda todo al actualizar.
