tenh
January 30, 2019, 3:42pm
1
hello everyone,
I am new to expo, I want to display a camera and have record and stop buttons
how can i do? thank you
I use this
import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera, Permissions } from 'expo';
export default class CameraExample extends React.Component {
state = {
hasCameraPermission: null,
type: Camera.Constants.Type.back,
};
async componentDidMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
}
render() {
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <View />;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
} else {
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={this.state.type}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
this.setState({
type: this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
});
}}>
<Text
style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
{' '}Flip{' '}
</Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
}
}
but i don't know it records or not when i click start
tenh
February 13, 2019, 1:51pm
3
sorry you know this is not what i want
fredius
February 18, 2019, 7:09pm
4
Hi @tenh this is an example. hope it can help you
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { Camera, Permissions, MediaLibrary } from "expo";
class MyCam extends Component {
state = {
video: null,
picture: null,
recording: false
};
_saveVideo = async () => {
const { video } = this.state;
const asset = await MediaLibrary.createAssetAsync(video.uri);
if (asset) {
this.setState({ video: null });
}
};
_StopRecord = async () => {
this.setState({ recording: false }, () => {
this.cam.stopRecording();
});
};
_StartRecord = async () => {
if (this.cam) {
this.setState({ recording: true }, async () => {
const video = await this.cam.recordAsync();
this.setState({ video });
});
}
};
toogleRecord = () => {
const { recording } = this.state;
if (recording) {
this._StopRecord();
} else {
this._StartRecord();
}
};
render() {
const { recording, video } = this.state;
return (
<Camera
ref={cam => (this.cam = cam)}
style={{
justifyContent: "flex-end",
alignItems: "center",
flex: 1,
width: "100%"
}}
>
{video && (
<TouchableOpacity
onPress={this._saveVideo}
style={{
padding: 20,
width: "100%",
backgroundColor: "#fff"
}}
>
<Text style={{ textAlign: "center" }}>save</Text>
</TouchableOpacity>
)}
<TouchableOpacity
onPress={this.toogleRecord}
style={{
padding: 20,
width: "100%",
backgroundColor: recording ? "#ef4f84" : "#4fef97"
}}
>
<Text style={{ textAlign: "center" }}>
{recording ? "Stop" : "Record"}
</Text>
</TouchableOpacity>
</Camera>
);
}
}
class RecVideo extends Component {
state = {
showCamera: false
};
_showCamera = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status === "granted") {
this.setState({ showCamera: true });
}
};
render() {
const { showCamera } = this.state;
return (
<View
style={{
justifyContent: "center",
alignItems: "center",
flex: 1,
width: "100%"
}}
>
{showCamera ? (
<MyCam />
) : (
<TouchableOpacity onPress={this._showCamera}>
<Text> Show Camera </Text>
</TouchableOpacity>
)}
</View>
);
}
}
export default RecVideo;
2 Likes
tenh
February 19, 2019, 10:09am
5
@fredius Thank you so much
1 Like
fredius
February 19, 2019, 12:43pm
6
@tenh always happy to help
tenh
February 19, 2019, 1:58pm
7
@fredius one question, for saving recording video, is it necessary stoprecording before the saving?
Because my idea is I want two different buttons (not toogle button), one is just record button and other is saved button. when i click record button it’s recording the video then when i click save button, it saves the video. is it possible? I have done this but I can’t get file url to save. it’s alway null.
fredius
February 20, 2019, 10:32am
8
@tenh I think the url is only generated when the record is done as it’s an async operation so the method wait until the record is complete in order to give the link
1 Like
fredius
February 20, 2019, 10:32am
9
but what do you exactly want to do? May be I can help you find the right way to achieve your goal
tenh
February 20, 2019, 1:27pm
10
@fredius thank you. it’s a new goal which I want to send recording video (the video that i get from click start and stop recording) to sever (laravel), is it possible?
fredius
February 20, 2019, 1:49pm
11
I am not a laravel guy. but I think you can use formData and xhr to upload file to the desired server using expo. check this repo expo/image-upload-example and expo/firebase-storage-upload-example adapt to your server
tenh
February 20, 2019, 1:50pm
12
thank you so much for your quick answer. I will try later.
1 Like
system
Closed
March 7, 2019, 1:51pm
13
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.