Введение в технологию WEB Live и применение video.js в Vue

внешний интерфейс JavaScript Vue.js прямая трансляция

Введение

Служба видео в реальном времени в настоящее время поддерживает три протокола прямого вещания, а именно RTMP, HLS и FLV.Следующее содержимое взято из Справочного центра Alibaba Cloud.

  • RTMP 实时消息传输协议，由Adobe公司研发，但当前还没有收入国际标准（wikipedia）. Протокол относительно универсален и может использоваться как для push-уведомлений, так и для прямых трансляций. Его основная концепция заключается в том, чтобы «нарезать» большие блоки видеокадров и аудиокадров, а затем передавать их в Интернете в виде небольших пакетов данных, а поддерживает шифрование, поэтому конфиденциальность относительно идеальна, но процесс распаковки и группировки более сложен, поэтому в случае массового параллелизма могут возникнуть некоторые непредсказуемые проблемы со стабильностью.
  • HLS-протокол:基于HTTP协议的流直播（wikipedia）. Решение, представленное Apple, делит видео на 5-10-секундные видеосегменты, а затем управляет ими с помощью индексной таблицы m3u8. Поскольку видео, загружаемые клиентом, представляют собой все 5-10 секунд полных данных, плавность видео очень хорошая, но она также приводит к большой задержке (общая задержка HLS составляет около 10-30 секунд). По сравнению с FLV, HLS хорошо поддерживается iPhone и большинством браузеров мобильных телефонов Android, поэтому он часто используется в QQ и WeChat Moments. Совместное использование URL.
  • Протокол HTTP-FLV в основном продвигается компанией Adobe. Этот формат очень прост. Он лишь добавляет некоторую информацию заголовка тега к большим видеокадрам, а также к аудио- и видеозаголовкам. масштабный параллелизм. Единственным недостатком является то, что поддержка в мобильных браузерах очень ограничена, но он очень подходит в качестве протокола прямой трансляции для мобильных приложений.

Вот сравнение трех технологий:

Подать заявку во Vue

Проект прямой трансляции, который мы делаем, написан на Vue, а фон в основном выводит прямые трансляции RTMP и HLS.

Игрок используетvue-video-player, по фактуvideo.jsинтегрирован в вью

будь осторожен

Давайте поговорим о некоторых ямах и точках внимания при использовании этого плагина для прямых трансляций:

Прежде всего, обычно используется в демоvue-video-playerКитайский чиновник дал его, вы можете прийти по мере необходимости, среди которых

  1. Если вам нужно воспроизводить потоки HLS, вам необходимо установитьvideojs-contrib-hlsПлагины, нестандартные поддерживаемые браузеры, CORS необходимо включить на рабочем сервере (будет обсуждаться позже)
  2. Если вам нужно воспроизводить RTMP-потоки, вам необходимо установитьvideojs-flashплагин
  3. Если необходимо воспроизвести оба потока, плагин flash необходимо установить перед плагином hls.

совместимость

Давайте поговорим о проблемах совместимости между этими двумя прямыми трансляциями.

  1. RTMP: Как упоминалось выше, RTMP - это протокол, разработанный Adobe. В настоящее время основные службы прямых трансляций в основном проталкивают RTMP-потоки. Он имеет небольшую задержку, но требует поддержки флэш-плагина и установки, упомянутой выше.videojs-flashплагин. Тем не менее, поддержка флеш-плагина под MAC не является дружественной, а флеш-плагин для браузера Firefox и хрома под MAC по-прежнему являются двумя плагинами. . Это неловко.
  2. HLS: этот протокол имеет хорошую совместимость, но самым большим недостатком является высокая задержка, около 20 с, поэтому его можно использовать только в качестве альтернативы.

Говоря, что HLS имеет хорошую совместимость, в основном означает, что пользователи могут быть свободны от настройки через JS (нет необходимости устанавливать flash).Вы можете увидеть уровень поддержки HLS в caniuse:caniuse.com/#search=HLS

ТолькоEdgeа такжеSafariОбеспечивает встроенную поддержку, другие браузеры требуют поддержки подключаемого модуля JS. Разве это не просто цитированиеvideojs-contrib-hlsЭто нормально? ❌, здесь еще есть яма. Эта яма описана в официальной документации плагина:

Unlike a native HLS implementation, the HLS tech has to comply with the browser's security policies. That means that all the files that make up the stream must be served from the same domain as the page hosting the video player or from a server that has appropriate CORS headers configured. Easy instructions are available for popular webservers and most CDNs should have no trouble turning CORS on for your account.

Это просто означает:除了原生支持 HLS 的浏览器，其他浏览器要想播 HLS，需要直播流服务端开启 CORS。

Последняя схема, которую мы использовали. Предпочитайте потоковую передачу RTMP, если нет, переключитесь на потоковую передачу HLS. К счастью, video.js автоматически сделает этот процесс переключения за нас. Вставьте соответствующий код конфигурации ниже.

код конфигурации

Параметры игрока в экземпляре Vue, больше кодаGitHub.com/Савокисс/ву…

      playerOptions: {
        autoplay: false, // 自动播放
        controls: true, // 是否显示控制栏
        techOrder: ['flash', 'html5'], // 兼容顺序
        sourceOrder: true, // 
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
          type: 'rtmp/mp4',
          src: 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'
        }, {
          withCredentials: false,
          type: 'application/x-mpegURL',
          src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
        }],
        poster: "/static/img/no_data.png", // 播放器默认图片
        // controlBar: { // 配置控制栏
        //   timeDivider: false, // 时间分割线
        //   durationDisplay: false, // 总时间
        //   progressControl: true, // 进度条
        //   customControlSpacer: true, // 未知
        //   fullscreenToggle: true // 全屏
        // },
      },

наконец

Выше приведены небольшие итоги недавних исследований проектов прямого вещания.Другие технологии в прямом эфире пока не привлекались и будут обобщены в будущем.Если у вас есть какие-либо вопросы, вы можете с ними связаться. Наконец-то добро пожаловать на мой демо-проект star.

Справочная документация

Категории