Add cookbook-expo-camera — SDK 54 / React 19 / RN 0.81

packages/cookbook-expo-camera/.gitignore

@@ -0,0 +1,42 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# generated native folders
+/ios
+/android
+/build

packages/cookbook-expo-camera/.yarnrc.yml

@@ -0,0 +1,3 @@
+# Expo/Metro requires node_modules (incompatible with Yarn PnP).
+# Run `yarn install` from this directory for the setting to apply.
+nodeLinker: node-modules

packages/cookbook-expo-camera/App.tsx

@@ -0,0 +1,162 @@
+import "webgltexture-loader-expo-camera";
+import React, { useState, useCallback } from "react";
+import { StatusBar } from "expo-status-bar";
+import {
+  Pressable,
+  StyleSheet,
+  ScrollView,
+  View,
+  Dimensions,
+  Text,
+} from "react-native";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { useCameraPermissions } from "expo-camera";
+import { Surface } from "gl-react-expo";
+import GLCamera from "./GLCamera";
+import Effects from "./effects";
+import Field from "./Field";
+
+const { width: windowWidth } = Dimensions.get("window");
+
+const percentagePrint = (v: number) => (v * 100).toFixed(0) + "%";
+const radiantPrint = (r: number) => ((180 * r) / Math.PI).toFixed(0) + "°";
+
+// prettier-ignore
+const fields = [
+  { id: "blur", name: "Blur", min: 0, max: 6, step: 0.1, prettyPrint: (blur: number) => blur.toFixed(1) },
+  { id: "contrast", name: "Contrast", min: 0, max: 4, step: 0.1, prettyPrint: percentagePrint },
+  { id: "brightness", name: "Brightness", min: 0, max: 4, step: 0.1, prettyPrint: percentagePrint },
+  { id: "saturation", name: "Saturation", min: 0, max: 10, step: 0.1, prettyPrint: percentagePrint },
+  { id: "hue", name: "HueRotate", min: 0, max: 2 * Math.PI, step: 0.1, prettyPrint: radiantPrint },
+  { id: "negative", name: "Negative", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint },
+  { id: "sepia", name: "Sepia", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint },
+  { id: "flyeye", name: "FlyEye", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint },
+];
+
+const initialEffectsState: Record<string, number> = {
+  blur: 0,
+  saturation: 1,
+  contrast: 1,
+  brightness: 1,
+  negative: 0,
+  hue: 0,
+  sepia: 0,
+  flyeye: 0,
+};
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <AppInner />
+    </SafeAreaProvider>
+  );
+}
+
+function AppInner() {
+  const [permission, requestPermission] = useCameraPermissions();
+  const [facing, setFacing] = useState<"front" | "back">("front");
+  const [effects, setEffects] = useState(initialEffectsState);
+
+  const onSurfacePress = useCallback(() => {
+    setFacing((f) => (f === "front" ? "back" : "front"));
+  }, []);
+
+  const onEffectChange = useCallback((value: number, id: string) => {
+    setEffects((prev) => ({ ...prev, [id]: value }));
+  }, []);
+
+  const onEffectReset = useCallback((id: string) => {
+    setEffects((prev) => ({ ...prev, [id]: initialEffectsState[id] }));
+  }, []);
+
+  let stage: React.ReactNode;
+  if (!permission) {
+    stage = <Text style={styles.loading}>Loading...</Text>;
+  } else if (!permission.granted) {
+    stage = (
+      <View style={styles.permissionContainer}>
+        <Text style={styles.permissionText}>Camera permission is required</Text>
+        <Pressable style={styles.permissionButton} onPress={requestPermission}>
+          <Text style={styles.permissionButtonText}>Grant Permission</Text>
+        </Pressable>
+      </View>
+    );
+  } else {
+    stage = (
+      <Pressable onPress={onSurfacePress}>
+        <Surface style={styles.surface}>
+          <Effects {...effects}>
+            <GLCamera facing={facing} />
+          </Effects>
+        </Surface>
+      </Pressable>
+    );
+  }
+
+  return (
+    <SafeAreaView
+      style={styles.root}
+      edges={["top", "bottom", "left", "right"]}
+    >
+      <ScrollView bounces={false} style={styles.root}>
+        <StatusBar style="dark" />
+        {stage}
+        <View style={styles.fields}>
+          {fields.map(({ id, ...props }) => (
+            <Field
+              {...props}
+              key={id}
+              id={id}
+              value={effects[id]}
+              onChange={onEffectChange}
+              onReset={onEffectReset}
+            />
+          ))}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: "#EEE",
+  },
+  surface: {
+    width: windowWidth * 0.75,
+    height: windowWidth,
+    alignSelf: "center",
+  },
+  fields: {
+    flexDirection: "column",
+    flex: 1,
+    paddingTop: 10,
+    paddingBottom: 40,
+    backgroundColor: "#EEE",
+  },
+  loading: {
+    padding: 100,
+    textAlign: "center",
+  },
+  permissionContainer: {
+    padding: 40,
+    alignItems: "center",
+    gap: 16,
+  },
+  permissionText: {
+    fontSize: 16,
+    textAlign: "center",
+  },
+  permissionButton: {
+    backgroundColor: "#333",
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  permissionButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

packages/cookbook-expo-camera/Field.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback } from "react";
+import { Pressable, View, Text, StyleSheet } from "react-native";
+import Slider from "@react-native-community/slider";
+
+const styles = StyleSheet.create({
+  field: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  title: {
+    width: 120,
+    textAlign: "right",
+    fontSize: 14,
+  },
+  value: {
+    width: 80,
+  },
+  range: {
+    flex: 1,
+    height: 20,
+    margin: 6,
+  },
+});
+
+export default function Field({
+  value,
+  id,
+  name,
+  min,
+  max,
+  step,
+  prettyPrint,
+  onChange,
+  onReset,
+}: {
+  value: number;
+  id: string;
+  name: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  prettyPrint: (value: number) => string;
+  onChange: (value: number, id: string) => void;
+  onReset: (id: string) => void;
+}) {
+  const handleChange = useCallback(
+    (v: number) => onChange(v, id),
+    [onChange, id]
+  );
+  const handleReset = useCallback(() => onReset(id), [onReset, id]);
+
+  return (
+    <View style={styles.field}>
+      <Pressable onPress={handleReset}>
+        <Text style={styles.title}>{name}</Text>
+      </Pressable>
+      <Slider
+        style={styles.range}
+        minimumValue={min}
+        maximumValue={max}
+        step={step || 0.01}
+        value={value}
+        onValueChange={handleChange}
+      />
+      <Text style={styles.value}>{prettyPrint(value)}</Text>
+    </View>
+  );
+}

packages/cookbook-expo-camera/GLCamera.tsx

@@ -0,0 +1,58 @@
+import React, { useRef, useEffect, useReducer } from "react";
+import { GLSL, Node, Shaders } from "gl-react";
+import { CameraView } from "expo-camera";
+
+const shaders = Shaders.create({
+  YFlip: {
+    // NB we need to YFlip the stream
+    frag: GLSL`
+precision highp float;
+varying vec2 uv;
+uniform sampler2D t;
+void main(){
+  gl_FragColor=texture2D(t, vec2(uv.x, 1.0 - uv.y));
+}`,
+  },
+});
+
+const CAMERA_W = 720;
+const CAMERA_H = 1280;
+
+export default function GLCamera({
+  facing = "front",
+}: {
+  facing?: "front" | "back";
+}) {
+  const cameraRef = useRef<any>(null);
+  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
+
+  // Force re-renders at 60fps to update the camera texture
+  useEffect(() => {
+    let raf: number;
+    const loop = () => {
+      raf = requestAnimationFrame(loop);
+      forceUpdate();
+    };
+    raf = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  return (
+    <Node
+      blendFunc={{ src: "one", dst: "one minus src alpha" }}
+      shader={shaders.YFlip}
+      uniforms={{
+        t: () =>
+          cameraRef.current
+            ? { camera: cameraRef.current, width: CAMERA_W, height: CAMERA_H }
+            : null,
+      }}
+    >
+      <CameraView
+        style={{ width: 400, height: 533.33 }}
+        facing={facing}
+        ref={cameraRef}
+      />
+    </Node>
+  );
+}

packages/cookbook-expo-camera/app.json

@@ -0,0 +1,39 @@
+{
+  "expo": {
+    "name": "gl-react camera effects",
+    "slug": "cookbook-expo-camera",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.glreact.cookbookexpocamera",
+      "infoPlist": {
+        "NSCameraUsageDescription": "This app uses the camera to apply real-time GL shader effects."
+      }
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/android-icon-foreground.png",
+        "backgroundImage": "./assets/android-icon-background.png",
+        "monochromeImage": "./assets/android-icon-monochrome.png"
+      },
+      "permissions": ["android.permission.CAMERA"]
+    },
+    "plugins": [
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "This app uses the camera to apply real-time GL shader effects."
+        }
+      ]
+    ]
+  }
+}