Загрузка видео в youtube через API

Эта статья является результатом моего стремления собрать разрозненные и неполные данные из официальной документации Google API в одно понятное и всестороннее руководство. Мое исследование этой темы было вызвано тем, что информация о загрузке видео на YouTube через API была разбросана по различным разделам, и чтобы полностью разобраться в этом вопросе, понадобилось бы несколько дней.

Однако, почему важно загрузить видео на YouTube через API? Самый очевидный ответ - это удобство и эффективность. Загрузка видео через API позволяет вам избежать ручного использования интерфейса YouTube, что экономит значительное количество времени. Кроме того, вы можете создать свой собственный шаблон с заранее прописанными заголовками, категорией видео, возрастным ограничением и многим другим, что позволяет вам сфокусироваться на более важных аспектах вашей работы.

В этом подробном руководстве мы рассмотрим процесс настройки Google, использование библиотеки @react-oauth/google для авторизации, загрузку видео и применение всего этого в реальном проекте. Я уверен, что эта статья станет ценным ресурсом для тех, кто хочет быстро и эффективно разработать функцию загрузки видео.

Часть 1. Конфигурация Google

Первый шаг - регистрация веб-приложения на https://console.cloud.google.com/. Затем добавьте адрес, с которого приложение будет отправлять запросы. В этом же окне будет храниться ClientID, который нам понадобится дальше. Наконец, подключите YouTube к вашему аккаунту Google.

Часть 2. Установка и использование библиотеки @react-oauth/google

Установите библиотеку, выполнив npm i @react-oauth/google. Эта библиотека облегчает процесс авторизации через Google, инкапсулируя сложность OAuth в простой хук useGoogleLogin. Он автоматически обрабатывает процесс авторизации и сохраняет полученный токен доступа в localStorage.

Создайте компонент с кнопкой авторизации через Google:

// Создание компонента для авторизации через Google
import { useGoogleLogin } from '@react-oauth/google';
const GoogleAuth = () => {
// Используем хук useGoogleLogin для авторизации и сохранения токена доступа
const login = useGoogleLogin({
// В случае успешной авторизации сохраняем токен в локальное хранилище браузера
onSuccess: (tokenResponse) => {
localStorage.setItem('id_token', tokenResponse.access_token);
},
// Задаем область действия токена, которая позволяет загружать видео на YouTube
scope: '<https://www.googleapis.com/auth/youtube.upload>',
});
// Создаем кнопку, которая запускает процесс авторизации при нажатии
return (
    &lt;button onClick={login}&gt;Войти через Google ?&lt;/button&gt;
);

};
export default GoogleAuth;

Используйте этот компонент:

<div>
    <GoogleAuth />
</div>

Оберните ваше React-приложение в провайдер из библиотеки @react-oauth/google:

import { GoogleOAuthProvider } from '@react-oauth/google';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<GoogleOAuthProvider clientId="000000000000-asdfasdfasdfasfsdfasdfasdf.apps.googleusercontent.com">
<App />
</GoogleOAuthProvider>
);

Теперь авторизация через Google должна работать.

Часть 3. Загрузка видео

Следующий шаг - написание функции для загрузки видео. Эта функция делает два основных шага: инициирует процесс загрузки, получая URL для загрузки, а затем загружает файл видео на этот URL.

// Функция для загрузки видео на YouTube
export const uploadVideo = async (obj) => {
    // Получаем токен доступа из объекта, переданного в функцию
    const accessToken = obj.token;
    // URL для инициации процесса загрузки видео
    const url = '<https://www.googleapis.com/upload/youtube/v3/videos?part=snippet,status&uploadType=resumable>';
    // Заголовки запроса
    const headers = {
        // Указываем токен доступа в заголовке Authorization
        Authorization: `Bearer ${accessToken}`,
        'Content-Type': 'application/json',
        'X-Upload-Content-Length': obj.video.size,
        'X-Upload-Content-Type': obj.video.type,
    };
try {
    // Инициируем процесс загрузки, получаем URL для загрузки видео
    const response = await axios.post(
        url,
        {
            // Указываем информацию о видео
            snippet: {
                title: obj.title || 'Тестовое название видео',
                description: 'Тестовое описание видео',
            },
            // Указываем статус видео
            status: {
                privacyStatus: 'public',
                selfDeclaredMadeForKids: false,
            },
        },
        {
            // Добавляем заголовки запроса
            headers: headers,
        }
    );
    // Получаем URL для загрузки видео из заголовков ответа
    const uploadUrl = response.headers.location;

    // Загружаем файл видео на полученный URL
    const res = await axios.put(uploadUrl, obj.video, {
        headers: {
            'Content-Type': obj.video.type,
            'Content-Length': obj.video.size,
        },
    });

    // Возвращаем идентификатор загруженного видео
    return res.data.id;
} catch (error) {
    // Обрабатываем возможные ошибки при загрузке видео
    console.error('Загрузка не удалась:', error);
    alert('Загрузка не удалась');
}

};

Когда выбираете видео для загрузки с устройства, вызовите функцию для его загрузки на YouTube:

const upload = async (video: Blob) => {
    const url = uploadVideo({ video, token: localStorage.getItem('id_token') || '', title: formValues.title })
    setUrl('<https://www.youtube.com/embed/>' + url);
};
<FileDrop onSendFiles={upload} >
<button>
Перетащи сюда видео
</button>
</FileDrop>

И в заключении хочу сказать что, надеюсь эта статья поможет многим в реализации загрузки видео через api.