Вопрос или проблема
Тег <video /> в HTML не предоставляет возможности изменять заголовки в запросах. Единственное, что я нашёл, это изменение свойства cross-origin, но из-за предупреждений безопасности и технических нюансов это не сработало для меня.
Я ищу способ изменить заголовок Authorization в запросах.
Это возможно, запрашивая видео на JS с помощью axios или стандартного метода fetch, но видео можно стримить, и они очень длинные, поэтому я не могу ждать, пока все видео загрузится.
Существует ли другой способ в JS, чтобы решить эту проблему, сохранив видео стримируемым, чтобы я мог быстро перескочить через видео без задержек.
На самом деле я работаю с react-player, но поскольку я могу передавать все свойства в основной тег видео, я подумал, что более общее решение может быть найдено быстрее.
Видео, которые я пытаюсь стримить, в формате MP4, и предпочтительно, чтобы они остались таковыми.
Использование свойства cross-origin
Смотря на другие посты на Stackoverflow, есть много подобных вопросов, но ни один из найденных мной не предоставляет действительного решения.
Ответ или решение
Для решения проблемы авторизации для тега <video> в HTML с использованием JWT необходимо рассмотреть несколько ключевых аспектов, связанных с потоковой передачей видео и настройками заголовков HTTP. Тег <video> сам по себе не предоставляет возможность изменять заголовки запросов, такие как Authorization. Однако, есть несколько подходов, которые можно использовать для достижения желаемого результата, оставаясь при этом в рамках стриминга видео формата MP4.
1. Использование технологий HTTP
Первый шаг к решению проблемы – это настроить серверное оборудование. Один из распространенных подходов к авторизации потока видео – это использование механизма предварительной проверки с помощью заголовков. Вы можете настроить сервер таким образом, чтобы он принимал токен JWT в качестве параметра URL или через заголовок. Вот несколько идей:
- Токен в URL: Вы можете передавать JWT в URL завершающем видеофайла, например:
https://yourserver.com/video.mp4?token=YOUR_JWT. Сервер будет извлекать токен, проверять его и, если он действителен, предоставлять доступ к видеофайлу. Это не самый безопасный вариант, так как токен будет виден в строке состояния браузера, но он может быть простым решением, если пользователи ограничены по времени доступа.
2. Проксирование видео через сервер
Вы можете создать промежуточный серверный компонент, который будет обрабатывать запросы на видео и добавлять необходимые заголовки перед отправкой контента клиенту. Это будет выглядеть следующим образом:
- Создание прокси-сервиса: Настройте сервер (например, на Node.js или другом серверном языке), который будет принимать запросы на видео. Этот сервер должен проверить JWT, а затем, если токен действителен, прогнать запрос на реальный сервер, добавив соответствующий
Authorizationзаголовок. Результат из оригинального видеофайла будет поступать к вашему клиенту.
app.get('/video', (req, res) => {
const jwt = req.query.token;
if (!isValidToken(jwt)) {
return res.status(401).send('Unauthorized');
}
const videoStream = request.get('https://yourserver.com/realvideo.mp4', {
headers: {
'Authorization': `Bearer ${jwt}`
}
});
videoStream.pipe(res);
});3. Использование Media Source Extensions (MSE)
Если ваше приложение поддерживает более продвинутые методы обработки видео, вы можете использовать Media Source Extensions (MSE). Это позволит вам программно управлять потоками медиа. С помощью MSE вы можете динамически загружать части видео, которые вам нужны, и передавать на клиент, используя свой собственный контроллер авторизации (например, с помощью fetch).
4. Настройка библиотеки React Player
Поскольку вы используете библиотеку react-player, вы можете обернуть её в свой компонент, который будет контролировать авторизацию, например, с помощью вышеописанных методов. В этом случае вы можете загружать потоковое видео через ваш сервер-прокси, обеспечивая возможность перемотки и уменьшения задержек при загрузке:
import React from 'react';
import ReactPlayer from 'react-player';
const VideoPlayer = ({ token }) => {
const videoUrl = `https://yourserver.com/video?token=${token}`;
return (
<ReactPlayer
url={videoUrl}
controls
width="100%"
height="auto"
/>
);
};
export default VideoPlayer;Заключение
Проблема изменения заголовков запросов для тега <video> в HTML требует креативного подхода. Используя серверный прокси, или технологию Media Source Extensions, можно добиться желаемого результата, позволив пользователям плавно стримить видео. Убедитесь, что ваш сервер правильно проверяет JWT и обеспечивает безопасность всего потока. Выбор того или иного метода зависит от архитектуры вашего приложения и политик безопасности.