Это вторая запись в журнале разработки веб-приложения для обмена видео, VidU (Video with You). Пожалуйста, посмотрите мою первую запись, если нет. В этой записи я объясню, как я реализовал режим синхронизации, с помощью которого несколько пользователей могут синхронизировать позицию воспроизведения видео YouTube, чтобы смотреть его вместе.
Вот список записей для этой серии журналов.
Часть II - Режим синхронизации
Часть III - Комментарий
Часть IV - Развертывание с HTTPS, PostgreSQL, Nginx
Часть V - Видеочат
Часть VI - UI / UX
Часть VII - Разное и заключение
Что делает режим синхронизации
Как только ваш друг примет ваше приглашение в комнату, вы можете отправить запрос на синхронизацию с вами. Когда ваш друг принимает запрос, состояние воспроизведения видео синхронизируется. Если вы сделаете паузу, видео вашего друга будет приостановлено. Если ваш друг пропускает 30 секунд, ваше видео также пропускается. Таким образом, вы будете смотреть один и тот же контент одновременно.
Основная логика
Во-первых, позвольте мне определить здесь терминологию для пар. Позиция воспроизведения - это текущее время воспроизведения видео, например 1 мин 10 сек. Состояние видео - либо пауза, либо воспроизведение (на самом деле есть состояния загрузки и завершения, но для простоты рассмотрим только два случая). Владелец синхронизации - это пользователь, который приглашает других присоединиться к синхронизации, а пользователь, запрошенный синхронизацией, - это тот, кого попросили присоединиться к синхронизации (да).
Режим синхронизации очень просто реализовать, разделяя позицию воспроизведения и состояние видео каждый раз, когда пользователь меняет состояние видео.
- Как только пользователь, запрошенный синхронизацией, принимает синхронизацию, этот пользователь сначала получает текущую позицию воспроизведения и состояние видео от владельца синхронизации. Используя YouTube API, позиция воспроизведения изменяется на позицию воспроизведения владельца синхронизации и изменяется на то же состояние видео, что и у владельца видео.
- После того, как начальное состояние видео синхронизировано, каждый раз, когда какие-либо пользователи в режиме синхронизации изменяют состояние видео, этот пользователь будет отправлять сообщение каждому пользователю в режиме синхронизации, чтобы синхронизировать положение воспроизведения и состояние видео.
Как общаться в реальном времени?
Главный вопрос - как отправлять информацию о позиции воспроизведения и состоянии видео в реальном времени. Есть много способов сделать это, например, через веб-сокеты. Но я хотел построить его очень быстро, поэтому использовал другой веб-сервис под названием Pusher. Это позволяет просто отправлять сообщения разным пользователям.
Очень быстрое руководство, как использовать Pusher
Пожалуйста, ознакомьтесь с официальной документацией, поскольку она очень хорошо написана.
Pusher - это простой размещенный API для быстрой, легкой и безопасной интеграции двунаправленных функций в реальном времени через WebSockets в веб-приложения и мобильные приложения или любое другое устройство, подключенное к Интернету.
Чтобы использовать Pusher, в моем интерфейсе Javascript приложение сначала подписывается на каналы. Эти каналы могут иметь любое имя. В моем случае «user-1-channel», «room-3-channel», «sync-5-channel» и т. Д. Затем в моем бэкэнде код python может отправлять сообщения на выбранные каналы с данными json. В моем примере с режимом синхронизации серверная часть будет отправлять информацию о воспроизведении всем подписчикам «sync-1-channel», если какой-либо из пользователей в «sync-1-channel» изменяет состояние воспроизведения / видео.
3 основных типа каналов, которые я использую
В моем приложении есть в основном три разных типа каналов для разных целей.
1. Пользовательский канал
У каждого пользователя есть свой уникальный пользовательский канал. Этот канал отвечает за получение любых событий, связанных с пользователем, таких как запрос на синхронизацию, приглашение в комнату, проверку онлайн-статуса, запрос видеочата и т. Д.
2. Канал в комнате
У каждой комнаты есть уникальный канал, который отвечает за любые связанные с комнатой события, такие как изменение информации о комнате и принятие пользователем приглашения в комнату, удаление комнаты и т. Д.
3. Канал синхронизации
Когда два или более пользователей находятся в режиме синхронизации, они используют один и тот же канал синхронизации. В этом канале синхронизации позиция воспроизведения видео и состояние видео совместно используются всеми в одном канале синхронизации.
Детали реализации
- Когда пользователь входит на веб-сайт, каждый пользователь подписывается на уникальный пользовательский канал. Скажем, имя пользователя этого пользователя - «johnny», имя его канала - «user-johnny-channel» (шаблон именования - «user-username-channel»). Этот канал прослушивает такие события, как приглашение в комнату и запрос на синхронизацию.
- Когда другой пользователь, «застенчивый» в комнате, хочет синхронизироваться с «Джонни», он нажимает кнопку «Синхронизировать», чтобы отправить запрос Джонни. Это запускает внутреннюю часть python для отправки данных приглашения на синхронизацию в «user-johnny-channel» с именем sync-channel. Это имя канала синхронизации содержит имя комнаты и имя владельца синхронизации («sync-shuny-room1-channel»). Это имя канала синхронизации также уникально.
- user-johnny-channel получает данные запроса приглашения на синхронизацию. Это позволяет интерфейсу перейти в целевую комнату, в которой shuny ожидает присоединения Джонни. После входа в комнату запускается режим синхронизации, поскольку и shuny, и johnny подписываются на «sync-shuny-room1-channel».
- Поскольку johnny является пользователем, запрашивающим синхронизацию, позиция воспроизведения владельца синхронизации и состояние видео отправляются всем в канале синхронизации, чтобы johnny мог перейти туда, где играет shuny.
- Каждый раз, когда shuny или johnny пропускает / приостанавливает / воспроизводит видео, состояние будет передано каналу синхронизации.
Вышеупомянутые шаги являются основной логикой для реализации функции. Есть детали, которые я опустил для ясности. Например, когда новый пользователь входит в канал синхронизации, начальное состояние не нужно отправлять пользователям, которые уже находятся в канале синхронизации. Нам нужно только отправить состояние владельца синхронизации новому пользователю. Легко определить, какой пользователь запрашивает начальную синхронизацию.
Многие функции VidU (название этого веб-приложения) реализованы с использованием очень похожей логики, как указано выше. Например, функции комментирования и чата - это просто отправка сообщений по каналу комнаты. Функциональность чата отдельного пользователя также просто отправляет сообщения в канале, которым пользуются два пользователя.
Надеюсь, эта запись объясняет, как я реализовал режим синхронизации. Я буду редактировать эту запись по мере того, как буду очищать свой код в моем GitHub, и попытаюсь добавить немного графики, чтобы прояснить мою точку зрения. Я поделюсь кодом, как только посчитаю, что он будет доступен для чтения другим людям.
В следующей части я объясню, как я реализовал функцию комментариев. Будет реально круто!
Спасибо, что дочитали до сих пор! Быть в курсе!
