Posts

Showing posts from May, 2023

Cam

 import React, { useRef, useState, useEffect } from 'react'; import { StyleSheet, View } from 'react-native'; import Video from 'react-native-vlc-player'; import * as tf from '@tensorflow/tfjs'; import { cameraWithTensors } from '@tensorflow/tfjs-react-native'; const TensorCamera = cameraWithTensors(Video); const App = () => {   const [model, setModel] = useState(null);   const [objects, setObjects] = useState([]);   const cameraRef = useRef(null);   useEffect(() => {     // Load the object detection model     async function loadModel() {       const model = await tf.loadGraphModel('model.json');       setModel(model);     }     loadModel();   }, []);   const handleFrame = async (images, updatePreview, gl) => {     const image = images.next().value;     const tensor = tf.browser.fromPixels(image);     const predictions = await model.executeAsync(tensor.expandDims());     const objects = parsePredictions(predictions);     setObjec

Live

 import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import Camera from 'react-native-camera'; import ObjectDetectionCamera from 'react-native-vision-camera'; export default class App extends Component {   state = {      rtspUrl: 'rtsp://your_rtsp_url'     }   handleObjectsDetected = objects => {     console.log(objects);     }   render() {     return (       <View style={styles.container}>        <ObjectDetectionCamera          style={styles.preview}          uri={this.state.rtspUrl}          onObjectDetected={this.handleObjectsDetected}        />       </View>     );   } } const styles = StyleSheet.create({   container: {     flex: 1,     flexDirection: 'column',     backgroundColor: 'black'   },   preview: {     flex: 1,     justifyContent: 'flex-end',     alignItems: 'center'   } });

with vision camera

 import React, { useEffect, useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { Camera, useCameraDevices } from 'react-native-vision-camera'; const styles = StyleSheet.create({   container: {     flex: 1,     backgroundColor: '#000',   }, }); function VideoScreen() {   const { cameraDevices, getCameraPermissions, requestCameraPermission } = useCameraDevices();   const [cameraActive, setCameraActive] = useState(false);   // Check camera permission and request if not granted   useEffect(() => {     getCameraPermissions().then((permissions) => {       if (!permissions.cameraPermission) {         requestCameraPermission();       }     });   }, []);   return (     <View style={styles.container}>       {cameraDevices.map((device) => (         <Camera           key={device.id}           device={device}           style={{ flex: 1 }}           isActive={cameraActive && device.isActive}           enableFrame

detection with tenserflow

 import React, { Component } from 'react'; import { View, StyleSheet } from 'react-native'; import Video from 'react-native-video'; import * as tf from '@tensorflow/tfjs'; import '@tensorflow/tfjs-react-native'; // Constants for object detection const MODEL_URL = 'https://tfhub.dev/tensorflow/tfjs-model/ssd_mobilenet_v1/1/default/1/model.json'; const INPUT_SIZE = 224; // Input size required by the model const OBJECT_THRESHOLD = 0.5; // Minimum confidence threshold for detected objects class VideoScreen extends Component {   constructor(props) {     super(props);     this.state = {       isModelReady: false,       objects: [],     };     // Load the TensorFlow.js model     this.loadModel();   }   async loadModel() {     try {       await tf.ready();       const model = await tf.loadGraphModel(MODEL_URL);       this.setState({ isModelReady: true, model });       this.processVideoFrames();     } catch (error) {       console.error('Error

play video from file

import React, {Component} from 'react' import PropTypes from 'prop-types' import { View, StyleSheet } from 'react-native' import Video from 'react-native-video' export default class VideoComponent extends React.Component {   renderVideo () {       return(         <Video           source={require('./assets/Piano_Playing_Close.mp4')}           style={{ width: 800, height: 800 }}           muted={true}           repeat={true}           resizeMode={"cover"}           volume={1.0}           rate={1.0}           ignoreSilentSwitch={"obey"}         />       )   }   render () {     return (       <View>         {this.renderVideo()}       </View>     )   } } // Later on in your styles.. var styles = StyleSheet.create({   backgroundVideo: {     position: 'absolute',     top: 0,     left: 0,     bottom: 0,     right: 0,   }, });

react native streaming with react-native-streaming

 import React, { Component } from 'react'; import { View } from 'react-native'; import { RTSPView } from 'react-native-streaming'; class CameraScreen extends Component {   render() {     return (       <View style={{ flex: 1 }}>         <RTSPView           style={{ flex: 1 }}           url="rtsp://192.168.1.16/video" // Replace with your IP camera's RTSP URL           ref={(ref) => {             this.rtsvp = ref;           }}           onConnectionSuccess={() => {             console.log('RTSP connection successful');           }}           onConnectionFailed={() => {             console.log('RTSP connection failed');           }}           onReady={() => {             console.log('RTSP stream ready');           }}           onVideoEnd={() => {             console.log('RTSP stream ended');           }}           onError={(err) => {             console.log('RTSP error: ', err);      

react native webview for video

 import React from 'react'; import { View, WebView, StyleSheet } from 'react-native'; const CameraScreen = () => {   return (     <View style={styles.container}>       <WebView         source={{ uri: 'http://192.168.1.16' }} // Replace with your IP camera's URL         style={styles.webView}         javaScriptEnabled={true}         domStorageEnabled={true}         allowsFullscreenVideo={true}         mediaPlaybackRequiresUserAction={false}       />     </View>   ); }; const styles = StyleSheet.create({   container: {     flex: 1,     backgroundColor: 'black',   },   webView: {     flex: 1,     alignSelf: 'stretch',   }, }); export default CameraScreen;

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

rtsp on react native (vlc player)

 import React from 'react'; import { View } from 'react-native'; import VLCPlayer from 'react-native-vlc-player'; const CameraScreen = () => {   const ipCameraUrl = 'rtsp://YOUR_IP_CAMERA_URL';   return (     <View style={{ flex: 1 }}>       <VLCPlayer         ref={(ref) => (this.vlcPlayer = ref)}         style={{ flex: 1 }}         source={{           uri: ipCameraUrl,           autoplay: true,           initOptions: ['--rtsp-tcp'],         }}       />     </View>   ); }; export default CameraScreen;

rtsp in react native

import React from 'react'; import { View } from 'react-native'; import { RtspPlayer } from 'react-native-rtsp-player'; const CameraScreen = () => {   const ipCameraUrl = 'rtsp://YOUR_IP_CAMERA_URL';   return (     <View style={{ flex: 1 }}>       <RtspPlayer         url={ipCameraUrl}         style={{ flex: 1 }}         autoplay         controls       />     </View>   ); }; export default CameraScreen;

Switch toggle button in react native

Image
  import * as React from 'react'; import { Text, View, StyleSheet, TouchableOpacity } from 'react-native'; import Constants from 'expo-constants'; export default function App() {   const [pressed1, setPressed1]= React.useState(false);   const [pressed2, setPressed2]= React.useState(false);   const forfirst=()=> {     setPressed1(!pressed1);     setPressed2(false)   };   const forsecond=()=> {     setPressed1(false);     setPressed2(!pressed2)   };   return (     <View style={styles.container}>     <Text style={{fontSize: 18, fontWeight: 'bold'     , alignContent: 'center', textAlign: 'center'}}     >Switch on button</Text>       <View style={styles.buttonBg}>       <TouchableOpacity onPress={() => forfirst()}       style ={{         width: '53%',         height: "100%",         backgroundColor: pressed1 ? '#49B9E9' : 'white',         borderRadius: 10,         padding: 2