React native camera
React native has the react-native-camera library which allows you to use cameras in your applications, projects to read QR codes and many other things. This library supports photographs, videos, face detection(Android & iOS), barcode scanning, text recognition(optional installation for iOS using CocoaPods). You can install it using yarn or npm.
yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git npm install --save react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.gitLike the apps you see in everyday life to use the camera you need to ask for camera permissions in Android.
<uses-permission android:name="android.permission.CAMERA" />To use video recording features add the below lines of code to AndroidManifest.xml.
In the case of iOS update the info.plist with the usage description for the camera.<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
...NSCameraUsageDescription Your own description of the purpose …
Required packages for our example are expo-camera and expo-av. Expo-camera is for capturing photos and videos. Expo-av is the module from which videos are imported to play our recorded video.
We will install both packages in the shell using one of the given commands.
$yarn add expo-camera expo-av Or $npm install expo-camera expo-av
Camera component is then added to the view in our project.
import React, { useState, useRef, useEffect } from "react"; import { StyleSheet, Dimensions, View, Text, TouchableOpacity, SafeAreaView, } from "react-native"; import { Camera } from "expo-camera"; import { Video } from "expo-av"; const WINDOW_HEIGHT = Dimensions.get("window").height; const closeButtonSize = Math.floor(WINDOW_HEIGHT * 0.03); const captureSize = Math.floor(WINDOW_HEIGHT * 0.09); export default function App() { const [hasPermission, setHasPermission] = useState(null); const [cameraType, setCameraType] = useState(Camera.Constants.Type.back); const [isPreview, setIsPreview] = useState(false); const [isCameraReady, setIsCameraReady] = useState(false); const [isVideoRecording, setIsVideoRecording] = useState(false); const [videoSource, setVideoSource] = useState(null); const cameraRef = useRef(); useEffect(() => { (async () => { const { status } = await Camera.requestPermissionsAsync(); setHasPermission(status === "granted"); })(); }, []); const onCameraReady = () => { setIsCameraReady(true); }; const takePicture = async () => { if (cameraRef.current) { const options = { quality: 0.5, base64: true, skipProcessing: true }; const data = await cameraRef.current.takePictureAsync(options); const source = data.uri; if (source) { await cameraRef.current.pausePreview(); setIsPreview(true); console.log("picture source", source); } } }; const recordVideo = async () => { if (cameraRef.current) { try { const videoRecordPromise = cameraRef.current.recordAsync(); if (videoRecordPromise) { setIsVideoRecording(true); const data = await videoRecordPromise; const source = data.uri; if (source) { setIsPreview(true); console.log("video source", source); setVideoSource(source); } } } catch (error) { console.warn(error); } } }; const stopVideoRecording = () => { if (cameraRef.current) { setIsPreview(false); setIsVideoRecording(false); cameraRef.current.stopRecording(); } }; const switchCamera = () => { if (isPreview) { return; } setCameraType((prevCameraType) => prevCameraType === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back ); }; const cancelPreview = async () => { await cameraRef.current.resumePreview(); setIsPreview(false); setVideoSource(null); }; const renderCancelPreviewButton = () => (); const renderVideoPlayer = () => ( ); const renderVideoRecordIndicator = () => ( ); const renderCaptureControl = () => ( {"Recording..."} ); if (hasPermission === null) { return {"Flip"} ; } if (hasPermission === false) { return No access to camera ; } return (); } const styles = StyleSheet.create({ container: { ...StyleSheet.absoluteFillObject, }, closeButton: { position: "absolute", top: 35, left: 5, height: closeButtonSize, width: closeButtonSize, borderRadius: Math.floor(closeButtonSize / ), justifyContent: "center", alignItems: "center", backgroundColor: "#c4c5c4", opacity: 0.7, zIndex: , }, media: { ...StyleSheet.absoluteFillObject, }, closeCross: { width: "68%", height: , backgroundColor: "black", }, control: { position: "absolute", flexDirection: "row", bottom: 38, width: " 00%", alignItems: "center", justifyContent: "center", }, capture: { backgroundColor: "#f5f6f5", borderRadius: 5, height: captureSize, width: captureSize, borderRadius: Math.floor(captureSize / ), marginHorizontal: 3 , }, recordIndicatorContainer: { flexDirection: "row", position: "absolute", top: 5, alignSelf: "center", justifyContent: "center", alignItems: "center", backgroundColor: "transparent", opacity: 0.7, }, recordTitle: { fontSize: 4, color: "#ffffff", textAlign: "center", }, recordDot: { borderRadius: 3, height: 6, width: 6, backgroundColor: "#ff0000", marginHorizontal: 5, }, text: { color: "#fff", }, }); { console.log("cammera error", error); }} /> {isVideoRecording && renderVideoRecordIndicator()} {videoSource && renderVideoPlayer()} {isPreview && renderCancelPreviewButton()} {!videoSource && !isPreview && renderCaptureControl()}
Now your camera is ready, now test it on an actual device.
Comments
0 comments
Please Sign in or Create an account to Post Comments