Activar Cámara, Webcam, Smartphone Camera en Oracle APEX

Hola, amigos en este tutorial hablamos un poco sobre como activar la cámara, ya sea camara web de una PC, computador laptop o el de un celular, smartphone.

Para ello usaremos JavaScript con el API getUserMedia.

La demo lo pueden encontrar en el siguiente enlace

El código líneas abajo, describe 3 funciones principales:

Activar la cámara

function startCamera()

Inicializa la cámara , por defecto la camara frontal.

Cambiar la cámara

function switchCameraButton()

Para cuando es smartphone, intercalar entre la cámara frontal y la cámara trasera.

Tomar foto

function takePhotoButton()

Esta función lo que hace es tomar un screen de la cámara en el momento actual.

const cameraVideo = document.getElementById('cameraVideo');
const canvas = document.getElementById('canvas');
const photoTaken= document.getElementById('photoTaken');

let currentStream;
let useFrontCamera = true;

// Configuración inicial para la cámara
function startCamera() {
    if (currentStream) {
        currentStream.getTracks().forEach(track => track.stop());
    }
 

  navigator.mediaDevices.getUserMedia({ 
      video: {
          facingMode: useFrontCamera ? 'user' : 'environment'  // "user" para la cámara frontal, "environment" para la trasera
      } 
  })
  .then(stream => {
      cameraVideo.srcObject = stream;
      cameraVideo.play();
  })
  .catch(err => {
      console.error('Error al acceder a la cámara:', err);
  });
}

function takePhotoButton() {
    canvas.width = cameraVideo.videoWidth;
    canvas.height = cameraVideo.videoHeight;

    const context = canvas.getContext('2d');
    context.drawImage(cameraVideo, 0, 0, canvas.width, canvas.height);

    const dataUrl = canvas.toDataURL('image/png');

    photoTaken.src = dataUrl;
};

function switchCameraButton() {
    useFrontCamera = !useFrontCamera;
    startCamera();
};

En el ambiente de Oracle APEX, Agregaremos 2 regiones con el siguiente HTML para mostrar la imagen del video de la cámara y la foto.

Para el video

<div id="videoContainer2">
  <video id="cameraVideo" autoplay playsinline></video>
  <canvas id="canvas" style="display:none;"></canvas>
</div>

Para la foto

<img id="photoTaken" alt="Used for captured photo" style="max-width: 100%; height: auto;">

Botones y Acciones Dinámicas

Adicionalmente, necesitaremos 3 botones, que activaran 3 acciones dinámicas, tal como las que declaramos al principio.

Como un plus adicional, podemos incluir CSS para que nuestro diseño sea responsivo.

/* Estilo del contenedor de video */
#videoContainer {
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    height: auto; /* Ajusta la altura automáticamente */
    overflow: hidden;
    border: 2px solid #000;
    display: inline-block;
    box-sizing: border-box; /* Para incluir el borde dentro del tamaño total */
}

/* Estilo del video */
#cameraVideo {
    width: 100%; /* Asegura que el video ocupe el 100% del contenedor */
    height: auto; /* Mantiene la proporción del video */
    object-fit: cover; /* Asegura que el video cubra todo el contenedor */
}

/* Ocultar el canvas por defecto */
#canvas {
    display: none;
}

/* Media query para móviles */
@media only screen and (max-width: 600px) {
    #videoContainer {
        width: 100%; /* Se asegura de que ocupe el 100% del ancho de la pantalla del móvil */
        height: auto; /* Ajusta la altura automáticamente */
    }

    #cameraVideo {
        width: 100%; /* Ajusta el video al ancho del móvil */
        height: auto; /* Mantiene la proporción del video */
    }
}

Resultado

Con esto el resultado será el siguiente: