├── .github └── FUNDING.yml ├── README.md ├── assets ├── icon.png ├── favicon.png ├── splash.png └── adaptive-icon.png ├── babel.config.js ├── .gitignore ├── .expo-shared └── assets.json ├── package.json ├── app.json └── App.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: imrohit007 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Video-Recording-React-Native-Expo 2 | 3 | Video-Recording-React-Native-Expo-main 4 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdullahthewebbee/Video-Recording-React-Native-Expo-main/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdullahthewebbee/Video-Recording-React-Native-Expo-main/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdullahthewebbee/Video-Recording-React-Native-Expo-main/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdullahthewebbee/Video-Recording-React-Native-Expo-main/HEAD/assets/adaptive-icon.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "expo": "~42.0.1", 12 | "expo-av": "^9.2.3", 13 | "expo-camera": "^11.2.2", 14 | "expo-status-bar": "~1.0.4", 15 | "react": "16.13.1", 16 | "react-dom": "16.13.1", 17 | "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz", 18 | "react-native-web": "~0.13.12" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.9.0" 22 | }, 23 | "private": true 24 | } 25 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "video", 4 | "slug": "video", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { StyleSheet ,Text, View, Button, Image} from 'react-native'; 3 | import { Camera } from 'expo-camera'; 4 | import { Video } from 'expo-av'; 5 | 6 | 7 | 8 | export default function App() { 9 | const [hasAudioPermission, setHasAudioPermission] = useState(null); 10 | const [hasCameraPermission, setHasCameraPermission] = useState(null); 11 | const [camera, setCamera] = useState(null); 12 | const [record, setRecord] = useState(null); 13 | const [type, setType] = useState(Camera.Constants.Type.back); 14 | const video = React.useRef(null); 15 | const [status, setStatus] = React.useState({}); 16 | 17 | 18 | useEffect(() => { 19 | (async () => { 20 | const cameraStatus = await Camera.requestPermissionsAsync(); 21 | setHasCameraPermission(cameraStatus.status === 'granted'); 22 | 23 | const audioStatus = await Camera.requestMicrophonePermissionsAsync(); 24 | setHasAudioPermission(audioStatus.status === 'granted'); 25 | 26 | })(); 27 | }, []); 28 | 29 | const takeVideo = async () => { 30 | if(camera){ 31 | const data = await camera.recordAsync({ 32 | maxDuration:10 33 | }) 34 | setRecord(data.uri); 35 | console.log(data.uri); 36 | } 37 | } 38 | 39 | const stopVideo = async () => { 40 | camera.stopRecording(); 41 | } 42 | 43 | if (hasCameraPermission === null || hasAudioPermission === null ) { 44 | return ; 45 | } 46 | if (hasCameraPermission === false || hasAudioPermission === false) { 47 | return No access to camera; 48 | } 49 | return ( 50 | 51 | 52 | setCamera(ref)} 54 | style={styles.fixedRatio} 55 | type={type} 56 | ratio={'4:3'} /> 57 | 58 |