Розв'язання проблеми із завантаженням відео на Cloudinary з мобільного та веб-додатка React-Native-EXPO

Розв’язання проблеми із завантаженням відео на Cloudinary з мобільного та веб-додатка React-Native-EXPO

7 Березня 2024 в 21:19 21

У сучасному світі велике значення набувають функціональність та можливості мобільних додатків, особливо тих, що створені за допомогою технологій React Native та Expo. Однією з часто зустрічаних задач в розробці додатків є завантаження зображень і відео на зовнішній сервер для подальшого використання. Один із популярних сервісів для цього – Cloudinary. Проте, при спробі завантажити відео на Cloudinary з мобільного або веб-додатка можуть виникнути проблеми, які не завжди легко вирішити.

У цій статті ми розглянемо конкретний випадок, коли розробник натрапив на проблему із завантаженням відео на Cloudinary з мобільного та веб-додатка, створених за допомогою React-Native-EXPO. Він спробував різні підходи, але функціональність для зображень працювала коректно, тоді як для відео він отримував різні помилки.

Проблема полягала в тому, що Cloudinary повертав undefined на мобільних пристроях і показував помилку “bad request” на веб-додатку. Це призвело до того, що розробник не міг отримати URL для подальшого використання завантаженого відео. Він був у пошуках рішення цієї проблеми, сподіваючись знайти шлях до успішного завершення завдання.

Для початку, розробник використовував Expo для створення мобільного додатка та React Native для веб-додатка. Ці технології надають зручний інтерфейс для створення кросплатформенних додатків з мінімальними зусиллями. Однак, при роботі з Cloudinary, виникли труднощі.

Основна проблема полягала в тому, що функція для вибору та завантаження відео не працювала належним чином. Для цього використовувався ImagePicker з Expo, який надає можливість вибрати відео з галереї пристрою. Після вибору відео, воно мало б бути завантажене на Cloudinary за допомогою функції postToCloundinaryVideo.

Проте, при спробі завантаження відео, Cloudinary повертав undefined на мобільних пристроях і показував помилку “bad request” на веб-додатку. Це призвело до розчарування і невдачі в реалізації потрібної функціональності. Розробник вирішив ретельно дослідити цю проблему та знайти її вирішення.

Після дослідження документації Cloudinary та перевірки коду, розробник зрозумів, що проблема полягала в невірному форматі даних, які були надіслані на сервер Cloudinary. Хоча для зображень цей підхід працював, для відео потрібен інший підхід.

Ось як виглядала початкова функція pickVideo:

const pickVideo = async () => {
    try {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Videos,
            allowsEditing: true,
            quality: 1,
        });
        if (!result.canceled) {
            let imageUri = result.assets[0].uri.split(',')[1];
            let data = {
                uri: imageUri,
                name: 'video',
                type: 'video/mp4'
            }
            const uri = await postToCloundinaryVideo(imageUri)
            console.log('hello')
            console.log(uri)
        }
    } catch (err) {
        console.log(err)
    }
}