Integrar la Cámara de tu Dispositivo en Oracle Apex para Capturar y Almacenar Imágenes.

¡Bienvenidos a Paraguayan DEV!

En este artículo, te mostraremos cómo integrar la cámara frontal y trasera de tu dispositivo (ordenadores, tablets, celulares) en Oracle Apex para capturar y almacenar imágenes directamente en la base de datos. Este proceso es útil en una variedad de aplicaciones, desde modulos de inventario hasta aplicaciones de redes sociales y mucho más. Así que, sin más preámbulos, ¡comencemos!.

Preparación Inicial

Antes de comenzar con la integración, necesitas descargar algunos archivos necesarios que lo puedes realizar desde nuestro repositorio en Github, el link lo encontraras mas abajo. Esto incluye archivos JavaScript, HTML y PLSQL esenciales para el funcionamiento de la cámara, para el ejercicio utilizaremos como demo una tabla de productos.

Haz clic aquí para tener acceso al repositorio

Configuración de Oracle Apex

Para empezar, vamos subir el archivo spin.min.js a la aplicacion que usaremos como prueba, para eso, dirigirte a "Componentes Compartidos" y selecciona la opción "Archivos de Aplicación Estática", estanto alli deberas "subir" el archivo. Asegúrate de descargar el código fuente mencionado anteriormente y sigue las instrucciones proporcionadas en las imagenes.

Creación de Página de Captura de Imágenes

Como primera parte crearemos una página que activará la cámara de tu dispositivo y permitirá tomar fotos esta puede ser de tipo modal o normal, eso lo dejo a tu criterio.

Cuando tengamos la pagina creada, añadiremos la direcion del archivo spin.min.js que cargamos en "Archivos de Aplicación Estática" en el apartado de File URLs de JavaScript.

#APP_IMAGES#spin.min.js

A continuacion, vamos a crear una pagina en blanco, yo la voy a llamar integracion de camara, a esa pagina le vamos a crear una region que llamaremos camara, agregaremos dos elementos: producto y archivo, que utiliaremos para cerrar el circulo de pruebas.

A continuacion en el apartado de SOURCE de la region camara pegamos el siguiente codigo

<div style="text-align:center;">
  <video id="myVideo" width="250" height="300" autoplay></video>
  <canvas id="myCanvas" width="250" height="300" style="display:none;"></canvas>
</div>

El siguiente codigo:

var video = document.getElementById('myVideo');
var streamVideo;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var spinner;
var spinForm = document.getElementById('wwvFlowForm');
var spinAttr = {
position: 'absolute', className: 'spinner', lines: 10, width: 10,  length: 30, top: '50%', left: '50%', radius: 40, opacity: 0.10, speed: 1, color: '#ffffff', rotate: 0
}

Lo añadiremos al apartado de "Function and Global Variable Declaration" en la definicion de la pagina.

Por ultimo crearemos una accion dimanica en el evento "Page Load" que ejecute codigo javascript con el siguiente codigo:

// Usar cámara frontal
// Comprobar si el navegador soporta la API mediaDevices
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) 
// obtener acceso a la cámara del dispositivo
{ navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) 
  {
    // mostrar la camara
    streamVideo = stream;
    video.srcObject = stream;
    video.play();
  }).catch(error => {
      // si hay error
      console.log(error);
  });
} else {
  // el navegador no es compatible con la API mediaDevices
  console.log("Su navegador no soporta la API MediaDevices.");
}

Con estos pasos ya podriamos utilizar la camara en nuestra pagina de Oracle Apex.

Guardar la imagen en la base de datos

Para guardar la imagen en la base de datos utilizaremos un poco de colecciones y Ajax callback.

Primeramente crearemos un proceso en el "After Header" para inicializar las coleciones.

declare
  product_image constant apex_collections.collection_name%type := 'SNAPSHOT';
begin
  if not apex_collection.collection_exists(product_image) then
    apex_collection.create_collection(p_collection_name => product_image);
  ELSE
    apex_collection.delete_collection(p_collection_name => 'SNAPSHOT');
    apex_collection.create_collection(p_collection_name => product_image);
  end if;
end;

Crearemos una region en el footer para el boton "Capturar".

A continuacion crearemos una llamada Ajax con el siguiente codigo:

declare
  V_picture_clob clob;
  V_picture_blob blob;
begin
  V_picture_clob := apex_application.g_clob_01;

  V_picture_blob := apex_web_service.clobbase642blob(
     p_clob => V_picture_clob
  );

  apex_collection.add_member(
    p_collection_name => 'SNAPSHOT',
    p_blob001 => V_picture_blob
  );

  apex_json.open_object;
  apex_json.write(
    p_name => 'result',
    p_value => 'success'
  );
  apex_json.close_object;

  BEGIN
  INSERT INTO adcs.DEMO_PRODUCT_INFO 
    (product_name, filename, mimetype, image_last_update, Product_image) 
  VALUES 
    (:P66_PRODUCTO, :P66_ARCHIVO||'.jpg',  'image/jpeg', sysdate, (SELECT blob001 FROM apex_collections WHERE collection_name = 'SNAPSHOT'));
  IF apex_collection.collection_exists(p_collection_name => 'SNAPSHOT') THEN
    apex_collection.delete_collection(p_collection_name => 'SNAPSHOT');
  END IF;
END;

exception
  when others then
    apex_json.open_object;
    apex_json.write(
      p_name => 'result',
      p_value => 'fail'
    );
    apex_json.close_object;
end;

Este proceso lo llamaremos desde una accion dinamica en el boton el boton capturar, en donde le enviaremos la imagen y los datos de archivo y producto.

mySpinner = new Spinner(spinAttr).spin(spinForm);
ctx.drawImage(video, 0, 0, 250, 300);
video.style.display = 'none';
canvas.style.display = 'inline-block';
streamVideo.getTracks()[0].stop();

apex.server.process
(
    'GRAB_PICTURE',
    {
        p_clob_01: canvas.toDataURL().match(/,(.*)$/)[1],

          pageItems: '#P66_ARCHIVO,#P66_PRODUCTO'},

    {success: function(data) 
         {
              if (data.result == 'success')
              {
                   apex.submit('TAKElSNAP');
              }else
             {console.log('error '+data.result);}
        }
    }
);

Con este ultimo paso ya podriamos probar el circuito completo. sacando una foto y consultando a la base de datos.

Conclusión

La integración de la cámara en aplicaciones web puede ser una funcion poderosa y creativa a tus proyectos de desarrollo. Esperamos que este artículo te haya proporcionado una visión general de cómo lograrlo en Oracle Apex. ¡Experimenta y crea aplicaciones únicas que aprovechen al máximo la tecnología de la cámara en tu dispositivo!

Blog traducido de apexplained