docs: Fix hightlight line
This commit is contained in:
parent
42d9948e8a
commit
4830ba8bf6
@ -14,10 +14,11 @@ Frame Processor Plugins are **native functions** which can be directly called fr
|
||||
|
||||
They receive a frame from the Camera as an input and can return any kind of output. For example, a `detectFaces` function returns an array of detected faces in the frame:
|
||||
|
||||
```tsx {4-5}
|
||||
```tsx
|
||||
function App() {
|
||||
const frameProcessor = useFrameProcessor((frame) => {
|
||||
'worklet'
|
||||
// highlight-next-line
|
||||
const faces = detectFaces(frame)
|
||||
console.log(`Faces in Frame: ${faces}`)
|
||||
}, [])
|
||||
|
@ -26,10 +26,11 @@ export function scanFaces(frame: Frame): object {
|
||||
|
||||
Simply call the wrapper Worklet in your Frame Processor:
|
||||
|
||||
```tsx {4}
|
||||
```tsx
|
||||
function App() {
|
||||
const frameProcessor = useFrameProcessor((frame) => {
|
||||
'worklet'
|
||||
// highlight-next-line
|
||||
const faces = scanFaces(frame)
|
||||
console.log(`Faces in Frame: ${faces}`)
|
||||
}, [])
|
||||
|
@ -29,12 +29,13 @@ For reference see the [CLI's docs](https://github.com/mateusz1913/vision-camera-
|
||||
|
||||
2. Register the package in MainApplication.java
|
||||
|
||||
```java {6}
|
||||
```java
|
||||
@Override
|
||||
protected List<ReactPackage> getPackages() {
|
||||
@SuppressWarnings("UnnecessaryLocalVariable")
|
||||
List<ReactPackage> packages = new PackageList(this).getPackages();
|
||||
...
|
||||
// highlight-next-line
|
||||
packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
|
||||
return packages;
|
||||
}
|
||||
@ -54,7 +55,7 @@ For reference see the [CLI's docs](https://github.com/mateusz1913/vision-camera-
|
||||
2. Create a Java source file, for the Face Detector Plugin this will be called `FaceDetectorFrameProcessorPlugin.java`.
|
||||
3. Add the following code:
|
||||
|
||||
```java {8}
|
||||
```java
|
||||
import com.mrousavy.camera.frameprocessor.Frame;
|
||||
import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin;
|
||||
|
||||
@ -75,7 +76,7 @@ The Frame Processor Plugin will be exposed to JS through the `VisionCameraProxy`
|
||||
4. **Implement your Frame Processing.** See the [Example Plugin (Java)](https://github.com/mrousavy/react-native-vision-camera/blob/main/package/example/android/app/src/main/java/com/mrousavy/camera/example/ExampleFrameProcessorPlugin.java) for reference.
|
||||
5. Create a new Java file which registers the Frame Processor Plugin in a React Package, for the Face Detector plugin this file will be called `FaceDetectorFrameProcessorPluginPackage.java`:
|
||||
|
||||
```java {13}
|
||||
```java
|
||||
import com.facebook.react.ReactPackage;
|
||||
import com.facebook.react.bridge.NativeModule;
|
||||
import com.facebook.react.bridge.ReactApplicationContext;
|
||||
@ -85,10 +86,15 @@ import com.mrousavy.camera.frameprocessor.FrameProcessorPluginRegistry;
|
||||
import javax.annotation.Nonnull;
|
||||
|
||||
public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
|
||||
FaceDetectorFrameProcessorPluginPackage() {
|
||||
// highlight-start
|
||||
FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces", options -> new FaceDetectorFrameProcessorPlugin());
|
||||
// highlight-end
|
||||
}
|
||||
|
||||
@NonNull
|
||||
@Override
|
||||
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
|
||||
FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces", options -> new FaceDetectorFrameProcessorPlugin());
|
||||
return Collections.emptyList();
|
||||
}
|
||||
|
||||
@ -102,12 +108,13 @@ public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
|
||||
|
||||
6. Register the package in MainApplication.java
|
||||
|
||||
```java {6}
|
||||
```java
|
||||
@Override
|
||||
protected List<ReactPackage> getPackages() {
|
||||
@SuppressWarnings("UnnecessaryLocalVariable")
|
||||
List<ReactPackage> packages = new PackageList(this).getPackages();
|
||||
...
|
||||
// highlight-next-line
|
||||
packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
|
||||
return packages;
|
||||
}
|
||||
@ -120,7 +127,7 @@ public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
|
||||
2. Create a Kotlin source file, for the Face Detector Plugin this will be called `FaceDetectorFrameProcessorPlugin.kt`.
|
||||
3. Add the following code:
|
||||
|
||||
```kotlin {7}
|
||||
```kotlin
|
||||
import com.mrousavy.camera.frameprocessor.Frame
|
||||
import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin
|
||||
|
||||
@ -140,7 +147,7 @@ The Frame Processor Plugin will be exposed to JS through the `VisionCameraProxy`
|
||||
4. **Implement your Frame Processing.** See the [Example Plugin (Java)](https://github.com/mrousavy/react-native-vision-camera/blob/main/package/example/android/app/src/main/java/com/mrousavy/camera/example/ExampleFrameProcessorPlugin.java) for reference.
|
||||
5. Create a new Kotlin file which registers the Frame Processor Plugin in a React Package, for the Face Detector plugin this file will be called `FaceDetectorFrameProcessorPluginPackage.kt`:
|
||||
|
||||
```kotlin {9-11}
|
||||
```kotlin
|
||||
import com.facebook.react.ReactPackage
|
||||
import com.facebook.react.bridge.NativeModule
|
||||
import com.facebook.react.bridge.ReactApplicationContext
|
||||
@ -148,10 +155,15 @@ import com.facebook.react.uimanager.ViewManager
|
||||
import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin
|
||||
|
||||
class FaceDetectorFrameProcessorPluginPackage : ReactPackage {
|
||||
override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
|
||||
init {
|
||||
// highlight-start
|
||||
FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces") { options ->
|
||||
FaceDetectorFrameProcessorPlugin()
|
||||
}
|
||||
// highlight-end
|
||||
}
|
||||
|
||||
override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
|
||||
return emptyList()
|
||||
}
|
||||
|
||||
@ -163,12 +175,13 @@ class FaceDetectorFrameProcessorPluginPackage : ReactPackage {
|
||||
|
||||
6. Register the package in MainApplication.java
|
||||
|
||||
```java {6}
|
||||
```java
|
||||
@Override
|
||||
protected List<ReactPackage> getPackages() {
|
||||
@SuppressWarnings("UnnecessaryLocalVariable")
|
||||
List<ReactPackage> packages = new PackageList(this).getPackages();
|
||||
...
|
||||
// highlight-next-line
|
||||
packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
|
||||
return packages;
|
||||
}
|
||||
|
@ -118,15 +118,17 @@ public class FaceDetectorFrameProcessorPlugin: FrameProcessorPlugin {
|
||||
|
||||
6. In your `AppDelegate.m`, add the following code to `application:didFinishLaunchingWithOptions:`:
|
||||
|
||||
```objc {5-8}
|
||||
```objc
|
||||
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
|
||||
{
|
||||
...
|
||||
// ...
|
||||
|
||||
// hightlight-start
|
||||
[FrameProcessorPluginRegistry addFrameProcessorPlugin:@"detectFaces"
|
||||
withInitializer:^FrameProcessorPlugin*(NSDictionary* options) {
|
||||
return [[FaceDetectorFrameProcessorPlugin alloc] initWithOptions:options];
|
||||
}];
|
||||
// hightlight-end
|
||||
|
||||
return [super application:application didFinishLaunchingWithOptions:launchOptions];
|
||||
}
|
||||
|
@ -7,17 +7,16 @@
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--docusaurus-highlighted-code-line-bg: rgb(229, 229, 232);
|
||||
--ifm-color-primary: rgb(132, 170, 124);
|
||||
--ifm-link-color: rgb(62, 166, 41);
|
||||
--ifm-code-font-size: 95%;
|
||||
--highlight-color: rgb(118, 228, 97);
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgb(72, 77, 91);
|
||||
display: flex;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
[data-theme='dark'] {
|
||||
/* Color which works with dark mode syntax highlighting theme */
|
||||
--docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
|
||||
}
|
||||
|
||||
img {
|
||||
|
Loading…
Reference in New Issue
Block a user