Репетиторство Penguin H5 в прямом эфире по запросу

Автору этой статьи: Чену Цзюньвэню из команды IMWeb запрещено перепечатывать без согласия.

предисловие

Penguin Tutoring — это сервисная платформа онлайн-обучения, запущенная Tencent для внеклассных занятий в начальной, средней и старшей школе. Недавно, чтобы помочь пользователям посещать занятия быстрее и удобнее, Penguin Tutoring добавил мобильную форму класса H5. Эта статья в основном знакомит с выбором H5 «прямая трансляция в реальном времени» и «по запросу», а также с проблемами и решениями, возникшими в процессе разработки.

фон спроса

Функция класса Penguin Tutoring является основной функцией продукта, и есть только два исходных класса: класс APP / класс браузера ПК.

• Класс приложения: Требования к среде невысокие, вы можете испытать это, подняв мобильное приложение.Для первого класса вам необходимо сначала загрузить приложение.
• Класс браузера ПК: вы можете посещать занятия, войдя на веб-сайт, но среда занятий должна находиться перед компьютером.

Теперь есть новый способ и носитель класса——Мобильный класс H5. Его характеристики:Поделитесь ссылкой, чтобы войти в указанный раздел указанного курса, который легко распространять. Нет необходимости загружать приложение, просто введите ссылку, чтобы зарегистрироваться, чтобы принять участие в классе. В основном используется для быстрого знакомства со сценой класса

Подробности

Вход на страницу класса H5

1. В среде без приложений исходная страница сведений о курсе H5 и страница успешной оплаты обеспечивают вход на страницу курса H5 (в настоящее время вход отображается в оттенках серого). Учащиеся, купившие класс, могут быстро перейти на страницу репетиторского класса и сразу же опробовать класс, не загружая ПРИЛОЖЕНИЕ.

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

Функциональные требования к странице класса H5

1. Прямая трансляция класса: выполняется двумя способами: прямая трансляция Tencent Cloud WebRTC (приоритетный план) и прямая трансляция hls (ухудшенный план). 2. Воспроизведение по требованию: воспроизведение hls через Tencent Cloud TcPlayer super on-demand. 3. Обсуждение и взаимодействие: на основе импуша студенты могут отправлять и получать тексты + выражения. Остальные интерактивные сцены вызываются тостами. 4. Схема курса: просмотр содержания и времени каждого раздела курса, а также переключение разделов непосредственно на той же странице для прямой трансляции/воспроизведения.

другие потребностиНа основе бизнес-логики веб-класса ПК существуют следующие требования: 1. Отображать разные обложки в соответствии с разными состояниями. 2. Обнаружение и воспроизведение горизонтального и вертикального экрана, переключение полноэкранного воспроизведения. 3. Определение типа сети и подсказка, Wi-Fi => пауза трафика 4G и подсказка и т. д. 4. Прыжок с гидом: ① Купите путеводитель по осмотру, чтобы приобрести курсы. ②Управляйте приложением, чтобы лучше изучить класс.

Функция кардинга

Техническая реализация

Живые решения и решения по запросу

Выбор аудио и видео решения

Прямая трансляция WebRTC понижение версии прямой трансляции hls

Поскольку класс проводится в прямом эфире, есть также модули области обсуждения и другие интерактивные модули (например, поднятие руки, ответы на вопросы и т. д.). Если есть задержка аудио и видео, пользователи-студенты могут четко это заметить, и опыт будет значительно снижен. Поэтому PlanA использует решение для прямых трансляций с малой задержкой — WebRTC, и задержка может быть в пределах 1 секунды.

Однако, поскольку WebRTC недостаточно совместим с мобильным терминалом, особенно с моделями Apple, для его постепенной поддержки требуется версия IOS 11.1.2 или более поздняя. Таким образом, в качестве плана Б необходимо решение для прямых трансляций более низкой версии с широкой совместимостью и охватом, чтобы гарантировать, что прямые трансляции могут быть полностью реализованы.

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

Почему бы не выбрать другие методы прямых трансляций с меньшей задержкой, чем hls, в качестве плана перехода на более раннюю версию?Причина в том, что даже если другие методы прямого вещания имеют меньшую задержку (например, flv может достигать 5-7 секунд), схема перехода на более раннюю версию отдает приоритет совместимости и больше не учитывает задержку. Даже если оно задержится на 5-7 секунд, оно все равно будет воспринято, а для стирания ощущения задержки нужен односторонний информационный поток типа mute.Задержка не так важна. Поэтому используйте HLS с лучшей поддержкой мобильных устройств.

Воспроизведение по требованию

Решение по запросу использует сервис Tencent Cloud по запросу, а веб-сторона использует зашифрованное решение HLS по запросу. Из-за предыдущего опыта на ПК используется проигрыватель Super-on-demand от Tencent Cloud, который на данный момент более стабилен, чем прямая трансляция. Поскольку для защиты от кражи необходимо расшифровать зашифрованные ресурсы по запросу, основная работа заключается в обработке аутентификации, такой как аутентификация токена в обмен на ключ дешифрования.

Доступ к плееру и процесс воспроизведения

Живой доступWebrtc Использование онлайн-воспитания WEBRTC-Live-Player, полагается на Tencent Cloud Webrtc SDK SDK, нуждается в поддержке до 3,4,1 выше (причины IOS новая версия имеет поддержку UnifiedPlan). Доступ к живу игроку, относительно простым. Определение контейнера DOM, таргетируя бизнес-модуль отчетности. Затем призрак выполнил предварительный знак.

const opts = {
       // 一些上报等配置项
      };
      this.webrtcPlayer = new WebRTCLivePlayer(opts);
      this.preconnect();

Предварительное подключение здесь предназначено только для того, чтобы сначала установить сигнальное соединение веб-сокета webrtc, потому что userig webtc может не быть доставлен в первый раз. Предварительное создание сигнального соединения может сэкономить время на установление сигнального соединения.

Когда userig будет готов, выполните init, и после асинхронного создания проигрывателя можно будет установить ширину и высоту проигрывателя. Наконец, после выполнения connet для успешного входа в комнату webrtc, обменяйте SDP и кандидата на установку соединения ICE и дождитесь воспроизведения видеопотока.

this.webrtcPlayer.init(sig, roomId).then(() => {
     // 设置播放器宽高
      this.webrtcPlayer.setContainerStyle({
        width: xxx,
        height: xxx,
      });
      this.webrtcPlayer.connect();
    });

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

Понизить доступ к Hls в реальном времениНа основе TCPlayerLite передайте адрес микширования m3u8 и создайте экземпляр проигрывателя. Для параметров инициализации см.:cloud.Tencent.com/document/cheat….

TCPlayerLite использует H5<video>Воспроизведение видео осуществляется в сочетании с Flash.В соответствии с различными средами воспроизведения проигрыватель по умолчанию выбирает наиболее подходящую схему воспроизведения. На мобильном терминале необходимо использовать m3u8.Поскольку мы получаем интерфейс службы адресов смешанного потока для предоставления адресов rtmp, flv и hls, когда адрес опций передается под мобильным терминалом H5, rtmp и flv должны быть удалены. и должен передаваться только адрес m3u8.

const player = new TcPlayer('tcplayer_container', {
    "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",//举例 
    "autoplay" : false,（备注：true只对大部分 PC 平台生效） 
    "width":"100%",
    "height":"100%",
    "live":true,
    "x5_player":true
});

Чтобы лучше понять этапы прямой трансляции, я разобрал схему процесса и архитектуры прямой трансляции.

Доступ по требованию к Tencent Cloud TCPlayer

Ресурсы по запросу, поскольку ресурсы, оплачиваемые пользователями-студентами, естественно, не могут воспроизводиться с адресом m3u8 и должны быть зашифрованы. Следовательно, для доступа по запросу, в дополнение к идентификатору файла ресурса по запросу, для расшифровки видео также требуется проверка идентификационной информации пользователя.

Для зашифрованного HLS см.:cloud.Tencent.com/document/cheat…Он предоставляет две программы воспроизведения видео. Проще говоря, cookie используется для генерации токена, а ключ дешифрования DK получается через результат интерфейса DK бизнеса.

Вариант 1. Передайте информацию о маркере аутентификации через QueryString.

http://example.vod2.myqcloud.com/path/to/a/voddrm.token.ABC123.video.m3u8

Вариант 2. Игрок получит файл cookie при доступе к URL-адресу, определенному тегом EXT-X-KEY.

Но тут есть подводные камни: на ПК у нас принята схема 2. На бизнес-интерфейс dk того же домена куки вывести не проблема, а вот под Android H5 транслировать не получится. Перехват пакета показал, что под Android это явно интерфейс того же домена, но он не может содержать файлы cookie. Проверил документацию и нашел это предложение.

Кажется, что мы не можем использовать вторую схему так же просто, как ПК на мобильном H5, но схема 1 генерирует токен на основе куки, а также нужно играть параметр адреса, и у нас изначально были только filedId и dk, а не адрес m3u8. Посоветовавшись с коллегами в классе, выяснилось, что Tcplayer предоставляет для передачи токена параметр HLStoken, которого нет в документе.

Токен здесь передается, когда игрок запрашивает /cgi-bin/qcloud/get_dk, поэтому не имеет значения, что cookie не может быть передан в браузере Android.

this.player = new window.TCPlaye(this.elIDId, {
      fileID, // 请传入需要播放的视频filID 必须
      appID  // 请传入点播账号的appID 必须
      autoplay: false,
      plugins: {
        HLSToken: {
          token, //根据cookie生成的token，这个参数文档中并没有。
        },
      },
    });

Мобильный H5 аудио и видео наступает на яму

Из-за разных систем и версий (IOS и Android) мобильного H5 среда браузера (WeChat, мобильный QQ и собственный браузер) также намного сложнее, чем у ПК. В дополнение к проблемам совместимости WebRTC на мобильной стороне также существуют различия в производительности от ios 11.1.2 до последней версии 12.4. Поэтому я намеренно резюмирую некоторые основные ямы, на которые наступили.

1. iOS 12.3 должна поддерживать единый планПричина проблемы: Стандарт WebRTC SDP. Производители браузеров постепенно внедряют единый план, но план Apple-b использовать нельзя. Решение: Обновите SDK Tencent Cloud WebRTC до версии 3.4.1.Эта часть изменяет исходный план-b по умолчанию на унифицированный план и дополняет API, соответствующий RTCUtils из пути унифицированного плана.
2. Есть 2-минутный сбой WebRTC под IOS без сафари.Причина проблемы: ядро ​​браузера приложений IOS, не относящихся к Safari (WeChat, Mobile QQ), не может получить качество PeerConnection. Дело в том, что нет ни успешного обратного вызова, ни неудачного обратного вызова для получения качества. В итоге нет 2s репортажного качества, а потом поток будет обрезан. Решение: решить, что ua не является браузером Safari для IOS, и принудительно дополнить неудавшийся обратный вызов.
3. Проблемы совместимости с атрибутами тега видео.Решение: Атрибут playsinline необходимо использовать под H5, иначе он будет автоматически воспроизводиться в полноэкранном режиме. Свойства должны иметь префикс -webkit и x5. Автовоспроизведение может быть недействительным, и для запуска воспроизведения требуются события действий пользователя. Атрибут тега видео должен обрабатываться в каждом конкретном случае. Для некоторых совместимости, пожалуйста, обратитесь кdocs.QQ.com/sheet/DT GP4…
4. Проблема с триггерным механизмом videoEVent.Причина проблемы: Реализация стандарта воспроизведения видео H5 на каждом терминале платформы несовместима, и метод запуска и результат события будут разными.developer.Mozilla.org/en-US/docs/….error,timeupdate,load,loadedmetadata,loadeddata,progress,fullscreen,play,playing,pause,ended,seeking,seeked,resize,volumechangeРешение. Некоторые машины запускают loadmeatadata и loaddata только после запуска воспроизведения. Отрегулируйте время первого кадра до игрового времени.
5. IOS не является unfiedplan, и WebRTC не может сбросить поток для видео при обновлении потока.Решение: Для версий ниже IOS 12.3, когда картинка в картинке переходит из ничего в ничего, то из ничего заново установить соединение WebRTC.
6. Ядро X5 tcplayer по запросу, система должна заблокировать кнопку загрузки в полноэкранном режиме.Решение: Найдите коллегу по tcplayer, и вы можете заблокировать его, если хотите, чтобы команда ядра x5 предоставила доменное имя.
7. Видеосистема поставляется с панелью управления.Решение:<video controls >Установите для него значение false и используйте dom для реализации панели управления.Две необходимые клавиши для панели управления: клавиша отключения звука, установка видео.muted=true/false и еще одна полноэкранная клавиша, см. схема экрана и контент, связанный с API requestfullscreen.
8. Путь полноэкранной реализации системы WebRTC в ядре X5 несовместим с MSE-видео.Причина проблемы: Спросите у коллег по ядру X5, текущий полный экран системы webrtc и полный экран обычной видеосистемы имеют разные внутренние пути. В результате полноэкранный режим системы WebRTC неидеален, и нажатие клавиши возврата приведет к закрытию страницы. Об общей полноэкранной схеме поясняется ниже.

Обнаружение горизонтального и вертикального экрана и полноэкранный режим

Определение понятия: полноэкранный режим (системный полноэкранный режим) или полноэкранная веб-страница (псевдополноэкранный режим).

• полноэкранный: относится к полному экрану в пределах диапазона экрана. После полного экрана отображается только содержимое видеоэкрана, а адресная строка браузера и другие интерфейсы не видны. Для этого полноэкранного режима требуется, чтобы браузер обеспечивал поддержку интерфейса.
• Полноэкранный режим веб-страницы: относится к полному экрану в области отображения веб-страницы, а адресная строка браузера и другие интерфейсы все еще видны после полноэкранного режима.Обычно полный экран веб-страницы — это способ достижения аналогичного полного screen в ответ на то, что браузер не поддерживает полноэкранный режим системы. Называется псевдополным экраном. Этот полноэкранный режим реализован с помощью CSS.

Что касается веб-полноэкранного режима, самый простой способ: при входе в полноэкранный режим веб-страницы для параметра ВИДЕО установлено фиксированное значение, отрегулируйте значение z-индекса, и панель управления будет заполнена. Обработка немного отличается на горизонтальном вертикальном экране, контрастном экране и широкой высокой пропорции ВИДЕО, с шириной или высокой настройкой 100%, а другая рассчитывается, конечной целью является достижение эффекта заполнения.

requestFullScreen API

Поддержка полноэкранного интерфейса имеет два экрана, называемых полноэкранным API, функции полноэкранного просмотра после входа в полноэкранный API, которые вы все еще можете видеть после входа в полноэкранный HTML CSS, составленный интерфейсом проигрывателя. Другой интерфейс webkitEnterFullScreen, видеоинтерфейс может быть применен только к метке, как правило, мобильный терминал не поддерживает полноэкранный API, полноэкранный интерфейс через интерфейс, интерфейс системы интерфейса проигрывателя.

В реальном бизнесе для полноэкранного приоритетного исполненияvideo.webkitEnterFullscreen();(Apple поддерживает только этот API), если выполнение не удалось, выполнить сноваvideo.webkitRequestFullScreen();.

Горизонтальная и вертикальная оценка экрана, определение ориентации

Здесь я использую сторонний код обнаружения:GitHub.com/разогрев канга, обжигающий канга/…В дополнение к обнаружению горизонтальных и вертикальных экранов этот неработающий код также может определять гравитацию, угол наклона уровня и т. д., а также выполняет обработку совместимости с несколькими терминалами.

Метод использования очень прост: инициализируйте монитор, при изменении значения dir меняется экран по горизонтали и вертикали, после чего можно обновить макет.

const _orienter = new window.Orienter();

this.props.updateOrientation(_orienter.direction); //先判断一次当前横竖屏

_orienter.onOrient = function (obj) {
  if (this.dir !== obj.dir) {
    this.dir = obj.dir;
    setTimeout(() => {
      //延迟200ms更新布局
      this.props.updateOrientation(obj.dir);
    }, 200);
  }
};
//开始监听横竖屏
_orienter.on();

Уведомление: здесь есть настройкизадержка 200 мс, причина в том, что при изменении горизонтального и вертикального экранов, полученные ширина и высота экрана остаются шириной и высотой экрана "до изменения", и сразу возникнут проблемы с обновлением макета. Поэтому задержитесь на 200 мс перед обновлением макета.

Оформление статуса класса и статуса контроля покрытия

Когда вы получите требования и интерактивные изображения, вы обнаружите, что для класса существует несколько обложек, и обложки могут меняться на странице с течением времени. Все это вытекает из сложности классового статуса.Есть три измерения суждения: 1. Текущее время. 2. Находится ли учитель в классе. 3. Есть ли видеопоток. Таким образом, как управлять изменением обложки, главным образом, поддерживать и контролировать значение хранилища состояния класса, а затем отображать обложку.

Дизайн состояния покрытия: используйте градуированное покрытие, отображение состояния для управления. Групповые обложки накладываются на вложенные обложки.Основной компонент покрытия: отвечает за измерение времени и статус большого курса, который можно оценить с помощью CGI, одностороннего процесса, и он не переключается.Компонент подпокрытия: отвечает за управление состоянием воспроизведения и может переключаться вперед и назад в соответствии с состоянием класса учителя и управлением состоянием потока, неоднонаправленный процесс.

Тип сети и обнаружение отключения

В классе браузера ПК это, как правило, Wi-Fi и проводной доступ в Интернет, но просмотр в прямом эфире и по запросу в мобильном браузере, в дополнение к Wi-Fi, может потреблять трафик, необходимо иметь возможность определять текущий статус сети (режим трафика / wifi режим) на оценку . Таким образом, пользователю предлагается ответить, и пользователь не может потреблять трафик, не зная об этом.

через сам браузерnavigator.connection.typeПравда о браузере можно судить, но только хром поддерживает мобильные, а другие браузеры почти недоступны.

Таким образом, оценка типа сети по-прежнему зависит от возможностей, предоставляемых приложением. На основе двух основных встроенных браузеров, мобильного QQ и WeChat, оба предоставляют JS API для оценки типа сети. Ниже приведена реализация кода.

return new Promise((resolve, reject) => {
    if (window.WeixinJSBridge) {
     //微信检测networktype
      window.WeixinJSBridge.invoke('getNetworkType', {}, (e) => {
        resolve({
          isNetWorkFlow:
            e.err_msg !== 'network_type:wifi' &&
            e.err_msg !== 'network_type:fail',
          isNetworkBroken: e.err_msg === 'network_type:fail',
        });
      });
    }
    if (window.mqq) {
    //手Q检测networktype
      window.mqq.device.getNetworkInfo((res) => {
        resolve({
          isNetWorkFlow: res.type === 2 || res.type === 3 || res.type === 4,
          isNetworkBroken: res.type === 0,
        });
      });
    } else {
      reject();
    }
  });

Через обратный вызов опроса каждые 3 секунды, в дополнение к оценке того, является ли тип сети трафикомisNetWorkFlow, также определить текущую сетьisNetworkBrokenли отключить. Наконец, существуют различные подсказки, основанные на результате обратного вызова.

Управление параметрами запроса ссылки на страницу класса и переключение разделов курса

Параметр запроса ссылки на страницу класса ПК

В веб-проекте ПК каждая страница класса соответствует только одному классу, а параметры ссылки соответствуют информации каждого класса и текущему статусу класса.

https://fudao.qq.com/pc/webclass.html?term_id=2000010153&course_id=113536&lesson=0&lesson_id=93561&status=2&sub_termid=0

course_idа такжеterm_id: идентификатор курса и идентификатор классаlesson_id: идентификатор разделаstatus: Статус класса 0 не запущен, 1 прямая трансляция, 2 воспроизведение, 3, сгенерированное воспроизведениеsub_termid: маленький идентификатор класса

В браузере PC Перейдите из страницы страницы School Curriculum Page, параметры запросов были определены на ссылках на странице, вы можете сразу получить параметр состояния (рассчитанный по времени), поэтому, согласно странице. Немедленно загружается классное состояние нагрузок игрока и соответствующий стиль, не дожидаясь запроса CGI; но нижняя часть промежутка передается курсам, чтобы обновить страницу для перезагрузки.

Переключение класса без обновления страницы

Поскольку страница класса H5 содержит «схему курса», это эквивалентно концентрации «страницы заданий курса» и «страницы класса» на исходном ПК на одной странице, продукт рассчитывает удовлетворить следующие требования: 1. Страница не обновляется при смене курса. 2. Если в ссылке нет URL-адреса урока, он может найти самый последний неначатый урок. 3. После переключения раздела общая ссылка может находиться на текущем разделе.

Вышеуказанные три пункта трудновыполнимы, причина в том, что в исходном коде довольно много мест, где параметры берутся из ссылки в один момент, а из-за механизма разделения необходимо также модифицировать параметры ссылки, не обновляя страницу, и повторно получить параметры ссылки.Перезагрузите компоненты проигрывателя и субтитров. Реализовать метод switchLesson, идея такова: