Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

karu's avatar
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.

0 likes
0 replies

Please or to participate in this conversation.