Search
Write a publication
Pull to refresh

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

Level of difficultyMedium

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

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

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

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

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

Untitled
Untitled
Untitled

Часть 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.

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.