El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Interacció amb la càmera

Següent ►
►

En aquest tema, aprendrem com interactuar amb la càmera del dispositiu utilitzant Apache Cordova. La càmera és una de les funcionalitats més utilitzades en les aplicacions mòbils, i Cordova proporciona una API senzilla per accedir-hi.

Objectius

  • Comprendre com utilitzar el plugin de la càmera de Cordova.
  • Aprendre a capturar imatges i vídeos.
  • Gestionar les opcions de la càmera per personalitzar l'experiència de l'usuari.

Requisits previs

  • Coneixements bàsics de JavaScript.
  • Haver completat els mòduls anteriors del curs.

Instal·lació del plugin de la càmera

Abans de començar a utilitzar la càmera, hem d'instal·lar el plugin corresponent. Utilitzarem el següent comandament per instal·lar el plugin de la càmera de Cordova:

cordova plugin add cordova-plugin-camera

Ús bàsic del plugin de la càmera

Capturar una imatge

El següent exemple mostra com capturar una imatge utilitzant la càmera del dispositiu:

document.getElementById("capturePhoto").addEventListener("click", function() {
    navigator.camera.getPicture(onSuccess, onFail, { 
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    });

    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }
});

Explicació del codi

  1. Event Listener: Afegim un event listener al botó amb id capturePhoto per capturar la foto quan es fa clic.
  2. navigator.camera.getPicture: Aquesta funció obre la càmera del dispositiu.
    • onSuccess: Funció de callback que s'executa quan la captura és exitosa. imageData conté les dades de la imatge en format base64.
    • onFail: Funció de callback que s'executa quan hi ha un error.
    • quality: Qualitat de la imatge capturada (0-100).
    • destinationType: Especifica el format de les dades de la imatge. DATA_URL retorna les dades en format base64.

Capturar un vídeo

Per capturar un vídeo, podem utilitzar el plugin cordova-plugin-media-capture. Instal·lem el plugin amb el següent comandament:

cordova plugin add cordova-plugin-media-capture

El següent exemple mostra com capturar un vídeo:

document.getElementById("captureVideo").addEventListener("click", function() {
    navigator.device.capture.captureVideo(onSuccess, onError, { limit: 1 });

    function onSuccess(mediaFiles) {
        var i, path, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            path = mediaFiles[i].fullPath;
            // Aquí pots fer alguna cosa amb el vídeo capturat
            console.log("Video path: " + path);
        }
    }

    function onError(error) {
        alert('Error code: ' + error.code);
    }
});

Explicació del codi

  1. Event Listener: Afegim un event listener al botó amb id captureVideo per capturar el vídeo quan es fa clic.
  2. navigator.device.capture.captureVideo: Aquesta funció obre la càmera del dispositiu en mode vídeo.
    • onSuccess: Funció de callback que s'executa quan la captura és exitosa. mediaFiles conté una llista de fitxers de mitjans capturats.
    • onError: Funció de callback que s'executa quan hi ha un error.
    • limit: Nombre màxim de vídeos a capturar.

Opcions avançades de la càmera

Podem personalitzar l'experiència de l'usuari amb diverses opcions avançades. A continuació es mostren algunes de les opcions més utilitzades:

Opció Descripció
quality Qualitat de la imatge (0-100).
destinationType Format de les dades de la imatge (DATA_URL, FILE_URI).
sourceType Font de la imatge (CAMERA, PHOTOLIBRARY).
allowEdit Permet editar la imatge després de capturar-la (true, false).
encodingType Format de la imatge (JPEG, PNG).
targetWidth Amplada de la imatge resultant.
targetHeight Alçada de la imatge resultant.
saveToPhotoAlbum Desa la imatge al àlbum de fotos (true, false).

Exemple amb opcions avançades

document.getElementById("capturePhotoAdvanced").addEventListener("click", function() {
    navigator.camera.getPicture(onSuccess, onFail, { 
        quality: 75,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 800,
        targetHeight: 600,
        saveToPhotoAlbum: true
    });

    function onSuccess(imageURI) {
        var image = document.getElementById('myImage');
        image.src = imageURI;
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }
});

Exercicis pràctics

Exercici 1: Captura d'imatge amb personalització

  1. Crea un botó amb id captureCustomPhoto.
  2. Utilitza el plugin de la càmera per capturar una imatge amb les següents opcions:
    • Qualitat: 80
    • Destinació: FILE_URI
    • Permet editar: true
    • Amplada: 1024
    • Alçada: 768
    • Desa al àlbum de fotos: true
  3. Mostra la imatge capturada en un element <img> amb id customImage.

Solució

<button id="captureCustomPhoto">Capture Custom Photo</button>
<img id="customImage" src="" alt="Custom Image">

<script>
document.getElementById("captureCustomPhoto").addEventListener("click", function() {
    navigator.camera.getPicture(onSuccess, onFail, { 
        quality: 80,
        destinationType: Camera.DestinationType.FILE_URI,
        allowEdit: true,
        targetWidth: 1024,
        targetHeight: 768,
        saveToPhotoAlbum: true
    });

    function onSuccess(imageURI) {
        var image = document.getElementById('customImage');
        image.src = imageURI;
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }
});
</script>

Resum

En aquest tema, hem après com interactuar amb la càmera del dispositiu utilitzant Apache Cordova. Hem vist com capturar imatges i vídeos, així com personalitzar l'experiència de l'usuari amb diverses opcions avançades. També hem practicat amb un exercici per reforçar els conceptes apresos. En el proper mòdul, explorarem com construir una interfície d'usuari responsiva.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats