Fotocamera (2)

Nel precedente post¹ si è installata la libreria per usare la fotocamera e si è corretto un bug durante la compilazione. Ora si attiveranno i permessi e si aprirà la fotocamera (posta sul retro).

Articolo:

appunti di informatica

Fotocamera

Si può leggere qui il codice e i commenti al codice di un component (tuttavia, per brevità il componente principale App non è pubblicato).

Probabilmente è più comodo mettere in due diverse pagine la funzione di richiesta dei permessi per la fotocamera e la funzione (componente) che visualizza la schermata della fotocamera aperta.

Questa è la funzione per la richiesta dei permessi (è asincrona)

Contrariamente alla logica, non è sufficiente attivare i permessi dalla parte del sistema operativo, ma è obbligatorio che l’applicazione faccia la domanda all’utente al momento del primo avvio. Non è logico, ma è obbligatorio, altrimenti si rischia di vedere una schermata bianca (oppure nera)

// funzione che elabora la richiesta dei permessi per la fotocamera

import React from 'react';
import type {Node} from 'react';
import {requestCameraPermission} from 'react-native-vision-camera';

async function elaboraRichiesta() {
  try {
    const richiesta=await Camera.requestCameraPermission();
    if (!richiesta) {
      throw new Error('errore richiesta null');
    }
    return richiesta;
  } catch (errore) {
    console.log('errore richiesta');
  }
}

export default elaboraRichiesta;

Questa è la funzione per visualizzare la schermata della fotocamera aperta

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

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

const CameraPage = (): Node => {
  // legge tutte le camere disponibili (di solito 'back' e 'front')
  const devices=useCameraDevices();
  // prende solo la camera posta sul retro
  const device=device.back;
  // questo if è obbligatorio, infatti, in realtà, serve ad attivare la fotocamera
  if (device == null) return <><Text>loading...</Text></>
  return (
    <Camera
      // tutte e tre le righe sono obbligatorie, altrimenti non si vede
      style={StyleSheet.absoluteFill} 
      isActive={true}
      device={device}
    />
  )
}

export default CameraPage;

1. https://www.cancellino.org/2023/02/fotocamera/ [↩]