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:
|
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}`)
|
||||||
}, [])
|
}, [])
|
||||||
|
@ -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}`)
|
||||||
}, [])
|
}, [])
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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];
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user