Add onVideoChunkReady

component/video/camera.tsx

@@ -13,12 +13,13 @@ import {
 } from "react-native-vision-camera";
 import { RecordingButton } from "./capture-button";
 import { useIsForeground } from "./is-foreground";
-import { useIsFocused } from '@react-navigation/native'
+import { useIsFocused } from "@react-navigation/native";
 
 export default function CameraScreen(): React.ReactElement {
   const camera = useRef<Camera>(null);
   const { hasPermission, requestPermission } = useCameraPermission();
-  const [isCameraInitialized, setIsCameraInitialized] = useState<boolean>(false);
+  const [isCameraInitialized, setIsCameraInitialized] =
+    useState<boolean>(false);
 
   const isForeground = useIsForeground();
   const isFocused = useIsFocused();
@@ -37,6 +38,10 @@ export default function CameraScreen(): React.ReactElement {
     console.log(`Media captured! ${JSON.stringify(media)}`);
   }, []);
 
+  const onVideoChunkReady = useCallback((event) => {
+    console.log(`Chunk ready in react-native`, event.nativeEvent);
+  }, []);
+
   if (!hasPermission) {
     requestPermission();
     // Error handling in case they refuse to give permission
@@ -59,7 +64,7 @@ export default function CameraScreen(): React.ReactElement {
   };
 
   if (device === null) {
-    console.log(device)
+    console.log(device);
     return (
       <Text>
         Camera not available. Does user have permissions: {hasPermission}
@@ -76,6 +81,7 @@ export default function CameraScreen(): React.ReactElement {
           format={format}
           onInitialized={onInitialized}
           onError={onError}
+          onVideoChunkReady={onVideoChunkReady}
           video={true}
           orientation={orientation} // TODO: #60
           isActive={isActive}

react-native-vision-camera

@@ -1 +1 @@
-Subproject commit fb425458904eb240466768be08352973fd2f78d8
+Subproject commit 0e05fc314fb759ec0944bf09c07aba9ad753fc2b

screens/login.tsx

@@ -1,17 +1,26 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import { Alert, Button, View, Text, TextInput, TouchableWithoutFeedback, Keyboard } from "react-native";
+import {
-import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';
+  Alert,
+  Button,
+  View,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  Keyboard,
+} from "react-native";
+import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth";
 
 // This code is beginning of Auth Implementation - actual implementation will differ and involve more UI
 // Does not have a restart or proper handling of code confirmation, should only be used for obtaining token/testing
 // Currently working for Android builds, iOS has open issue #56
 
 export default function Login() {
-  const [phoneNumber, setPhoneNumber] = useState<string>('');
+  const [phoneNumber, setPhoneNumber] = useState<string>("");
-  const [code, setCode] = useState<string>('');
+  const [code, setCode] = useState<string>("");
 
   const [user, setUser] = useState(null);
-  const [confirm, setConfirm] = useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
+  const [confirm, setConfirm] =
+    useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
 
   async function onAuthStateChanged(user: any) {
     setUser(user);
@@ -26,16 +35,18 @@ export default function Login() {
 
   async function signInWithPhoneNumber(phoneNumber: string) {
     if (!phoneNumber) {
-      return Alert.alert('Please enter a valid phone number with a country code');
+      return Alert.alert(
+        "Please enter a valid phone number with a country code",
+      );
     }
     try {
       const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
       setConfirm(confirmation);
     } catch (err) {
       // TODO: implement more robust error handling by parsing err message
-      console.warn(err)
+      console.warn(err);
       Alert.alert(
-        'There was an error. Make sure you are using a country code (ex: +1 for US)'
+        "There was an error. Make sure you are using a country code (ex: +1 for US)",
       );
     }
   }
@@ -44,7 +55,7 @@ export default function Login() {
     try {
       await confirm?.confirm(code);
     } catch {
-      Alert.alert('Invalid code, please try again.');
+      Alert.alert("Invalid code, please try again.");
     }
   }
 
@@ -53,13 +64,17 @@ export default function Login() {
     return subscriber;
   }, []);
 
-
-
   return (
     <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
-      <View style={{ alignItems: 'center' }}>
+      <View style={{ alignItems: "center" }}>
         <TextInput
-          style={{ width: '50%', height: 30, borderWidth: 1, borderColor: 'black', marginBottom: 20 }}
+          style={{
+            width: "50%",
+            height: 30,
+            borderWidth: 1,
+            borderColor: "black",
+            marginBottom: 20,
+          }}
           placeholder="Phone"
           textContentType="telephoneNumber"
           keyboardType="phone-pad"
@@ -69,7 +84,13 @@ export default function Login() {
         />
         {confirm && (
           <TextInput
-            style={{ width: '50%', height: 30, borderWidth: 1, borderColor: 'black',  marginBottom: 20 }}
+            style={{
+              width: "50%",
+              height: 30,
+              borderWidth: 1,
+              borderColor: "black",
+              marginBottom: 20,
+            }}
             placeholder="Code"
             keyboardType="number-pad"
             textContentType="oneTimeCode"
@@ -80,15 +101,19 @@ export default function Login() {
         )}
         <Button
           title={!confirm ? "Receive code" : "Confirm code"}
-          onPress={() => !confirm ? signInWithPhoneNumber(phoneNumber) : confirmCode()}
+          onPress={() =>
+            !confirm ? signInWithPhoneNumber(phoneNumber) : confirmCode()
+          }
         />
         {user && (
           <>
-            <Text style={{ marginTop: 10 }}>Display name: {user?.displayName}</Text>
+            <Text style={{ marginTop: 10 }}>
+              Display name: {user?.displayName}
+            </Text>
             <Text>Phone number: {user?.phoneNumber}</Text>
           </>
         )}
       </View>
     </TouchableWithoutFeedback>
-  )
+  );
 }