Разработка своего плеера для стримов с чатом на JS, как работает это?

Возникла такая идея у человека - разработка собственного плеера для онлайн трансляций с чатом в реальном времени.
Там должны быть реализованы лайки, дизлайки, реакции ( эмодзи ). Также там система НМО: Пользователь подтверждает свое присутствия путем нажатия на кнопку “Подтвердить” в попап окне, которое отображается регулярно на протяжении установленного интервала времени. Частота отображения должна быть также настраиваемая. Результат сводится в процентах, например пользователь подтвердил 5 раз из 10 = 50%.

В качестве примера дали это: https://zeenevents.com
Говорит контент будет поставляться неким CDNVideo - провайдером CDN каким-то:) Как это работает?

Технологии разработки: WordPress, JS, PHP + Laravel.
Идентификация юзеров через WP.
Я что-то слабо представляю как это может выглядеть, есть у вас идеи или что... хоть чет, я вообще запутанный)
Что это все? Что человек хочет?

Дополнительно:

А в чем вопрос ?

  • aleks-th, сам хз, хочу узнать как может работать подобный сервис который хочет сделать человек.
    Типо под капотом, по пунктам или что-то в этом роде. Как оно по сложности?
  • Niksak, онлифанс что ли хочет?
  • Niksak, а тогда при чем тут вебразработка ?

    Как-то может, а возможно не может.
    По пунктам - это работа по ТЗ называется - вам на фриланс однако.

  • По формулировке заголовка/тела можно сделать вывод, что автор вопроса вряд ли разработчик. А если и разработчик, то там такой результат получится, что лучше ничего не делать, и сразу идти на фриланс.

    • Ответы:

    Вы разбили задачи на более мелкие. и что конкретно у вас вызывает сложность?

    WP не вижу тут как технологию, точнее проще будет взять фреймворк (Laravel ок и он может взять все остальные задачи). Но если вдруг WP обязателен, то можно настроить сквозную авторизацию.

    разработка собственного плеера

    Плееры уже есть, зачем париться?

    для онлайн трансляций с чатом в реальном времени.
    Там должны быть реализованы лайки, дизлайки, реакции ( эмодзи )

    сокеты, модификации базы для работы с эмодзи, редактор. Кстати редактор был любопытный, его раньше пикабу использовали, забыл название. В любом случае, искать по слову - WYSIWYG.

    Также там система НМО: Пользователь подтверждает свое присутствия путем нажатия на кнопку “Подтвердить” в попап окне, которое отображается регулярно на протяжении установленного интервала времени.

    Сокет (да даже обычный js запрос) + бд с синхронизацией времени кликов на конкретный евент.

    Главная проблема у вас будет в поиска плеера, который отдает видео с CDN с смещением, якобы онлайн.

    • Но если вдруг WP обязателен, то можно настроить сквозную авторизацию.

      Да, он что-то говорил про "сквозняк") ну про сквозную авторизацию

    + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Разработка своего плеера для стримов с чатом на JS, как работает это?Есть ответ
      • 07.04.2024
      Ответить

      Для разработки своего плеера для стримов с чатом на JavaScript вам потребуется использовать различные технологии и инструменты. Вот основные шаги, которые вам нужно выполнить:

      1. Создание пользовательского интерфейса: начните с разработки дизайна и верстки плеера. Используйте HTML и CSS для создания интерфейса плеера, включая размещение видео и чата на странице.

      2. Воспроизведение видео: для воспроизведения стримов используйте HTML5 Video API или сторонние библиотеки, такие как Plyr или Video.js. Вы можете использовать

       тег для встраивания видео в ваш плеер.
 
3. Работа с чатом: для добавления чата к плееру вы можете использовать WebSocket для реального времени обмена сообщениями между пользователями. Напишите серверную часть на Node.js или другом языке программирования, который будет обрабатывать сообщения от пользователей и передавать их другим участникам чата.
 
Пример кода для создания WebSocket сервера на Node.js:
 
<pre lang="php">
const WebSocket = require('ws');
 
const wss = new WebSocket.Server({ port: 8080 });
 
wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    wss.clients.forEach(function each(client) {
      if (client !== ws &amp;&amp; client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

      4. Интеграция чата с видеоплеером: свяжите чат с видеоплеером, чтобы пользователи могли общаться во время просмотра стрима. Добавьте элемент интерфейса, который будет показывать сообщения чата рядом с видео.

      5. Тестирование и оптимизация: перед запуском плеера проведите тестирование на различных устройствах и браузерах, чтобы убедиться, что все работает корректно. Оптимизируйте код для улучшения производительности и стабильности плеера.

      Это лишь общий обзор того, как можно создать плеер для стримов с чатом на JavaScript. Помните, что разработка плеера может быть сложным процессом, требующим знаний различных технологий и практического опыта. Надеюсь, этот ответ поможет вам начать работу над вашим проектом!

    Оставить комментарий