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;


Comments

Popular posts from this blog

WR3D wwe 2k19 MOD apk direct download link for Android

Download wwe2k17 wr3d

How to make resizeable window in pygame and make content adjustable according to window size