Utiliser la caméra – appareil photo via Expo (React Native)

Expo-camera fournit un composant React pour React Native qui rend un aperçu de la caméra avant (ou celle à l’arrière). Les paramètres de l’appareil photo comme le zoom, la mise au point automatique, la balance des blancs et le mode flash sont réglables. Avec l’utilisation de l’appareil photo, on peut également prendre des photos et enregistrer des vidéos qui sont ensuite enregistrées dans le cache de l’application. De plus, le composant est également capable de détecter les visages et les codes à barres apparaissant dans l’aperçu. Pour pouvoir rajouter ce composant dans notre projet, utilisez la commande suivante :

expo install expo-camera

La commande permettra d’installer une multitude de librairies pour votre projet Expo et de lier l’appareil photo à React Native sans rien devoir gérer. Notez que ceci ne fonctionnera que pour les véritables devices, autrement dit, si vous tentez de faire des essaies sur un simulateur IOS ou un émulateur Android, l’appareil photo ne sera pas accessible, ceci ne fonctionnera que sur un véritable téléphone.

Voici un code d’exemple :

import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);

useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);

if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
<Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}

Que fait ce code ?

Il permet de faire une demande de permissions auprès du téléphone afin de pouvoir accéder à l’appareil photo. Sans les permissions vous rencontrerez des soucis de fonctionnement tout simplement.

Source : Expo.