Fotocamera 3

In un precedente articolo¹ si è semplicemente aperta la schermata della fotocamera, ora si aggiungerà un pulsante per attivare lo scatto (e il flash).

Basta modificare il precedente codice sorgente.

// seconda pagina con un component che mostra la fotocamera in azione

import React, {useRef} from 'react';
import type {Node} from 'react';
import {StyleSheet, Button, Text, View} from 'react-native';
import {Camera, useCameraDevices, takePhoto} from 'react-native-vision-camera';

const CameraPage = (): Node => {
  const devices=useCameraDevices();
  const device=device.back;
  const cameraRef= useRef(); 

  const fareFoto = async () => { 
    if (cameraRef.current) {
      try {
	const foto = await cameraRef.current.takePhoto({flash:'on'});
        if (foto == null) throw new Error(); 
        log.debug(foto.path);
      }
    catch (errore) {
      log.debug('ERRORE null: fareFoto()');
      }
    }
  }

  if (device == null) return <><Text>loading...</Text></>
  return (
    <Camera
      device={device}
      photo={true}
      ref={cameraRef}
      style={StyleSheet.absoluteFill}
      isActive={true}
    />
    <Button
      onPress={fareFoto}
      title='Fare click'
    />
  )
}

export default CameraPage;

Oltre ad aver aggiunto alcuni import nelle prime righe, queste sono le altre tre modifiche principali:

• riga 11, useRef hook, inizializzazione dell’oggetto nella libreria²
• riga 13, aggiunta la funzione asincrona che fa la foto
• riga 30, aggiunte gli attributi alla camera (useRef hook e photo)
• riga 36 aggiunto bottone e la funzione di gestione dell’evento onPress

Nella finestra di debug si potrà osservare il percorso della foto appena scattata (file temporaneo).

/data/user/0/com.progetto/cache/mrousavy205385301890183282.jpg

Il difetto di questa applicazione è che le foto si accumulano inutilmente nella cache dell’applicazione.

1. https://www.cancellino.org/2023/02/fotocamera-2/ [↩]
2. https://www.cancellino.org/2023/02/ref-hooks/ [↩]