Kamera használat

Kamera használatához érdemes megnézni a legfrissebb Expo doksit, ami a kamera kezeléssel foglalkozik. Igaz ez minden új dologra, amit még nem csináltunk. Azaz rákeresni a dokumentációban.

Telepítés

npx expo install expo-camera

Használat

import { Camera, CameraType } from "expo-camera";

Ez az első lépés ahhoz, hogy a kamera funkcióit használni tudjuk. A CameraType-on keresztül érhetjük el a front és a back konstansokat, amivel a teló első vagy hátsó kameráját tudjuk használni:

CameraType.front vagy CameraType.back

Van egy alternatíva is erre, amikor nem kell használni a CameraType-ot:

Camera.Constants.Type.front vagy Camera.Constants.Type.back

Ami lényeges még, hogy az eszköz kamerájának használatához engedély kell. Ezt a követezőképpen tudjuk megoldani:

  const [permission, requestPermission] = Camera.useCameraPermissions();

  if (!permission) {
    // Camera permissions are still loading
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet
    return (
      <View>
        <Text>We need your permission to show the camera</Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
  }

Először is a Camera.useCameraPermissions() hook-tól elkérjük a permission objektumot és a requestPermission függvényt. A permission tartalmazza az engedélyt. Az első feltétel azt nézi meg, hogy egyáltalán létezik-e már a permission objektum. Ha nem, az azt jelenti, hogy még folyamatban van a kamera használati jogosultságok lekérése.

Aztán a következő vizsgálatnál már feltételezzük, hogy lejött a permission objektum. Itt azt nézzük meg, hogy meg van-e adva a kamera használatához az engedély. Ha nincs, akkor ezt a felhasználó arcába toljuk (Text komponens tartalma) és adunk neki egy gombot is, aminek a megnyomásával meghívjuk a requestPermission függvényt: jön a popup, amiben a teló kéri, hogy beleegyezünk-e abba, hogy az alkalmazás használja a kamerát. Persze engedjük neki!

Ha meg vannak a jogok, akkor egy return utasítással indítjuk a kamerát:

return <Camera type={CameraType.front}></Camera>

Vagyis rendereljük a <Camera> komponenst és egy type paraméterben megmondjuk neki, hogy az első vagy a hátsó kamerát indítsa. Most az első kamera lett neki megadva, úgyhogy már nézegethetjük is magunkat a kamera képén :).

Működő példa

A példa itt tekinthető meg. A használathoz pedig annyit kell tudni, hogy ha saját eszközön akarjuk megnézni és a My Device opciót választjuk, akkor a mobilra töltsük le az Expo Go applikációt. iOS-en a kamerát kell elindítani és beolvasni a QR kódot. Androidon előbb az Expo Go applikációt kell indítani és csak utána az alkalmazáson belül a QR kód beolvasást választani.

Kapcsolódó bejegyzés

Ha tetszett a poszt, akkor nézd meg ezt is!