May 22, 2024
0
Level 1
Capture & Save video to Laravel API
Trying to use Ionic native to access the camera app and record a short video that getting uploaded to the database using Laravel API. Image seems to be easy but i cant find a plugin or package for video. There are some old guides from 4 years back but it seems they are just to old. Anyone who can point me in the right direction because it seems really hard to find. Which is weird because no one seem to do a tiktok clone in vue...
this is the code i tired so far
const captureVideo = async () => {
try {
const video = await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
mediaType: 'video'
});
// Ensure the directory exists
try {
await Filesystem.mkdir({
path: 'videos',
directory: Directory.Data,
recursive: true
});
} catch (mkdirError) {
if (mkdirError.message !== 'Directory exists') {
throw mkdirError; // Re-throw the error if it's not "Directory exists"
}
// Directory already exists, proceed with saving the video
}
// Save video to the filesystem
const videoFile = await Filesystem.writeFile({
path: `videos/${new Date().getTime()}.mp4`,
data: video.webPath,
directory: Directory.Data
});
// Now you can use the videoFile.uri to upload it
uploadVideo(videoFile.uri);
} catch (error) {
console.error('Error capturing video:', error);
}
};
const uploadVideo = async (videoUri) => {
try {
const getUserId = await axios.get(`${BASE_URL}/user/id`, getConfig(store.currentToken));
const userId = getUserId.data.data.id; // Get the user ID from the response
const formData = new FormData();
const response = await fetch(videoUri);
const videoBlob = await response.blob(); // Convert the response to a Blob
formData.append('video', videoBlob, 'video.mp4');
formData.append('user_id', userId); // Use the retrieved user ID
await axios.post(`${BASE_URL}/uploadVideo`, formData, getConfig(store.currentToken));
toast.success('Video uploaded successfully');
} catch (error) {
toast.error('Failed to upload video');
console.error('Error uploading video:', error);
}
};
The error i get is just the "plugin" telling me the file is not an image and cant be processed.
Please or to participate in this conversation.