docs: Fix hightlight line

This commit is contained in:
Marc Rousavy 2023-09-27 12:10:06 +02:00
parent 42d9948e8a
commit 4830ba8bf6
5 changed files with 34 additions and 18 deletions

View File

@ -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: 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() { function App() {
const frameProcessor = useFrameProcessor((frame) => { const frameProcessor = useFrameProcessor((frame) => {
'worklet' 'worklet'
// highlight-next-line
const faces = detectFaces(frame) const faces = detectFaces(frame)
console.log(`Faces in Frame: ${faces}`) console.log(`Faces in Frame: ${faces}`)
}, []) }, [])

View File

@ -26,10 +26,11 @@ export function scanFaces(frame: Frame): object {
Simply call the wrapper Worklet in your Frame Processor: Simply call the wrapper Worklet in your Frame Processor:
```tsx {4} ```tsx
function App() { function App() {
const frameProcessor = useFrameProcessor((frame) => { const frameProcessor = useFrameProcessor((frame) => {
'worklet' 'worklet'
// highlight-next-line
const faces = scanFaces(frame) const faces = scanFaces(frame)
console.log(`Faces in Frame: ${faces}`) console.log(`Faces in Frame: ${faces}`)
}, []) }, [])

View File

@ -29,12 +29,13 @@ For reference see the [CLI's docs](https://github.com/mateusz1913/vision-camera-
2. Register the package in MainApplication.java 2. Register the package in MainApplication.java
```java {6} ```java
@Override @Override
protected List<ReactPackage> getPackages() { protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable") @SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages(); List<ReactPackage> packages = new PackageList(this).getPackages();
... ...
// highlight-next-line
packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
return packages; 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`. 2. Create a Java source file, for the Face Detector Plugin this will be called `FaceDetectorFrameProcessorPlugin.java`.
3. Add the following code: 3. Add the following code:
```java {8} ```java
import com.mrousavy.camera.frameprocessor.Frame; import com.mrousavy.camera.frameprocessor.Frame;
import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin; 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. 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`: 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.ReactPackage;
import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactApplicationContext;
@ -85,10 +86,15 @@ import com.mrousavy.camera.frameprocessor.FrameProcessorPluginRegistry;
import javax.annotation.Nonnull; import javax.annotation.Nonnull;
public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage { public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
FaceDetectorFrameProcessorPluginPackage() {
// highlight-start
FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces", options -> new FaceDetectorFrameProcessorPlugin());
// highlight-end
}
@NonNull @NonNull
@Override @Override
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) { public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces", options -> new FaceDetectorFrameProcessorPlugin());
return Collections.emptyList(); return Collections.emptyList();
} }
@ -102,12 +108,13 @@ public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
6. Register the package in MainApplication.java 6. Register the package in MainApplication.java
```java {6} ```java
@Override @Override
protected List<ReactPackage> getPackages() { protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable") @SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages(); List<ReactPackage> packages = new PackageList(this).getPackages();
... ...
// highlight-next-line
packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
return packages; 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`. 2. Create a Kotlin source file, for the Face Detector Plugin this will be called `FaceDetectorFrameProcessorPlugin.kt`.
3. Add the following code: 3. Add the following code:
```kotlin {7} ```kotlin
import com.mrousavy.camera.frameprocessor.Frame import com.mrousavy.camera.frameprocessor.Frame
import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin 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. 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`: 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.ReactPackage
import com.facebook.react.bridge.NativeModule import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext import com.facebook.react.bridge.ReactApplicationContext
@ -148,10 +155,15 @@ import com.facebook.react.uimanager.ViewManager
import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin
class FaceDetectorFrameProcessorPluginPackage : ReactPackage { class FaceDetectorFrameProcessorPluginPackage : ReactPackage {
override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> { init {
// highlight-start
FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces") { options -> FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces") { options ->
FaceDetectorFrameProcessorPlugin() FaceDetectorFrameProcessorPlugin()
} }
// highlight-end
}
override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
return emptyList() return emptyList()
} }
@ -163,12 +175,13 @@ class FaceDetectorFrameProcessorPluginPackage : ReactPackage {
6. Register the package in MainApplication.java 6. Register the package in MainApplication.java
```java {6} ```java
@Override @Override
protected List<ReactPackage> getPackages() { protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable") @SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages(); List<ReactPackage> packages = new PackageList(this).getPackages();
... ...
// highlight-next-line
packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
return packages; return packages;
} }

View File

@ -118,15 +118,17 @@ public class FaceDetectorFrameProcessorPlugin: FrameProcessorPlugin {
6. In your `AppDelegate.m`, add the following code to `application:didFinishLaunchingWithOptions:`: 6. In your `AppDelegate.m`, add the following code to `application:didFinishLaunchingWithOptions:`:
```objc {5-8} ```objc
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{ {
... // ...
// hightlight-start
[FrameProcessorPluginRegistry addFrameProcessorPlugin:@"detectFaces" [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"detectFaces"
withInitializer:^FrameProcessorPlugin*(NSDictionary* options) { withInitializer:^FrameProcessorPlugin*(NSDictionary* options) {
return [[FaceDetectorFrameProcessorPlugin alloc] initWithOptions:options]; return [[FaceDetectorFrameProcessorPlugin alloc] initWithOptions:options];
}]; }];
// hightlight-end
return [super application:application didFinishLaunchingWithOptions:launchOptions]; return [super application:application didFinishLaunchingWithOptions:launchOptions];
} }

View File

@ -7,17 +7,16 @@
/* You can override the default Infima variables here. */ /* You can override the default Infima variables here. */
:root { :root {
--docusaurus-highlighted-code-line-bg: rgb(229, 229, 232);
--ifm-color-primary: rgb(132, 170, 124); --ifm-color-primary: rgb(132, 170, 124);
--ifm-link-color: rgb(62, 166, 41); --ifm-link-color: rgb(62, 166, 41);
--ifm-code-font-size: 95%; --ifm-code-font-size: 95%;
--highlight-color: rgb(118, 228, 97); --highlight-color: rgb(118, 228, 97);
} }
.docusaurus-highlight-code-line { [data-theme='dark'] {
background-color: rgb(72, 77, 91); /* Color which works with dark mode syntax highlighting theme */
display: flex; --docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
} }
img { img {