An example application using the Expo.Camera API.
camerja's Introduction
camerja's People
Forkers
agrcrobles alexandervorkov hmilyjenny yasserfabdulrahman tigreezy shaksi juhahinkula origamih dond2clouds pogrebnav17 zerofruit gianpaj max923 rudianton93 ajchambeaud cryptixcoder mapet68 priyal27 briankung raphaelrk greenwind89 socialskyinc mcclouda ririn dreadrocksean rodolfopeixoto mekyleh sistemascai kinfongiscool melchua samsamkim nirobon lkjhvcxz2002 dancalifornia aemal luyx2412 shanoof issawat abelardogilm apriliantocecep kangky hussainwali74 veveue jesouhaite08 malhju whoami-shubham stereoraj julievalet reactspain crescimentoonline johnsonzhangc burbelohugo bitardev thaiyue chrismejia saadpasta gyanadeep dmydry bberak lindalevanen mfalthaw nathanjeffrey samuelsonbrito ilhamhuda bapjiws nicolas-macbeth olegp306 zack12027 methodbox riyadshauk dhiraj1site zuzpk andraste lyioh lyradnis frankwrk sfirleaalex kahefdev kmmanojeewa tighrine val3ntin-ch kapyab aaronbesson mr-1311 pannnnn hemmerly abbymac nkaramarko moahammadalt kaustubh-clairvoyant masaok csu6 richgilbank jasontzg asp3 haouiha abyfall aravindpk myjupiter jmogielnickicamerja's Issues
Where photos are being saved?
after saving the photos in App.js:
FileSystem.moveAsync({
from: data.uri,
to: `${FileSystem.documentDirectory}photos/Photo_${this.state.photoId}.jpg`,
})
I could not locate them on my phone, I had checked the target path (${FileSystem.documentDirectory}photos/Photo_${this.state.photoId}.jpg`), but it does not exist.!!
In the GalleryScreen module the photos are being loaded from the state, so is the state persistent?
best regards
Camera lagging on Android 8
Hello. I am trying to use camerja on a project i'm currently developing. However, i've came across a bug and i'm hoping you can help me with that. On Android 7, camerja works nice, however, when i tested it on an Android 8 phone, the camera was flickering and "lagging" in a way that makes it not usable at all. Could you please tell me if this is a known bug and/or how to fix it? Thanks for your time.
To ilustrate the problem, here are two gifs:
one using camerja on Android 8
and the other using only the expo camera on the same phone:
Error: Undefined
When i import AuthSession from 'expo' it comes undefined.
Base64 Boolean doesn't affect what's returned from takePictureAsync
setting the boolean to true, still only returns the url to the internal jpg
Save photo with the square of the face recognition
Hi @terribleben , I tried the example I wanted to know how I can make sure that I can save the picture with the square of the face recognition?
Vibration.vibrate can't work before recordAsync
takePicture = async function() {
if (this.camera) {
if(this.state.recording==false)
{
Vibration.vibrate();//---->just only work at first time
this.setState({
takeIcon:'stop-circle-outline',
recording:true,
});
this.camera.recordAsync({"quality":"4:3","maxDuration":10}).then(data => {
Vibration.vibrate();//---->every time can work ,good boy.
});
}
else
{
this.camera.stopRecording();
this.setState({
takeIcon:'radiobox-marked',
recording:false,
});
}
}
};
but I try take picture with vibrate like the sample is work, so...why...I am ios
Camera Not Displaying
I have been trying to get the expo Camera to work and am running up against a wall. When I try to display the camera, it does not show. Likewise, when I try to display the Gallery, nothing. Any suggestions would be helpful. Here is the link to the code: https://github.com/pearlsrvcs/CameraTest.git.
Thank you.
Orientation changes
The camera preview should rotate itself when the layout switches to landscape.
Deleting the photos from the gallery
Im trying to delete the photos from the gallery through deleting the photos folder using FileSystem.deleteAsync but it doesn't work. Please give me some work arounds. TIA
Undefined is not an object _expo.camera.constant
I created a RN
project with create-react-native-app (CRNA)
. I want to use the Camera API
provided by expo
. In doing so, I simply copied the example here https://docs.expo.io/versions/latest/sdk/camera.html and included the Component
. Starting the App gives me the following: Undefined is not an object _expo.camera.constant
with a massive stacktrace... Any ideas what is going wrong here?
App fails to compile: "Can't find variable: self"
How do you run this app locally?
$ npm install
$ npm start
Doesn't work as there is no "start" script defined. Do I need to check this out into an existing expo init
app?
Fail to connect to camera service
Camera mount error
Hi, when i navigate to my Camera component for the first time, the onCameraReady
method is correctly fired, but when i navigate there again, the onMountError
method is fired. The docs say that this method returns an object containing a message, but when i try to log the object, i get undefined:
onMountError={(obj) => console.log('Camera mount error', JSON.stringify(obj))
.
This means that i can see the buttons in my render, but the camera screen is black.
I thought the issue might be that the Cam component would still be mounted, but I checked and whenever i leave it, componentWillUnmount
is correctly fired.
I based my code on the doc's example and removed a lot of things. Here it is:
export class CameraModule extends Component<IProps, IState> {
camera: any;
constructor(props: IProps) {
super(props);
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
this.state = {
type: Camera.Constants.Type.back,
flash: 'off',
zoom: 0,
autoFocus: 'on',
depth: 0,
whiteBalance: 'auto',
ratio: '16:9',
ratios: [],
showGallery: false,
permissionsGranted: false,
};
}
async componentWillMount() {
BackHandler.addEventListener(C.HARDWARE_BACK_PRESS, this.handleBackButtonClick);
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ permissionsGranted: status === 'granted' });
}
componentWillUnmount() {
BackHandler.removeEventListener(C.HARDWARE_BACK_PRESS, this.handleBackButtonClick);
}
handleBackButtonClick() {
this.props.navigation.goBack(null);
return true;
}
toggleFacing() {
this.setState({ type: this.state.type === 'back' ? 'front' : 'back' });
}
toggleFlash() {
this.setState({ flash: flashModeOrder[this.state.flash] });
}
setRatio(ratio: string) {
this.setState({ ratio });
}
toggleWB() {
this.setState({ whiteBalance: wbOrder[this.state.whiteBalance] });
}
toggleFocus() {
this.setState({ autoFocus: this.state.autoFocus === 'on' ? 'off' : 'on' });
}
zoomOut = () => {
const { zoom } = this.state;
if (zoom > 0) {
this.setState({ zoom: zoom - 0.01 });
}
}
zoomIn = () => {
const { zoom } = this.state;
if (zoom < 0.5) {
this.setState({ zoom: zoom + 0.01 });
}
}
setFocusDepth(depth: number) {
this.setState({ depth });
}
resize = async (url: string) => {
const manipResult = await ImageManipulator.manipulate(url,
[{ resize: { height: 512 } }],
{ format: 'jpeg', compress: 1, base64: true },
);
return manipResult.base64;
}
takePicture = async () => {
if (this.camera) {
const { auth: { sessionId }, appReducer: { currentJob: { id } } } = this.props;
this.props.setIsTakingPicture(true);
this.camera.takePictureAsync({ base64: true, quality: 0.5 }).then(data => {
console.log('Photo taken');
this.resize(data.uri).then(base64 => {
this.props.setPictureId(this.props.appReducer.pictureId + 1);
setTimeout(() => {
const newPic = {
id: this.props.appReducer.pictureId,
jobId: id,
captureDate: moment().valueOf(),
picture: base64,
};
const { appReducer: { localPictures = [] } } = this.props;
if (isValid(localPictures)) {
this.props.setLocalPictures([...localPictures, newPic]);
} else {
this.props.setLocalPictures([newPic]);
}
this.props.setIsTakingPicture(false);
}, 0);
});
});
}
}
renderNoPermissions() {
const { t } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 10 }}>
<Text>{t('aidooTechnician:noPermission')}</Text>
</View>
);
}
renderCamera() {
const { navigation: { navigate }, appReducer: { theme = null, shape = C.SHAPE_ROUND, isTakingPicture }, pictureReducer: { isAddingPicture } } = this.props;
const { colorMain = C.COLOR_THEME } = theme;
const { type, flash, autoFocus, zoom, whiteBalance, ratio, depth } = this.state;
const borderRadius = shape === C.SHAPE_ROUND ? 25 : 0;
const pictureButtonBorderRadius = shape === C.SHAPE_ROUND ? 40 : 0;
return (
<Camera
ref={ref => this.camera = ref}
style={{ flex: 1 }}
type={type}
flashMode={flash}
autoFocus={autoFocus}
zoom={zoom}
whiteBalance={whiteBalance}
ratio={ratio}
focusDepth={depth}
onCameraReady={() => console.log('Camera ready')}
onMountError={(message) => console.log('Camera mount error', JSON.stringify(message))}>
<View style={{ flex: 1, backgroundColor: 'transparent' }}>
<View
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'space-around',
paddingTop: Constants.statusBarHeight / 2,
}}>
<TouchableOpacity style={[s.camButton, { borderRadius, backgroundColor: 'white' }]} onPress={() => this.handleBackButtonClick()}>
<Icon name={C.ICON_BACK_BUTTON} />
</TouchableOpacity>
<TouchableOpacity style={[s.camButton, { borderRadius }]} onPress={() => this.toggleFlash()}>
{flash === 'on' && <Image source={require('../../../../assets/camera/flash_on.png')} style={{ height: 30, width: 30 }} />}
{flash === 'off' && <Image source={require('../../../../assets/camera/flash_off.png')} style={{ height: 30, width: 30 }} />}
{flash === 'auto' && <Image source={require('../../../../assets/camera/flash_auto.png')} style={{ height: 30, width: 30 }} />}
{flash === 'torch' && <Icon name={C.ICON_BULB} style={{ fontSize: 30, color: 'white' }} />}
</TouchableOpacity>
<TouchableOpacity
style={[s.camButton, { borderRadius }]}
onPress={() => this.toggleFocus()}>
<Text style={{ fontWeight: C.NUMBER_BOLD, color: 'white' }}>AF</Text>
<Text style={{ color: 'white' }}>{autoFocus} </Text>
</TouchableOpacity>
</View>
{autoFocus !== 'on' ? (
<Slider
style={{ width: 150, marginTop: 15, marginRight: 15, alignSelf: 'flex-end' }}
onValueChange={value => this.setFocusDepth(value)}
step={0.1}
/>
) : null}
</View>
<View
style={{
paddingBottom: isIPhoneX ? 20 : 0,
backgroundColor: 'transparent',
flexDirection: 'row',
alignSelf: 'flex-end',
}}>
<View style={{ flex: 0.4, alignSelf: 'flex-end' }}>
<TouchableOpacity
style={[s.camButton, { borderRadius, marginLeft: 10 }]}
onPress={() => this.toggleFacing()}>
<Icon name={C.ICON_REVERSE_CAMERA} style={{ color: 'white' }} />
</TouchableOpacity>
</View>
<View style={{ flex: 0.2, alignSelf: 'flex-end' }}>
<TouchableOpacity
style={[s.pictureButton, { borderRadius: pictureButtonBorderRadius }]}
onPress={() => this.takePicture()}>
<Icon name={C.ICON_CAMERA} style={{ color: 'white' }} />
</TouchableOpacity>
</View>
<View style={{ flex: 0.4, alignItems: 'flex-end' }}>
<TouchableOpacity
style={[s.camButton, { marginRight: 10, borderRadius }]}
onPress={this.zoomIn}>
<Text style={{ color: 'white', fontSize: 22 }}> + </Text>
</TouchableOpacity>
<TouchableOpacity
style={[s.camButton, { marginRight: 10, borderRadius }]}
onPress={this.zoomOut}>
<Text style={{ color: 'white', fontSize: 22 }}> - </Text>
</TouchableOpacity>
<TouchableOpacity
style={[s.camButton, { marginRight: 10, borderRadius, backgroundColor: colorMain }]}
onPress={() => navigate(C.SCREEN_GALLERY)}>
<Icon name={C.ICON_FORWARD_BUTTON} style={{ color: 'white' }} />
</TouchableOpacity>
</View>
</View>
</Camera >
);
}
render() {
const { permissionsGranted } = this.state;
return <View style={{ flex: 1 }}>{permissionsGranted ? this.renderCamera() : this.renderNoPermissions()}</View>;
}
}
const flashModeOrder = {
off: 'on',
on: 'auto',
auto: 'torch',
torch: 'off',
};
const wbOrder = {
auto: 'sunny',
sunny: 'cloudy',
cloudy: 'shadow',
shadow: 'fluorescent',
fluorescent: 'incandescent',
incandescent: 'auto',
};
const mapStateToProps = ({ appReducer, auth, pictureReducer }) => ({
appReducer,
auth,
pictureReducer,
});
const mapDispatchToProps = (dispatch: Function) => ({
setPictureId: (pictureId: number) => dispatch(setPictureId(pictureId)),
setIsTakingPicture: (isTakingPicture: boolean) => dispatch(setIsTakingPicture(isTakingPicture)),
setLocalPictures: (localPictures: ILocalPicture[]) => dispatch(setLocalPictures(localPictures)),
});
export default connect(mapStateToProps, mapDispatchToProps)(CameraModule);
Take picture, Expo client suddenly stopped
Hi,
i'm facing problem, when i take picture, Expo client suddenly stopped without error information
snap = async function(){
if (this.camera) {
this.camera.takePictureAsync().then(data => {
FileSystem.moveAsync({
from: data,
to: ${FileSystem.documentDirectory}photos/Photo_${this.state .photoId}.jpg
,
}).then(() => {
this.setState({
photoId: this.state.photoId + 1,
});
Vibration.vibrate();
});
});
}
};
how to display the error message?
Thanks
No license
Hi Expo Team, I forked this repo for a personal project that I'm not planning on releasing, but I still felt a little unsure of myself in doing so since there was no license. It would be nice if the maintainers could add a license or clarify their stance on usage
Thanks!
this.props.onPress is not a function, is an instance of an object
Hi, I'm getting this error when I try to implement the camera in my project:
The project has the next structure:
A main screen (I'm using react-navigation) from which I can access others screen through some buttons. In one of those screens, there's a button that calls the camera, when I hit that button I the error occurs.
But, if try the camera and the gallery apart, I'm not getting any error.
Also if I delete all the onPress props from all the TouchableOpacity tags on Camera and Gallery, I'm still getting the same error, which is pretty weird.
Anyone knows why is this happening?
Update for newer expo sdk.
Trying to open example without installation doesn't work for me
This project needs an update
This project uses Expo SDK v24.0.0. If you want to open this project, the author will need to update the project's SDK version.
Video example?
I tried editing the script to work with video. Are there any plans to release a video version of this?
Shutter sound on Android
Hi. I am trying to use the camera on a project and I've noticed that there is no capture sound on Android. I do not have this problem on iPhone. Is this a known issue or is there a fix out there?
Thanks!
Ratio points
Hi and thank you!
-
The function in the example is getSupportedRatios rather than the correct function getSupportedRatiosAsync
-
What is ratio meant to do, i tried setting it on my android but it doesn't seem to have any effect
Error: Unable to resolve GestureHandler
Hi!
I'm facing problem. (windows10 user.)
dependencies
"dependencies": {
"expo": "20.0.0-alpha.4",
"react": "16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz"
}
Steps to reproduce the behavior
- git clone
- npm install
- just turn on Expo and open project directory
Check the render method of 'CameraScreen'
Hi. Im having this error,
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of 'CameraScreen'.
Unhandled promise rejection in App.js example
Hi, I get this error when I tap "Snap" from the example
[Unhandled promise rejection: TypeError: this.camera.takePicture is not a function. (In 'this.camera.takePicture()', 'this.camera.takePicture' is undefined)]
The website app is old and not suppot filesystem and camera
Pictures not appearing in Gallery
After I press the button to take a picture, I hear the shutter snap, but there's no pictures in the Gallery afterwards. I am getting the following warning, but I'm not sure if it's related to this.
[Unhandled promise rejection: TypeError: _this.camera.getAvailablePictureSizesAsync is not a function. (In '_this.camera.getAvailablePictureSizesAsync(_this.state.ratio)', '_this.camera.getAvailablePictureSizesAsync' is undefined)\]
I can not get print the photo shot from my module
Although I can get the uri of the photo from my component of the taken photo, I cannot print it on my component. I am getting warning "Warning: Failed prop type: Invalid prop source
supplied to Image
.
". Please look at my question on https://stackoverflow.com/questions/50327587/cant-get-photo-printed-after-camera-shot/50332641#50332641
Please explain context of "this.camera" in App.js
I'm working with my own fork of this repo, and converting to TypeScript.
I'm having a hell of a time wrapping my head around the multiple instances of this.camera ...
that appear in App.js.
camera
is undefined; what context is this being applied in? I need to specify a definition for TS but I can't seem to find where this is actually coming in.
Native Module cannot be null
On fresh install I'm getting a "native module cannot be null" red screen. Dumped my node_modules and tried installs with both yarn and npm. Also ran expo start -c but still getting the error.
willUnmounte
i am using Camera from expo, when i used Camera worked fine but when i add with react-navigation now throw:
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. .
why ???
Error: Directory
Hi
I am getting this error:
14:30:57: [Error: Directory 'file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540anonymous%252Fawesomeproject-61256c9a-b65e-45a2-b7ad-48b3fc298e0a/photos' could not be created.] Directory exists
I suppose that the promblem appears when it executes this:
componentDidMount() {
FileSystem.makeDirectoryAsync(
FileSystem.documentDirectory + 'photos'
).catch(e => {
console.log(e, 'Directory exists');
});
}
So how can i fix this?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.