railbird/react-native-vision-camera
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MD

Browse Source
This commit is contained in:
Marc Rousavy
2021-02-19 16:08:26 +01:00
parent c04a4b72be
commit 6ee0ce9cff
8 changed files with 39 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/ANIMATED.md
View File

@@ -1,69 +0,0 @@
<table>
<tr>
<th><a href="./README.md">README.md</a></th>
<th>ANIMATED.md</th>
<th><a href="./DEVICES.md">DEVICES.md</a></th>
<th><a href="./FORMATS.md">FORMATS.md</a></th>
<th><a href="./ERRORS.md">ERRORS.md</a></th>
</tr>
</table>
<br />
## Animations
Often you'd want to animate specific props in the Camera. For example, if you'd want to create a custom zoom gesture, you can smoothly animate the Camera's `zoom` property.
The following example uses [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) (v2) to animate the `zoom` property:
```tsx
import Reanimated, {
useAnimatedProps,
useSharedValue,
withSpring,
} from "react-native-reanimated";
const ReanimatedCamera = Reanimated.createAnimatedComponent(Camera);
Reanimated.addWhitelistedNativeProps({
zoom: true,
});
export const App = () => {
const zoom = useSharedValue(0);
const onRandomZoomPress = useCallback(() => {
zoom.value = withSpring(Math.random());
}, []);
const animatedProps = useAnimatedProps<Partial<CameraProps>>(
() => ({ zoom: zoom.value }),
[zoom]
);
return (
<>
<ReanimatedCamera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
{...{ animatedProps }}
/>
<TouchableOpacity
style={styles.zoomButton}
onPress={onRandomZoomPress}>
<Text>Zoom randomly!</Text>
</TouchableOpacity>
</>
)
}
```
### Implementation
1. The `Camera` is converted to a reanimated Camera using `Reanimated.createAnimatedComponent`
2. The `zoom` property is added to the whitelisted native props to make it animatable.
> Note that this might not be needed in the future, see: [reanimated#1409](https://github.com/software-mansion/react-native-reanimated/pull/1409)
3. Using [`useSharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/api/useSharedValue), we're creating a shared value that holds the `zoom` property.
4. Using the [`useAnimatedProps`](https://docs.swmansion.com/react-native-reanimated/docs/api/useAnimatedProps) hook, we apply the shared value to the animated props.
5. We apply the animated props to the `ReanimatedCamera` component using the spread syntax.

13
src/DEVICES.md
View File

@@ -1,13 +0,0 @@
<table>
<tr>
<th><a href="./README.md">README.md</a></th>
<th><a href="./ANIMATED.md">ANIMATED.md</a></th>
<th>DEVICES.md</th>
<th><a href="./FORMATS.md">FORMATS.md</a></th>
<th><a href="./ERRORS.md">ERRORS.md</a></th>
</tr>
</table>
<br />
TODO: Explanation on how to use `getAvailableCameraDevices()` and `Camera`'s `device={}` prop

13
src/ERRORS.md
View File

@@ -1,13 +0,0 @@
<table>
<tr>
<th><a href="./README.md">README.md</a></th>
<th><a href="./ANIMATED.md">ANIMATED.md</a></th>
<th><a href="./DEVICES.md">DEVICES.md</a></th>
<th><a href="./FORMATS.md">FORMATS.md</a></th>
<th>ERRORS.md</th>
</tr>
</table>
<br />
TODO: Explanation on how errors in the camera library work and how to identify the cause of the problem

13
src/FORMATS.md
View File

@@ -1,13 +0,0 @@
<table>
<tr>
<th><a href="./README.md">README.md</a></th>
<th><a href="./ANIMATED.md">ANIMATED.md</a></th>
<th><a href="./DEVICES.md">DEVICES.md</a></th>
<th>FORMATS.md</th>
<th><a href="./ERRORS.md">ERRORS.md</a></th>
</tr>
</table>
<br />
TODO: Explanation on how to use `getAvailableCameraDevices()` and `Camera`'s `format={}`, `fps={}` and `hdr={}` props

44
src/README.md
View File

@@ -1,44 +0,0 @@
<table>
<tr>
<th>README.md</th>
<th><a href="./ANIMATED.md">ANIMATED.md</a></th>
<th><a href="./DEVICES.md">DEVICES.md</a></th>
<th><a href="./FORMATS.md">FORMATS.md</a></th>
<th><a href="./ERRORS.md">ERRORS.md</a></th>
</tr>
</table>
<br />
<div align="center">
<h1 align="center">Camera</h1>
<img src="img/11.png" width="55%">
<br />
<br />
<blockquote><h4>The most powerful Camera component for react-native.</h4></blockquote>
<br />
<a href='https://ko-fi.com/F1F8CLXG' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
<br />
<a href="https://www.npmjs.com/package/react-native-vision-camera"><img src="https://img.shields.io/npm/v/react-native-vision-camera?color=%239ba298"</a>
<br />
<a href="https://www.npmjs.com/package/react-native-vision-camera"><img src="https://img.shields.io/npm/dt/react-native-vision-camera?color=%239ba298"</a>
<br />
<a href="https://github.com/mrousavy?tab=followers"><img src="https://img.shields.io/github/followers/mrousavy?label=Follow%20%40mrousavy&style=social"></a>
<br />
<a href="https://twitter.com/mrousavy"><img src="https://img.shields.io/twitter/follow/mrousavy?label=Follow%20%40mrousavy&style=social"></a>
</div>
<br/>
<br/>
<br/>
1. TODO: Better description
2. TODO: Demo Screenshot from Cuvent
### Install
```sh
npm i react-native-vision-camera
npx pod-install
```

11
src/TODO.md
View File

@@ -1,11 +0,0 @@
# TODO
This is an internal TODO list which I am using to keep track of some of the features that are still missing.
* [ ] focus(x, y)
* [ ] Mirror images from selfie cameras (iOS Done, Android WIP)
* [ ] Allow camera switching (front <-> back) while recording and stich videos together
* [ ] Make `startRecording()` async. Due to NativeModules limitations, we can only have either one callback or one promise in a native function. For `startRecording()` we need both, since you probably also want to catch any errors that occured during a `startRecording()` call (or wait until the recording has actually started, since this can also take some time)
* [ ] Return a `jsi::Value` reference for images (`UIImage`/`Bitmap`) on `takePhoto()` and `takeSnapshot()`. This way, we skip the entire file writing and reading, making image capture _a lot_ faster.
* [ ] Implement frame processors. The idea here is that the user passes a small JS function (reanimated worklet) to the `Camera::frameProcessor` prop which will then get called on every frame the camera previews. (I'd say we cap it to 30 times per second, even if the camera fps is higher) This can then be used to scan QR codes, detect faces, detect depth, render something ontop of the camera such as color filters, QR code boundaries or even dog filters, possibly even use AR - all from a single, small, and highly flexible JS function!
* [ ] Create a custom MPEG4 encoder to allow for more customizability in `recordVideo()` (`bitRate`, `priority`, `minQuantizationParameter`, `allowFrameReordering`, `expectedFrameRate`, `realTime`, `minimizeMemoryUsage`)

BIN
src/img/11.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 160 KiB