chore: Remove Skia ❌🎨 (#1740)

* Revert "feat: Skia for Android (#1731)"

This reverts commit a7c137da07.

* Remove some skia

* Remove all the Skia stuff.

* Update useFrameProcessor.ts

* Update lockfiles

* fix: Use native Preview again

* Use `OpenGLTexture&` again

* Remove `PreviewOutput` (we use `SurfaceView` in parallel)

* fix: Log photo widths

* fix: Fix cpplint

src/Camera.tsx

@@ -22,7 +22,6 @@ interface OnErrorEvent {
 type NativeCameraViewProps = Omit<CameraProps, 'device' | 'onInitialized' | 'onError' | 'frameProcessor'> & {
   cameraId: string;
   enableFrameProcessor: boolean;
-  previewType: 'native' | 'skia' | 'none';
   onInitialized?: (event: NativeSyntheticEvent<void>) => void;
   onError?: (event: NativeSyntheticEvent<OnErrorEvent>) => void;
   onViewReady: () => void;
@@ -413,7 +412,6 @@ export class Camera extends React.PureComponent<CameraProps> {
         onInitialized={this.onInitialized}
         onError={this.onError}
         enableFrameProcessor={frameProcessor != null}
-        previewType={frameProcessor?.type === 'skia-frame-processor' ? 'skia' : 'native'}
       />
     );
   }

src/CameraError.ts

@@ -54,7 +54,6 @@ export type SystemError =
   | 'system/camera-module-not-found'
   | 'system/no-camera-manager'
   | 'system/frame-processors-unavailable'
-  | 'system/skia-unavailable'
   | 'system/view-not-found';
 export type UnknownError = 'unknown/unknown';
 

src/CameraProps.ts

@@ -1,21 +1,16 @@
 import type { ViewProps } from 'react-native';
 import type { CameraDevice, CameraDeviceFormat, VideoStabilizationMode } from './CameraDevice';
 import type { CameraRuntimeError } from './CameraError';
-import type { DrawableFrame, Frame } from './Frame';
+import type { Frame } from './Frame';
 import type { Orientation } from './Orientation';
 
-export type FrameProcessor =
-  | {
-      frameProcessor: (frame: Frame) => void;
-      type: 'frame-processor';
-    }
-  | {
-      frameProcessor: (frame: DrawableFrame) => void;
-      type: 'skia-frame-processor';
-    };
+export type FrameProcessor = {
+  frameProcessor: (frame: Frame) => void;
+  type: 'frame-processor';
+};
 
 // TODO: Replace `enableHighQualityPhotos: boolean` in favor of `priorization: 'photo' | 'video'`
-// TODO: Use RCT_ENUM_PARSER for stuff like previewType, torch, videoStabilizationMode, and orientation
+// TODO: Use RCT_ENUM_PARSER for stuff like torch, videoStabilizationMode, and orientation
 // TODO: Use Photo HostObject for stuff like depthData, portraitEffects, etc.
 // TODO: Add RAW capture support
 
@@ -193,8 +188,6 @@ export interface CameraProps extends ViewProps {
   /**
    * A worklet which will be called for every frame the Camera "sees".
    *
-   * If {@linkcode previewType | previewType} is set to `"skia"`, you can draw content to the `Frame` using the react-native-skia API.
-   *
    * > See [the Frame Processors documentation](https://mrousavy.github.io/react-native-vision-camera/docs/guides/frame-processors) for more information
    *
    * @example

src/Frame.ts

@@ -1,4 +1,3 @@
-import type { SkCanvas, SkPaint } from '@shopify/react-native-skia';
 import type { Orientation } from './Orientation';
 import { PixelFormat } from './PixelFormat';
 
@@ -22,6 +21,10 @@ export interface Frame {
    * Returns the amount of bytes per row.
    */
   bytesPerRow: number;
+  /**
+   * Returns the number of planes this frame contains.
+   */
+  planesCount: number;
   /**
    * Returns whether the Frame is mirrored (selfie camera) or not.
    */
@@ -56,46 +59,9 @@ export interface Frame {
    * ```
    */
   toString(): string;
-  /**
-   * Whether the Frame can be drawn onto using Skia.
-   * Always false for `useFrameProcessor`. Use `useSkiaFrameProcessor` instead.
-   */
-  isDrawable: boolean;
 }
 
-export interface DrawableFrame extends Frame, SkCanvas {
-  /**
-   * Renders the Frame to the screen.
-   *
-   * By default a Frame has already been rendered to the screen once, so if you call this method again,
-   * previously drawn content will be overwritten.
-   *
-   * @param paint (Optional) A Paint object to use to draw the Frame with. For example, this can contain a Shader (ImageFilter)
-   * @example
-   * ```ts
-   * const INVERTED_COLORS_SHADER = `
-   *  uniform shader image;
-   *  half4 main(vec2 pos) {
-   *    vec4 color = image.eval(pos);
-   *    return vec4(1.0 - color.rgb, 1.0);
-   * }`
-   * const runtimeEffect = Skia.RuntimeEffect.Make(INVERT_COLORS_SHADER)
-   * if (runtimeEffect == null) throw new Error('Shader failed to compile!')
-   * const shaderBuilder = Skia.RuntimeShaderBuilder(runtimeEffect)
-   * const imageFilter = Skia.ImageFilter.MakeRuntimeShader(shaderBuilder, null, null)
-   * const paint = Skia.Paint()
-   * paint.setImageFilter(imageFilter)
-   *
-   * const frameProcessor = useSkiaFrameProcessor((frame) => {
-   *   'worklet'
-   *   frame.render(paint) // <-- draws frame with inverted colors now
-   * }, [paint])
-   * ```
-   */
-  render: (paint?: SkPaint) => void;
-}
-
-export interface FrameInternal extends Frame, DrawableFrame {
+export interface FrameInternal extends Frame {
   /**
    * Increment the Frame Buffer ref-count by one.
    *

src/FrameProcessorPlugins.ts

@@ -28,7 +28,6 @@ interface TVisionCameraProxy {
    * The Plugin has to be registered on the native side, otherwise this returns `undefined`
    */
   getFrameProcessorPlugin: (name: string) => FrameProcessorPlugin | undefined;
-  isSkiaEnabled: boolean;
 }
 
 let hasWorklets = false;
@@ -66,7 +65,6 @@ try {
 }
 
 let proxy: TVisionCameraProxy = {
-  isSkiaEnabled: false,
   getFrameProcessorPlugin: () => {
     throw new CameraRuntimeError('system/frame-processors-unavailable', 'Frame Processors are not enabled!');
   },

src/hooks/useFrameProcessor.ts

@@ -1,16 +1,23 @@
 import { DependencyList, useMemo } from 'react';
-import type { DrawableFrame, Frame, FrameInternal } from '../Frame';
+import type { Frame, FrameInternal } from '../Frame';
 import { FrameProcessor } from '../CameraProps';
 
+/**
+ * Create a new Frame Processor function which you can pass to the `<Camera>`.
+ * (See ["Frame Processors"](https://mrousavy.github.io/react-native-vision-camera/docs/guides/frame-processors))
+ *
+ * Make sure to add the `'worklet'` directive to the top of the Frame Processor function, otherwise it will not get compiled into a worklet.
+ *
+ * Also make sure to memoize the returned object, so that the Camera doesn't reset the Frame Processor Context each time.
+ */
 export function createFrameProcessor(frameProcessor: FrameProcessor['frameProcessor'], type: FrameProcessor['type']): FrameProcessor {
   return {
-    frameProcessor: (frame: Frame | DrawableFrame) => {
+    frameProcessor: (frame: Frame) => {
       'worklet';
       // Increment ref-count by one
       (frame as FrameInternal).incrementRefCount();
       try {
         // Call sync frame processor
-        // @ts-expect-error the frame type is ambiguous here
         frameProcessor(frame);
       } finally {
         // Potentially delete Frame if we were the last ref (no runAsync)
@@ -43,28 +50,3 @@ export function useFrameProcessor(frameProcessor: (frame: Frame) => void, depend
   // eslint-disable-next-line react-hooks/exhaustive-deps
   return useMemo(() => createFrameProcessor(frameProcessor, 'frame-processor'), dependencies);
 }
-
-/**
- * Returns a memoized Skia Frame Processor function wich you can pass to the `<Camera>`.
- * The Skia Frame Processor allows you to draw anything onto the Frame using react-native-skia.
- * (See ["Frame Processors"](https://mrousavy.github.io/react-native-vision-camera/docs/guides/frame-processors))
- *
- * Make sure to add the `'worklet'` directive to the top of the Frame Processor function, otherwise it will not get compiled into a worklet.
- *
- * @param frameProcessor The Frame Processor
- * @param dependencies The React dependencies which will be copied into the VisionCamera JS-Runtime.
- * @returns The memoized Frame Processor.
- * @example
- * ```ts
- * const frameProcessor = useSkiaFrameProcessor((frame) => {
- *   'worklet'
- *   const qrCodes = scanQRCodes(frame)
- *   frame.drawRect(...)
- *   console.log(`QR Codes: ${qrCodes}`)
- * }, [])
- * ```
- */
-export function useSkiaFrameProcessor(frameProcessor: (frame: DrawableFrame) => void, dependencies: DependencyList): FrameProcessor {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => createFrameProcessor(frameProcessor, 'skia-frame-processor'), dependencies);
-}