react-native-vision-camera/docs
Marc Rousavy 30b56153db
feat: Sync Frame Processors (plus runAsync and runAtTargetFps) (#1472)
Before, Frame Processors ran on a separate Thread.

After, Frame Processors run fully synchronous and always at the same FPS as the Camera.

Two new functions have been introduced:

* `runAtTargetFps(fps: number, func: () => void)`: Runs the given code as often as the given `fps`, effectively throttling it's calls.
* `runAsync(frame: Frame, func: () => void)`: Runs the given function on a separate Thread for Frame Processing. A strong reference to the Frame is held as long as the function takes to execute.

You can use `runAtTargetFps` to throttle calls to a specific API (e.g. if your Camera is running at 60 FPS, but you only want to run face detection at ~25 FPS, use `runAtTargetFps(25, ...)`.)

You can use `runAsync` to run a heavy algorithm asynchronous, so that the Camera is not blocked while your algorithm runs. This is useful if your main sync processor draws something, and your async processor is doing some image analysis on the side. 

You can also combine both functions.

Examples:

```js
const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  console.log("I'm running at 60 FPS!")
}, [])
```

```js
const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  console.log("I'm running at 60 FPS!")

  runAtTargetFps(10, () => {
    'worklet'
    console.log("I'm running at 10 FPS!")
  })
}, [])
```



```js
const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  console.log("I'm running at 60 FPS!")

  runAsync(frame, () => {
    'worklet'
    console.log("I'm running on another Thread, I can block for longer!")
  })
}, [])
```

```js
const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  console.log("I'm running at 60 FPS!")

  runAtTargetFps(10, () => {
    'worklet'
    runAsync(frame, () => {
      'worklet'
      console.log("I'm running on another Thread at 10 FPS, I can block for longer!")
    })
  })
}, [])
```
2023-02-15 16:47:09 +01:00
..
docs/guides feat: Sync Frame Processors (plus runAsync and runAtTargetFps) (#1472) 2023-02-15 16:47:09 +01:00
src Move Guides to docs/guides directory (#96) 2021-03-23 15:25:27 +01:00
static docs: Add Margelo Banner (https://margelo.io) 2022-04-11 15:55:03 +02:00
.gitignore Automatically build API documentation (#11) 2021-03-03 12:37:43 +01:00
babel.config.js Automatically build API documentation (#11) 2021-03-03 12:37:43 +01:00
docusaurus.config.js chore: Upgrade a whole lotta dependencies (#436) 2021-09-22 13:58:59 +02:00
package.json chore(deps): Upgrade docs deps (#697) 2022-01-02 18:06:19 +01:00
README.md Automatically build API documentation (#11) 2021-03-03 12:37:43 +01:00
sidebars.js docs: 📄 Add mocking section to docs (#1061) 2022-05-27 11:34:54 +02:00
yarn.lock chore(deps): Upgrade docs deps (#697) 2022-01-02 18:06:19 +01:00

Website

This website is built using Docusaurus 2, a modern static website generator.

Installation

yarn install

Local Development

yarn start

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

Build

yarn build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment

GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.