Install rnvideo

example/index.tsx

@@ -1,9 +1,9 @@
 import 'react-native-gesture-handler';
 import { Navigation } from "react-native-navigation";
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
-import App from './src/App';
-import Settings from './src/Settings';
-import Splash from './src/Splash';
+import { App } from './src/App';
+import { Settings } from './src/Settings';
+import { Splash } from './src/Splash';
 
 Navigation.setDefaultOptions({
   topBar: {

example/ios/Podfile.lock

@@ -234,6 +234,11 @@ PODS:
     - React-cxxreact (= 0.63.4)
     - React-jsi (= 0.63.4)
   - React-jsinspector (0.63.4)
+  - react-native-video (5.1.1):
+    - React-Core
+    - react-native-video/Video (= 5.1.1)
+  - react-native-video/Video (5.1.1):
+    - React-Core
   - react-native-vision-camera (0.1.0):
     - React-Core
   - React-RCTActionSheet (0.63.4):
@@ -379,6 +384,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-video (from `../node_modules/react-native-video`)
   - react-native-vision-camera (from `../..`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -442,6 +448,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-video:
+    :path: "../node_modules/react-native-video"
   react-native-vision-camera:
     :path: "../.."
   React-RCTActionSheet:
@@ -502,6 +510,7 @@ SPEC CHECKSUMS:
   React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
   React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
   React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
+  react-native-video: 1574074179ecaf6a9dd067116c8f31bf9fec15c8
   react-native-vision-camera: bf9c62e2795080a21e9ea134050c01b5d9494b6d
   React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
   React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b

example/package-lock.json

@@ -1493,6 +1493,16 @@
         "@types/react": "*"
       }
     },
+    "@types/react-native-video": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-native-video/-/react-native-video-5.0.4.tgz",
+      "integrity": "sha512-0NzgoA1e8vMr0lvTJ4qDmwfiBXh0ju6GXLEHUUsgFuxtaqKGXsMDogzDFwqJ4gqsq5T3oQuiLffw2Se/rQAfFw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -2724,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
+    "eme-encryption-scheme-polyfill": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.2.tgz",
+      "integrity": "sha512-tZXuxVUCV1GmlQBGGVVNAt6lXBUxjDFqIAPAhz4F5Z/TvCi/coojxcZGEO5k+KMt/dWRFmXaK5pxKCMehue/oA=="
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4599,6 +4614,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "keymirror": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/keymirror/-/keymirror-0.1.1.tgz",
+      "integrity": "sha1-kYiJ6hP40KQufFVyUO7nE63JXDU="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -6227,6 +6247,16 @@
       "resolved": "https://registry.npmjs.org/react-native-static-safe-area-insets/-/react-native-static-safe-area-insets-2.1.1.tgz",
       "integrity": "sha512-NUSRNZp+0IJOuLeoHoU4kw/cY9g7ozUo2ApCbJAiPyYbkbv49S8gdAcZRkeR0nqwzFDA07sCZCbPI03iEV0RTQ=="
     },
+    "react-native-video": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-5.1.1.tgz",
+      "integrity": "sha512-zee8gRUrjPWRoZSEBiMebClqu1iAuCQNLjzqpmXFrRWEoJj7azM3BPqLQWJgsnfLiYUYGySeApC/G60THM5+tw==",
+      "requires": {
+        "keymirror": "^0.1.1",
+        "prop-types": "^15.7.2",
+        "shaka-player": "^2.5.9"
+      }
+    },
     "react-refresh": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
@@ -6571,6 +6601,14 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
       "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
     },
+    "shaka-player": {
+      "version": "2.5.20",
+      "resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-2.5.20.tgz",
+      "integrity": "sha512-5HJ0PEzps9jJsy9fZlmUyXD74c+goxxe1ZtTQQo+6eohVm/+68NUUAPSu/nHJJKg5Jnk5TKL3oZ+dP8+aForPA==",
+      "requires": {
+        "eme-encryption-scheme-polyfill": "^2.0.1"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

example/package.json

@@ -14,7 +14,8 @@
     "react-native-gesture-handler": "^1.10.1",
     "react-native-navigation": "^7.10.0",
     "react-native-reanimated": "^2.0.0-rc.3",
-    "react-native-static-safe-area-insets": "^2.1.1"
+    "react-native-static-safe-area-insets": "^2.1.1",
+    "react-native-video": "^5.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -23,6 +24,7 @@
     "@react-native-community/eslint-plugin": "^1.1.0",
     "@types/react": "^17.0.2",
     "@types/react-native": "^0.63.50",
+    "@types/react-native-video": "^5.0.4",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
     "babel-plugin-module-resolver": "^4.0.0",

example/src/Constants.ts

@@ -1,3 +1,4 @@
+import { Dimensions, Platform } from "react-native";
 import StaticSafeAreaInsets from "react-native-static-safe-area-insets";
 
 export const CONTENT_SPACING = 15;
@@ -8,3 +9,28 @@ export const SAFE_AREA_PADDING = {
   paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
   paddingBottom: StaticSafeAreaInsets.safeAreaInsetsBottom + CONTENT_SPACING
 }
+
+// whether to use takeSnapshot() instead of takePhoto() on Android
+export const USE_SNAPSHOT_ON_ANDROID = false;
+
+// The maximum photo resolution (in pixels).
+// Setting this to a lower value means faster capture speed
+// Setting this to a higher value means higher quality images
+export const RESOLUTION_LIMIT = Platform.select({
+  android: 3264 * 1840,
+});
+
+// whether to use ultra-wide-angle cameras if available, or explicitly disable them. I think ultra-wide-angle cams don't support 60FPS...
+export const USE_ULTRAWIDE_IF_AVAILABLE = true;
+
+// the max FPS to use if available
+export const HIGH_FPS = 50;
+
+// The maximum zoom _factor_ you should be able to zoom in
+export const MAX_ZOOM_FACTOR = 16;
+
+export const SCREEN_WIDTH = Dimensions.get('window').width;
+export const SCREEN_HEIGHT = Platform.select<number>({
+  android: Dimensions.get("screen").height - StaticSafeAreaInsets.safeAreaInsetsBottom,
+  ios: Dimensions.get("window").height,
+}) as number;

example/src/Settings.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
 import { StyleSheet, View, Text } from 'react-native';
+import type { NavigationFunctionComponent } from 'react-native-navigation';
 
-export default function Settings() {
+export const Settings: NavigationFunctionComponent = ({ componentId }) => {
   return (
     <View style={styles.container}>
       <Text>powered by Cuvent</Text>