Video capture Ionic | Cómo se utiliza e implementa

¿Pensando en incluir un capturador de video dentro de tu aplicación mediante la librería Video capture Ionic? O, quizás ya sabes hacerlo, pero te falta algún detalle para sacarle todo el partido que esta nos ofrece ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás, de manera sencilla y accionable, a capturar video con Video Capture Ionic desde el dispositivo de tus usuarios.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Pero qué es Video Capture Ionic

Cómo habrás podido intuir por su nombre, se trata de un componente que nos permite capturar video a partir de las cámaras de nuestro dispositivo.

Pero no solo eso, tiene bastantes opciones de configuración que veremos a continuación. Opciones cómo configurar la calidad del video, seleccionar la que cámara usar, etc... por esta misma razón no puedes perder nada de lo que vamos a comentar.

Instalando Video Capture Ionic

Del mismo modo que todos los componentes externos al core de Ionic, necesitamos realizar una instalación. Para tal fin vamos a utilizar las dos siguientes líneas de consola:

$ ionic cordova plugin add cordova-plugin-video-capture-plus
$ npm install --save @ionic-native/video-capture-plus@4

Cómo configurar el componente

Similar al punto anterior, al tratarse de un componente fuera del core de Ionic, necesitamos agregarlo a los providers de nuestra app. Para ello vamos a dirigirnos al archivo "app.module.ts" y vamos a agregar lo siguiente:

...;

import { VideoCapturePlus } from '@ionic-native/video-capture-plus';

...

providers: [
...,
VideoCapturePlus,
...
]

...

Plataformas soportadas

Cómo es de esperar al tener que hacer uso de las cámaras, las plataformas son las siguientes:

• Android
• iOS

Cómo utilizar Video Capture Ionic

Ya llegamos al meollo del asunto, pero para seguir la línea del resto de artículo, vamos a usar un ejemplo de código y después comentamos lo que hemos hecho. ¡Vamos con ello!

import { VideoCapturePlus, VideoCapturePlusOptions, MediaFile } from '@ionic-native/video-capture-plus';


constructor(private videoCapturePlus: VideoCapturePlus) { }

...

const options: VideoCapturePlusOptions = {
   limit: 1,
   highquality: true,
   portraitOverlay: 'assets/img/camera/overlay/portrait.png',
   landscapeOverlay: 'assets/img/camera/overlay/landscape.png'
}

this.videoCapturePlus.captureVideo(options)
   .then(mediafile: MediaFile[] => console.log(mediafile), error => console.log('Something went wrong'));

Bien, en primer lugar, vamos a importar las clases e interfaces "VideoCapturePlus", "VideoCapturePlusOptions" y "MediaFile" del paquete que hemos instalado "@ionic-native/video-capture-plus".

Posteriormente, inyectaremos una instancia de "VideoCapturePlus" mediante el constructor de nuestra app.

Depués crearemos las opciones de configuración mediante la interfaz "VideoCapturePlusOptions" que veremos ahora, más abajo, los campos que tiene.

Y, en último lugar, y mediante el método "captureVideo" de nuestra instancia, vamos a realizar la captura de video. Es muy importante conocer que la promesa se resolverá cuando la captura haya terminado y con ella vendrán los datos de la captura.

Y con esto ya tendrás un modo totalmente funcional de poder capturar video mediante la api Video Capture Ionic. Ahora vamos a conocer más detalles sobre las funciones y los campos de dicha API.

Funciones y campos de clase de Video Capture Ionic

Antes de continuar, siempre aclaro que esta sección solo contendrá los campos y funciones del componente en sí mismo, no de los padres. Dicho esto, ¡al lío!

captureVideo(options)

Esta es la función que hemos visto en el ejemplo, al usarla comienza a capturar el video que nos entra por la cámara.

• options -> VideoCapturePlusOptions -> Será un objeto de la interfaz que nos permite configurar la captura, lo veremos enseguida.

Retorna una promesa que tenemos que controlar, con ella llega un array de la clase MediaFile (MediaFile[]) que también veremos a continuación.

MediaFile

Es el objeto que capturamos al controlar la promesa el método captureVideo. Contendrá todos los datos de la captura:

• name -> string -> El nombre del archivo, sin la información de la ruta donde se guarda.
• fullParh -> string -> La ruta completa donde se encuentra el archivo, incluido el nombre.
• type -> string -> El tipo de archivo formateado en mime type.
• lastModifiedDate -> Date -> Será la fecha de la última modificación del archivo.
• size -> number -> El tamaño, en bytes, del archivo que contiene a la captura.
• getFormatData -> MediaFileData -> Contiene la información sobre el formato del archivo.

MediaFileData

Contendrá datos un poco más precisos sobre la captura en cuestión.

• codecs -> string -> El formato actual del contenido de audio y video de la captura.
• bitrate -> number -> La media del bitrate del contenido. (0 en caso de captura de imagen)
• height -> number -> El alto de la captura, en píxeles. (0 en caso de audio)
• width -> number -> El ancho de la captura, en píxeles. (0 en caso de audio)
• duration -> number -> La duración, en segundos, de la captura. (0 en caso de imagen)

VideoCapturePlusOptions

La interfaz de configuración para nuestra captura.

• limit -> number -> El número de videos a grabar. 1 por defecto.
• duration -> number -> La duración máxima que le queremos dar al video en segundos. Si usamos 0, será ilimitada.
• highquality -> boolean -> Si es true, el video utilizará la alta definición. False por defecto.
• frontcamera -> boolean -> Si es true, utilizaremos la cámara selfie. False por defecto.
• protraitOverlay -> string -> La ruta de la imagen que queramos que se vea en el directorio de assets.
• landscapeOverlay -> string -> La ruta de la imagen que queremos mostrar en el directorio de assets cuando el video sea horizontal.
• overlayText -> string -> Solo para iOS y similar a las dos anteriores pero con texto en lugar de imágenes.

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Geniete, espero haberte ayudado con tus dudas y nos vemos en el siguiente artículo. Hasta ese entonces ¡que te vaya bien!