Vista previa de la cámara del complemento Cordova

Complemento de Cordova que permite la interacción de la cámara desde Javascript y HTML

Los comunicados se mantienen actualizados cuando corresponde. Sin embargo, este complemento está en constante desarrollo. Como tal, se recomienda usar el maestro para tener siempre las últimas correcciones y características.

Las relaciones públicas son muy apreciadas.

Características

Instalación

Utilice cualquiera de los métodos de instalación enumerados a continuación según el marco que utilice.

Para instalar la versión maestra con las últimas correcciones y características

Complemento cordova agregar https://github.com/Danielsalamank/cordova-plugin-camera-preview.git

Complemento cordova iónico agregar https://github.com/Danielsalamank/cordova-plugin-camera-preview.git

meteoro agregar cordova:cordova-plugin-camera-preview-lorddenihol@https://github.com/Danielsalamank/cordova-plugin-camera-preview.git#[latest_commit_id]

<especificación del complemento="https://github.com/Danielsalamank/cordova-plugin-camera-preview.git" source="git" />

o si desea utilizar la última versión publicada en npm

Complemento cordova agregar cordova-plugin-camera-preview-lorddenihol

Complemento iónico de cordova agregar cordova-plugin-camera-preview-lorddenihol

meteorito añadir cordova:[email protected]

<gap:plugin name="cordova-plugin-camera-preview-lorddenihol" />

peculiaridades de iOS

1. No es posible usar la cámara web de su computadora durante la prueba en el simulador, debe probar el dispositivo.
2. Si está desarrollando para iOS 10+, también debe agregar lo siguiente a su config.xml

<plataforma del archivo de configuración="ios" target="*-Info.plist" parent="NSCameraUsageDescription" overwrite="true">
  <string>Permitir que la aplicación use tu cámara</string>
</archivo de configuración>

<!-- o para Phonegap -->

<brecha:plataforma del archivo de configuración="ios" target="*-Info.plist" parent="NSCameraUsageDescription" overwrite="true">
  <string>Permitir que la aplicación use tu cámara</string>
</gap:archivo de configuración>

peculiaridades de Android

1. Al usar el complemento para dispositivos más antiguos, la vista previa de la cámara tomará el foco dentro de la aplicación una vez inicializada. Para evitar que la aplicación se cierre cuando un usuario presiona el botón Atrás, el evento para la vista de la cámara está deshabilitado. Si aún desea que el usuario navegue, puede agregar un oyente para el evento de retroceso para la vista previa (consulte onBackButton)

Methods

startCamera(options, [successCallback, errorCallback])

Inicia la instancia de vista previa de la cámara.

Opciones: Todas las opciones indicadas son opcionales y tendrán valores predeterminados aquí

• x - Por defecto es 0
• y - Por defecto es 0
• width - Por defecto es window.screen.width
• altura - Por defecto es window.screen.height
• camera: consulta CAMERA_DIRECTION: el valor predeterminado es la cámara frontal
• toBack - Predeterminado en falso - Establézcalo en verdadero si desea que su html esté delante de su vista previa
• tapPhoto: el valor predeterminado es verdadero: no funciona si toBack está configurado en falso, en cuyo caso se usa el método takePicture
• tapFocus: el valor predeterminado es falso: permite al usuario tocar para enfocar, cuando la vista está en primer plano
• previewDrag - Predeterminado en falso - No funciona si toBack está configurado en falso
• storeToFile: el valor predeterminado es falso: captura imágenes en un archivo y devuelve la ruta del archivo en lugar de devolver los datos codificados en base64.
• disableExifHeaderStripping: el valor predeterminado es falso. Solo Android: deshabilite la rotación automática de la imagen y deje que el navegador se ocupe de ella (siga leyendo sobre cómo lograrlo)

dejar opciones = {
  x: 0,
  y: 0,
  ancho: ventana.pantalla.ancho,
  altura: ventana.pantalla.altura,
  cámara: CameraPreview.CAMERA_DIRECTION.BACK,
  hacia atrás: falso,
  toqueFoto: cierto,
  tapFocus: falso,
  vista previaArrastrar: falso,
  almacenar en archivo: falso,
  deshabilitarExifHeaderStripping: falso
};

CameraPreview.startCamera(opciones);

Al establecer toBack en verdadero, recuerda agregar el estilo a continuación en el HTML o el elemento del cuerpo de tu aplicación:

html, cuerpo, .ion-app, .ion-content {
  color de fondo: transparente;
}

Cuando tanto tapFocus como tapPhoto son verdaderos, la cámara enfocará y tomará una foto tan pronto como la cámara termine de enfocar.

Si captura imágenes grandes en Android, puede notar que el rendimiento es deficiente; en esos casos, puede establecer disableExifHeaderStripping en verdadero y, en su lugar, solo agregue Javascript/HTML adicional para obtener una visualización adecuada de sus imágenes capturadas sin arriesgar la velocidad de su aplicación.

Al capturar imágenes grandes, es posible que desee almacenarlas en un archivo en lugar de codificarlas en base64, ya que la codificación, al menos en Android, es muy costosa. Con la función storeToFile habilitada, el complemento capturará la imagen en un archivo temporal dentro del caché temporal de la aplicación (el mismo lugar donde Cordova extraerá sus activos). Este método se usa mejor con disableExifHeaderStripping para obtener el mejor rendimiento posible.

detener la cámara ([devolución de llamada exitosa, devolución de llamada de error])

Detiene la instancia de vista previa de la cámara.

CameraPreview.stopCamera();

switchCamera([successCallback, errorCallback])

Cambia entre la cámara trasera y la cámara delantera, si está disponible.

CameraPreview.switchCamera();

mostrar ([devolución de llamada exitosa, devolución de llamada de error])

Muestra el cuadro de vista previa de la cámara.

CameraPreview.show();

ocultar ([devolución de llamada exitosa, devolución de llamada de error])

Ocultar el cuadro de vista previa de la cámara.

CameraPreview.hide();

TakePicture(opciones, devolución de llamada exitosa, [devolución de llamada de error])

Toma la foto. Si el ancho y la altura no se especifican o son 0, se usarán los valores predeterminados. Si se especifican el ancho y el alto, elegirá un tamaño de foto admitido que sea el más cercano al ancho y el alto especificados y tenga la relación de aspecto más cercana a la vista previa. El argumento calidad por defecto es 85 y especifica el valor de calidad/compresión: 0=compresión máxima, 100=calidad máxima.

CameraPreview.takePicture({ancho:640, alto:640, calidad: 85}, function(base64PictureData|filePath) {
  /*
    si la opción storeToFile es falsa (el valor predeterminado), se devuelve base64PictureData.
    base64PictureData es una imagen jpeg codificada en base64. Utilice estos datos para almacenarlos en un archivo o cargarlos.
    Depende de usted descubrir la mejor manera de guardarlo en el disco o lo que sea para su aplicación.
  */

  /*
    si la opción storeToFile se establece en true, se devuelve una ruta de archivo. Tenga en cuenta que el archivo
    se almacena en almacenamiento temporal, por lo que debe moverlo a una ubicación permanente si
    no quiero que el sistema operativo lo elimine arbitrariamente.
  */

  // Un ejemplo simple es si lo va a usar dentro de un atributo HTML img src, entonces haría lo siguiente:
  imageSrcData = 'datos:imagen/jpeg;base64,' + base64PictureData;
  $('img#mi-img').attr('src', imageSrcData);
});

// O si desea utilizar las opciones predeterminadas.

CameraPreview.takePicture(función(base64PictureData){
  /* código aquí */
});

tomar instantánea (opciones, devolución de llamada exitosa, [devolución de llamada de error])

Tome una instantánea de la vista previa de la cámara. La imagen tendrá el mismo tamaño que el especificado en las opciones de startCamera. El argumento calidad por defecto es 85 y especifica el valor de calidad/compresión: 0=compresión máxima, 100=calidad máxima.

CameraPreview.takeSnapshot({calidad: 85}, función(base64PictureData){
  /*
    base64PictureData es una imagen jpeg codificada en base64. Utilice estos datos para almacenarlos en un archivo o cargarlos.
  */

  // Un ejemplo simple es si lo va a usar dentro de un atributo HTML img src, entonces haría lo siguiente:
  imageSrcData = 'datos:imagen/jpeg;base64,' +base64PictureData;
  $('img#mi-img').attr('src', imageSrcData);
});

getSupportedFocusModes(cb, [errorCallback])

Obtenga modos de enfoque admitidos por el dispositivo de cámara actualmente iniciado. Devuelve una matriz que contiene los modos de enfoque admitidos. Consulte FOCUS_MODE para conocer los posibles valores que se pueden devolver.

CameraPreview.getSupportedFocusModes(function(focusModes){
  focusModes.forEach(function(focusMode) {
    console.log(focusMode + ', ');
  });
});

setFocusMode(focusMode, [successCallback, errorCallback])

Establece el modo de enfoque para el dispositivo de la cámara actualmente iniciado.

• focusMode - <código>FOCUS_MODE

CameraPreview.setFocusMode(CameraPreview.FOCUS_MODE.CONTINUOUS_PICTURE);

getFocusMode(cb, [errorCallback])

Obtenga el modo de enfoque para el dispositivo de cámara actualmente iniciado. Devuelve una cadena que representa el modo de enfoque actual.Consulte FOCUS_MODE para conocer los posibles valores que se pueden devolver.

CameraPreview.getFocusMode(function(currentFocusMode){
  console.log(currentFocusMode);
});

getSupportedFlashModes(cb, [errorCallback])

Obtenga los modos de flash admitidos por el dispositivo de la cámara iniciado actualmente. Devuelve una matriz que contiene los modos flash admitidos. Consulte FLASH_MODE para conocer los posibles valores que se pueden devolver

CameraPreview.getSupportedFlashModes(function(flashModes){
  flashModes.forEach(function(flashMode) {
    console.log(flashMode + ', ');
  });
});

setFlashMode(flashMode, [successCallback, errorCallback])

Establece el modo de flash. Consulte FLASH_MODE para obtener detalles sobre los posibles valores para flashMode.

CameraPreview.setFlashMode(CameraPreview.FLASH_MODE.ON);

getFlashMode(cb, [errorCallback])

Obtenga el modo de flash para el dispositivo de la cámara actualmente iniciado. Devuelve una cadena que representa el modo de flash actual.Consulte FLASH_MODE para conocer los posibles valores que se pueden devolver

CameraPreview.getFlashMode(function(currentFlashMode){
  console.log(currentFlashMode);
});

getHorizontalFOV(cb, [errorCallback])

Obtenga el FOV horizontal para el dispositivo de cámara actualmente iniciado. Devuelve una cadena de un flotador que es el FOV de la cámara en Grados.

CameraPreview.getHorizontalFOV(function(getHorizontalFOV){
  console.log(getHorizontalFOV);
});

getSupportedColorEffects(cb, [errorCallback])

*Actualmente, esta característica es solo para Android. Un PR para el soporte de iOS sería felizmente aceptado *

Obtenga los modos de color admitidos por el dispositivo de cámara actualmente iniciado. Devuelve una matriz que contiene efectos de color admitidos (cadenas). Consulte COLOR_EFFECT para conocer los posibles valores que se pueden devolver.

CameraPreview.getSupportedColorEffects(function(colorEffects){
  colorEffects.forEach(function(color) {
    console.log(color + ', ');
  });
});

setColorEffect(colorEffect, [successCallback, errorCallback])

Establecer el efecto de color. Consulte COLOR_EFFECT para obtener detalles sobre los valores posibles para colorEffect.

CameraPreview.setColorEffect(CameraPreview.COLOR_EFFECT.NEGATIVE);

setZoom(zoomMultiplier, [successCallback, errorCallback])

Establezca el nivel de zoom para el dispositivo de cámara actualmente iniciado. La opción zoomMultipler acepta un número entero. El nivel de zoom está inicialmente en 1

CameraPreview.setZoom(2);

getZoom(cb, [errorCallback])

Obtenga el nivel de zoom actual para el dispositivo de cámara actualmente iniciado. Devuelve un número entero que representa el nivel de zoom actual.

CameraPreview.getZoom(function(currentZoom){
  console.log(currentZoom);
});

getMaxZoom(cb, [errorCallback])

Obtenga el nivel de zoom máximo para el dispositivo de cámara actualmente iniciado. Devuelve un número entero que representa el nivel de zoom mínimo.

CameraPreview.getMaxZoom(function(maxZoom){
  console.log(maxZoom);
});

getSupportedWhiteBalanceModes(cb, [errorCallback])

Devuelve una matriz con los modos de balance de blancos admitidos para el dispositivo de cámara actualmente iniciado. Consulte WHITE_BALANCE_MODE para obtener detalles sobre los posibles valores devueltos.

CameraPreview.getSupportedWhiteBalanceModes(function(whiteBalanceModes){
  console.log(whiteBalanceModes);
});

getWhiteBalanceMode(cb, [errorCallback])

Obtenga el modo de balance de blancos actual del dispositivo de la cámara actualmente iniciado. Consulte WHITE_BALANCE_MODE para obtener detalles sobre los posibles valores devueltos.

CameraPreview.getWhiteBalanceMode(función(whiteBalanceMode){
  consola.log(modoequilibrioblanco);
});

setWhiteBalanceMode(whiteBalanceMode, [successCallback, errorCallback])

Establezca el modo de balance de blancos para el dispositivo de cámara actualmente iniciado. Consulte WHITE_BALANCE_MODE para obtener detalles sobre los valores posibles para whiteBalanceMode.

CameraPreview.setWhiteBalanceMode(CameraPreview.WHITE_BALANCE_MODE.CLOUDY_DAYLIGHT);

getExposureModes(cb, [errorCallback])

Devuelve una matriz con modos de exposición admitidos para el dispositivo de cámara actualmente iniciado. Consulte EXPOSURE_MODE para obtener detalles sobre los posibles valores devueltos.

CameraPreview.getExposureModes(function(exposureModes){
  console.log(modos de exposición);
});

getExposureMode(cb, [errorCallback])

Obtenga el modo de exposición actual del dispositivo de la cámara actualmente iniciado. Consulte EXPOSURE_MODE para obtener detalles sobre los posibles valores devueltos.

CameraPreview.getExposureMode(function(exposureMode){
  consola.log(modoexposición);
});

establecer el modo de exposición (modo de exposición, [devolución de llamada exitosa, devolución de llamada de error])

Establece el modo de exposición para el dispositivo de la cámara actualmente iniciado. Consulte EXPOSURE_MODE para obtener detalles sobre los valores posibles para el modo de exposición.

CameraPreview.setExposureMode(CameraPreview.EXPOSURE_MODE.CONTINUO);

getExposureCompensationRange(cb, [errorCallback])

Obtenga la compensación de exposición mínima y máxima para el dispositivo de cámara iniciado actualmente. Devuelve un objeto que contiene números enteros mínimo y máximo.

CameraPreview.getExposureCompensationRange(función(expoxureRange){
  console.log("min: " + rango de exposición.min);
  console.log("max: " + rango de exposición.max);
});

getExposureCompensation(cb, [errorCallback])

Obtenga la compensación de exposición actual para el dispositivo de cámara actualmente iniciado. Devuelve un número entero que representa la compensación de exposición actual.

CameraPreview.getExposureCompensation(function(expoxureCompensation){
  console.log(exposiciónCompensación);
});

setExposureCompensation(exposureCompensation, [successCallback, errorCallback])

Establezca la compensación de exposición para el dispositivo de cámara iniciado actualmente. exposiciónCompensación acepta un número entero. si la compensación de exposición es menor que la compensación de exposición mínima, se establece al mínimo. si la compensación de exposición es mayor que la compensación de exposición máxima, se establece al máximo. (consulte getExposureCompensationRange() para obtener la compensación de exposición mínima y máxima).

CameraPreview.setExposureCompensation(-2);
CameraPreview.setExposureCompensation(3);

setPreviewSize([dimensiones, exitCallback, errorCallback])

Cambiar el tamaño de la ventana de vista previa.

CameraPreview.setPreviewSize({ancho: ventana.pantalla.ancho, alto: ventana.pantalla.alto});

getSupportedPictureSizes(cb, [errorCallback])

CameraPreview.getSupportedPictureSizes(función(dimensiones){
  // tenga en cuenta que la versión vertical, ancho y alto intercambiados, de estas dimensiones también son compatibles
  dimensiones.forEach(función(dimensión) {
    console.log(dimensión.ancho + 'x' + dimensión.altura);
  });
});

getCameraCharacteristics(cb, [errorCallback])

*Actualmente, esta característica es solo para Android. Un PR para el soporte de iOS sería felizmente aceptado *

Conoce las características de todas las cámaras disponibles. Devuelve un objeto JSON que representa las características de todas las cámaras disponibles.

CameraPreview.getCameraCharacteristics(función(características){
  consola.log(características);
});

Características del ejemplo:

{
  "CAMERA_CHARACTERISTICS": [
    {
      "INFO_SUPPORTED_HARDWARE_LEVEL": 1,
      "LENS_FACING": 1,
      "SENSOR_INFO_PHYSICAL_SIZE_WIDTH": 5.644999980926514,
      "SENSOR_INFO_PHYSICAL_SIZE_HEIGHT": 4.434999942779541,
      "SENSOR_INFO_PIXEL_ARRAY_SIZE_WIDTH": 4032,
      "SENSOR_INFO_PIXEL_ARRAY_SIZE_HEIGHT": 3024,
      "LENS_INFO_AVAILABLE_FOCAL_LENGTHS": [
        {
          "FOCAL_LENGTH": 4.199999809265137
        }
      ]
    },

    {
      "INFO_SUPPORTED_HARDWARE_LEVEL": 0,
      "LENS_FACING": 0,
      "SENSOR_INFO_PHYSICAL_SIZE_WIDTH": 3.494999885559082,
      "SENSOR_INFO_PHYSICAL_SIZE_HEIGHT": 2.625999927520752,
      "SENSOR_INFO_PIXEL_ARRAY_SIZE_WIDTH": 2608,
      "SENSOR_INFO_PIXEL_ARRAY_SIZE_HEIGHT": 1960,
      "LENS_INFO_AVAILABLE_FOCAL_LENGTHS": [
        {
          "FOCAL_LENGTH": 2.0999999046325684
        }
      ]
    }
  ]
}

tapToFocus(xPoint, yPoint, [successCallback, errorCallback])

Establece un punto de enfoque específico. Tenga en cuenta que esto supone que la cámara está en pantalla completa.

let xPunto = evento.x;
let yPunto = evento.y
CameraPreview.tapToFocus(xPoint, yPoint);

onBackButton(devolución de llamada exitosa, [devolución de llamada de error])

Evento de devolución de llamada para tocar el botón Atrás

CameraPreview.onBackButton(función() {
  console.log('Botón Atrás presionado');
});

getBlob(url, [devolución de llamada exitosa, devolución de llamada de error])

Cuando trabaje con archivos locales, es posible que desee mostrarlos en ciertos contenedores como lienzo, dado que file:// no siempre es un tipo de URL válido, primero debe convertirlo explícitamente a una gota, antes de empujarla más hacia el lado de la pantalla. La función getBlob hará el conversión adecuada para usted, y si tiene éxito, pasará el contenido en su función de devolución de llamada como primer argumento.

function mostrarImagen(contenido) {
  var ctx = $("lienzo").getContext('2d');

  img.onload = función(){
    ctx.drawImage(img, 0, 0)
  }

  img.src = URL.createObjectURL(blob);
}

función tomarFoto() {
  CameraPreview.takePicture({ancho: aplicación.dimensión.ancho, altura: aplicación.dimensión.altura}, función (datos){
    if (cordova.platformId === 'android') {
      CameraPreview.getBlob('archivo://' + datos, función(imagen) {
        mostrarImagen(imagen);
      });
    } demás {
      mostrarImagen('datos:imagen/jpeg;base64,' + datos);
    }
  });
}

startRecordVideo(options, cb, [errorCallback])

*Actualmente, esta característica es solo para Android. Un PR para el soporte de iOS sería felizmente aceptado *

Comience a grabar video en el caché.

var opciones = {
   dirección de la cámara: CameraPreview.CAMERA_DIRECTION.BACK,
   ancho: (ventana.pantalla.ancho / 2),
   altura: (ventana.pantalla.altura / 2),
   calidad: 60,
   con Flash: falso
}

CameraPreview.startRecordVideo(opciones, función(filePath){
   consola.log(ruta del archivo)
});

detenerGrabarVideo(cb, [errorCallback])

*Actualmente, esta característica es solo para Android. Un PR para el soporte de iOS sería felizmente aceptado *

Detener la grabación de video y devolver la ruta del archivo de video

CameraPreview.stopRecordVideo(función(filePath) {
   consola.log(ruta del archivo);
});

Ajustes

FOCUS_MODE

Focus mode settings:

| Name | Type | Default | Note | | --- | --- | --- | --- | | FIXED | string | fixed | | | AUTO | string | auto | | | CONTINUOUS | string | continuous | IOS Only | | CONTINUOUS_PICTURE | string | continuous-picture | Android Only | | CONTINUOUS_VIDEO | string | continuous-video | Android Only | | EDOF | string | edof | Android Only | | INFINITY | string | infinity | Android Only | | MACRO | string | macro | Android Only |

FLASH_MODE

Flash mode settings:

| Name | Type | Default | Note | | --- | --- | --- | --- | | OFF | string | off | | | ON | string | on | | | AUTO | string | auto | | | RED_EYE | string | red-eye | Android Only | | TORCH | string | torch | |

CAMERA_DIRECTION

Configuración de la dirección de la cámara:

| Name | Type | Default | | --- | --- | --- | | BACK | string | back | | FRONT | string | front |

COLOR_EFFECT

Configuración de efectos de color:

| Name | Type | Default | Note | | --- | --- | --- | --- | | AQUA | string | aqua | Android Only | | BLACKBOARD | string | blackboard | Android Only | | MONO | string | mono | | | NEGATIVE | string | negative | | | NONE | string | none | | | POSTERIZE | string | posterize | | | SEPIA | string | sepia | | | SOLARIZE | string | solarize | Android Only | | WHITEBOARD | string | whiteboard | Android Only |

EXPOSURE_MODE

Configuración del modo de exposición:

| Name | Type | Default | Note | | --- | --- | --- | --- | | AUTO | string | auto | IOS Only | | CONTINUOUS | string | continuous | | | CUSTOM | string | custom | | | LOCK | string | lock | IOS Only |

Nota: Use AUTO para permitir que el dispositivo ajuste automáticamente la exposición una vez y luego cambie el modo de exposición a BLOQUEO.

WHITE_BALANCE_MODE

Configuración del modo de balance de blancos:

| Name | Type | Default | Note | | --- | --- | --- | --- | | LOCK | string | lock | | | AUTO | string | auto | | | CONTINUOUS | string | continuous | IOS Only | | INCANDESCENT | string | incandescent | | | CLOUDY_DAYLIGHT | string | cloudy-daylight | | | DAYLIGHT | string | daylight | | | FLUORESCENT | string | fluorescent | | | SHADE | string | shade | | | TWILIGHT | string | twilight | | | WARM_FLUORESCENT | string | warm-fluorescent | |

Sample App

cordova-plugin-camera-preview-sample-app para un ejemplo completo de Cordova en funcionamiento para las plataformas Android e iOS.

capturas de pantalla

Créditos

Mantenido por Daniel Salamanca - @westonganger

Creado por Daniel Salamanca @Danielsalamank