react native cam with opencv

 import React, { useState, useEffect, useRef } from 'react';

import {

  View,

  StyleSheet,

  Dimensions,

  TouchableOpacity,

  Text,

  Image,

} from 'react-native';

import { RNCamera } from 'react-native-camera';

import Video from 'react-native-video';

import { Mat, CvType, CvBridge } from 'react-native-opencv';

const CameraScreen = () => {

  const [isCameraMode, setCameraMode] = useState(true);

  const [frame, setFrame] = useState(null);

  const [cvBridge, setCvBridge] = useState(null);

  const toggleMode = () => {

    setCameraMode(!isCameraMode);

  };

  useEffect(() => {

    setCvBridge(new CvBridge());

  }, []);

  const processFrame = async (rawFrame) => {

    if (isCameraMode) {

      // Convert raw camera frame to OpenCV Mat format

      const rgbaMat = new Mat(

        rawFrame.height,

        rawFrame.width,

        CvType.CV_8UC4

      );

      cvBridge.toMat(rawFrame.data, rgbaMat);

      // Perform object detection or any other processing using OpenCV

      // Modify this code according to your specific object detection implementation

      // Draw a rectangle on the frame as an example

      const rectColor = new CvBridge.Scalar(255, 0, 0); // Red color

      const rectThickness = 2;

      const rectStart = new CvBridge.Point(50, 50);

      const rectEnd = new CvBridge.Point(200, 200);

      cvBridge.rectangle(

        rgbaMat,

        rectStart,

        rectEnd,

        rectColor,

        rectThickness

      );

      // Convert the processed frame back to raw camera frame format

      const processedFrame = await cvBridge.toBitmap(rgbaMat);

      setFrame(processedFrame);

    }

  };

  return (

    <View style={styles.container}>

      {isCameraMode ? (

        <RNCamera

          style={styles.preview}

          type={RNCamera.Constants.Type.back}

          captureAudio={false}

          onCameraReady={() => {

            // Additional initialization if required

          }}

          onFrameCaptured={(event) => {

            processFrame(event.frame);

          }}

        />

      ) : (

        <Video

          source={{ uri: 'http://192.168.16.1' }}

          style={styles.video}

          resizeMode="contain"

          repeat

          controls

        />

      )}

      <TouchableOpacity style={styles.toggleButton} onPress={toggleMode}>

        <Text style={styles.toggleButtonText}>

          {isCameraMode ? 'Switch to Video' : 'Switch to Camera'}

        </Text>

      </TouchableOpacity>

      {frame && <Image source={{ uri: frame }} style={styles.frame} />}

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: 'black',

  },

  preview: {

    flex: 1,

    justifyContent: 'flex-end',

    alignItems: 'center',

  },

  video: {

    flex: 1,

  },

  toggleButton: {

    position: 'absolute',

    top: 16,

    right: 16,

    padding: 8,

    backgroundColor: 'rgba(255, 255, 255, 0.8)',

    borderRadius: 8,

  },

  toggleButtonText: {

    fontSize: 16,

    fontWeight: 'bold',

  },

  frame: {

    position: 'absolute',

    top: 0,

    right: 0,

    width: Dimensions.get('window').width / 4,

    height: Dimensions.get('window').height / 4,

    resizeMode: 'contain',

  },

});

export default CameraScreen;