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

docs: Use Hotdog/Not Hotdog as sample

Browse Source
This commit is contained in:
Marc Rousavy 2021-07-06 14:52:28 +02:00 committed by GitHub
parent b39b38006c
commit db0baaefe8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/docs/guides/FRAME_PROCESSORS.mdx
View File

@ -18,14 +18,18 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
Frame processors are functions that are written in JavaScript (or TypeScript) which can be used to **process frames the camera "sees"**. Frame processors are functions that are written in JavaScript (or TypeScript) which can be used to **process frames the camera "sees"**.
Inside those functions you can call **Frame Processor Plugins**, which are high performance native functions specifically designed for certain use-cases. Inside those functions you can call **Frame Processor Plugins**, which are high performance native functions specifically designed for certain use-cases.
For example, you might want to create a QR code scanner **without writing any native code**, while still **achieving native performance**: For example, you might want to create a [Hotdog/Not Hotdog detector app](https://apps.apple.com/us/app/not-hotdog/id1212457521) **without writing any native code**, while still **achieving native performance**:
```jsx ```jsx
function App() { function App() {
const frameProcessor = useFrameProcessor((frame) => { const frameProcessor = useFrameProcessor((frame) => {
'worklet' 'worklet'
const qrCodes = scanQRCodes(frame) const isHotdog = detectIsHotdog(frame)
console.log(`Detected QR Codes: ${qrCodes}`) if (isHotdog) {
console.log("Hotdog!")
} else {
console.log("Not Hotdog!")
}
}, []) }, [])
return ( return (
@ -37,7 +41,7 @@ function App() {
} }
``` ```
Frame processors are by far not limited to QR code detection, other examples include: Frame processors are by far not limited to Hotdog detection, other examples include:
* **AI** for **facial recognition** * **AI** for **facial recognition**
* **AI** for **object detection** * **AI** for **object detection**
@ -47,13 +51,15 @@ Frame processors are by far not limited to QR code detection, other examples inc
* Creating **snapchat-like filters**, e.g. draw a dog-mask filter over the user's face * Creating **snapchat-like filters**, e.g. draw a dog-mask filter over the user's face
* Creating **color filters** with depth-detection * Creating **color filters** with depth-detection
Because they are written in JS, Frame Processors are **simple** and **easy to create** while still maintaining **native performance**. (Frame Processors can run up to 1000 times a second!) Also, you can use **over-the-air updates** to tweak the Hotdog detector's sensitivity without pushing a native update.
:::note :::note
Frame Processors require [**react-native-reanimated**](https://github.com/software-mansion/react-native-reanimated) 2.2.0 or higher. Frame Processors require [**react-native-reanimated**](https://github.com/software-mansion/react-native-reanimated) 2.2.0 or higher.
::: :::
### Interacting with Frame Processors ### Interacting with Frame Processors
Since Frame Processors run in Worklets, you can also easily read from, and assign to [**Shared Values**](https://docs.swmansion.com/react-native-reanimated/docs/shared-values): Since Frame Processors run in Worklets, you can also easily read from, and assign to [**Shared Values**](https://docs.swmansion.com/react-native-reanimated/docs/shared-values) to create smooth, 60 FPS animations:
```tsx {6} ```tsx {6}
// represents position of the cat on the screen 🐈 // represents position of the cat on the screen 🐈