Прямая трансляция в Интернете, вам нужно знать это в первую очередь

внешний интерфейс Тенсент прямая трансляция WebRTC
Из сообщества IMWeb, автор: Терренс,Оригинальная ссылка

1. Малая научная популяризация знаний о прямом эфире

  1. Типичный процесс прямой трансляции: запись->кодирование->передача по сети (стриминг->обработка на сервере->раздача CDN)->декодирование->воспроизведение
  2. IPB: широко используемая схема сжатия видео с I-кадром для ключевого кадра, B-кадром для прямого разностного кадра, P-кадра для двунаправленного разностного кадра.
  3. GOP (группа изображений): чем длиннее GOP (чем больше интервал между I-кадрами), тем выше доля B-кадров и тем выше производительность кодирования по скорости и искажению. Несмотря на высокую степень сжатия B-кадров, нагрузка на процессор при декодировании будет выше.
  4. Основные показатели качества живого аудио и видео:задержка контента,Катон (свободно),продолжительность первого кадра
  5. Основные проблемы, которые необходимо преодолеть в живом аудио и видео: сетевое окружение, многоканальное подключение микрофона, основные и вспомогательные дороги, совместимость с браузерами, поддержка CDN и т. д.
  6. MSE(Расширения источника мультимедиа): стандартный API W3C для решения проблемы потоковой передачи HTML5 (HTML5 изначально поддерживает только воспроизведение непотоковых форматов mp4/webm, а не FLV), что позволяет JavaScript динамически создавать<video>а также<audio>медиапоток. Вы можете использовать MediaSource.isTypeSupported(), чтобы определить, поддерживается ли тип MINE. Не поддерживается в iOS Safari.

屏幕快照 2018-01-07 下午7.54.28

  1. Формат файла/формат пакета/формат контейнера: формат, в котором передается видео, например, flv, avi, mpg, vob, mov, mp4 и т. д. То, как видео кодируется и декодируется, связано с кодеком. Например, формат MP4 делится на nMP4 и fMP4 в соответствии с разными кодеками. nMP4 состоит из вложенных Boxes, а формат fMP4 состоит из серии фрагментов, поэтому только последнему не нужно загружать весь файл для воспроизведения.
  2. Codec: Кодек мультимедийного цифрового сигнала, способный сжимать (CO) и распаковывать (DEC) аудио и видео. Технология CODEC может эффективно уменьшить пространство, занимаемое цифровым хранилищем.В компьютерных системах использование аппаратных средств для завершения CODEC может сэкономить ресурсы ЦП и повысить эффективность работы системы.
  3. Часто используемое кодирование видео: MPEG, H264, RealVideo, WMV, QuickTime. . .
  4. Распространенные аудиокодеки: PCM, WAV, OGG, APE, AAC, MP3, Vorbis, Opus. . .

2. Сравнение существующих схем

RTMP-протокол

  1. на основе TCP
  2. Монополия Adobe, высокая внутренняя поддержка
  3. Сторона браузера полагается на Flash для воспроизведения
  4. задержка 2~5 секунд

RTP-протокол

  1. Real-time Transpo
    rt P
    rotocol — стандарт, предложенный IETF в 1996 г.
  2. на основе UDP
  3. И в реальном времени
  4. Для видеонаблюдения, видеоконференций, IP-телефонии
  5. Производители CDN, браузеры не поддерживают

HLS-протокол

  1. Http Live Streaming, протокол передачи потокового мультимедиа на основе HTTP, предложенный Apple.
  2. Прямая поддержка HTML5 (видео), подходит для прямой трансляции APP, поддержка только Safari и Edge на ПК
  3. Должна быть кодировка H264+AAC
  4. Поскольку передаются нарезанные аудио- и видеоклипы, задержка контента относительно велика.5322845F-61E0-4900-B1CC-147B746D9461

flv.js

  1. Bilibli имеет открытый исходный код, анализирует данные FLV, инкапсулирует их в fMP4 через MSE и передает в тег видео.
  2. Кодируется как H264+AAC
  3. Потоковый ввод-вывод с использованием HTTP (fetchилиstream) или потокового медиаконтента по протоколу WebSocket
  4. Задержка 2~5 секунд, первый кадр быстрее, чем RTMP

WebRTC-протокол

1. Google продвигает его и стал стандартом W3C

2. Современные браузеры поддерживают тренды, X5 тоже поддерживает (WeChat, QQ)

3. На основе UDP, низкая задержка, сильная устойчивость к слабой сети, больше преимуществ, чем у flv.js

строить планы использование процессора частота кадров кодовая скорость задерживать первый кадр
flv.js 0.4 30 700kbit/s 1.5s 2s
WebRTC 1.9 30 700kbit/s 0.7s 1.5s

4. Поддержка восходящей сети

5. Кодировка H264+OPUS.

6. Обеспечьте технологию обхода NAT (ICE)

На практике, когда количество пользователей велико, требования к производительности потоковых устройств очень высоки, и трудно реализовать сложное управление правами, поэтому внедрение архитектуры P2P практически невозможно. Для сценариев, в которых отдельные пользователи обеспечивают восходящий поток, а большое количество пользователей только извлекает потоки,Тенсент КлассРеализовано решение P2S.Для дальнейшего изучения вы можете прочитать серию статей jaychen«Живая технология WebRTC».

3. Мини-программа + прямой эфир

Технические решения

  1. 基于RTMP，官方说底层使用HTTP/2的一种内部传输机制，但又说是基于UDP的，这就搞不懂了。 . .
  2. live-pusher и live-player без ограничений сторонние облачные сервисы
  3. Вы можете напрямую использовать возможности живого видео Tencent Cloud, просто настройте URL-адрес для отправки и URL-адрес для воспроизведения.

URL-адрес пуш-потока:

URL-адрес воспроизведения:

Ниже приведен аудио- и видеоапплет, который я создал в соответствии с руководством на официальном веб-сайте.Процесс создания прост, и опыт прямой трансляции в той же локальной сети также очень плавный (читатели также могут осуществлять прямой поискОблако видео TencentМини программа для опыта):

QQ20180107-0

Основной код внешнего интерфейса довольно лаконичен:

  • компонент live-pusher: установите адрес потока URL-адреса (поддерживается только формат flv, rtmp) и другие параметры, используйте bindstatechange, чтобы получить изменение состояния воспроизведения

    <view id='video-box'>  
    <live-pusher
          id="pusher"
          mode="RTC"
          url="{{pusher.push_url}}" 
          autopush='true'
          bindstatechange="onPush">
    </live-pusher>  
 </view>

  • компонент live-player: после установки таких параметров, как адрес аудио и видео src (поддерживаются только форматы flv, rtmp), используйте bindstatechange, чтобы получить изменение состояния воспроизведения.

    <view id='video-box'>  
    <live-player
        wx:for="{{player}}"
        id="player_{{index}}"
        mode="RTC"
        object-fit="fillCrop"
        src="{{item.playUrl}}" 
        autoplay='true'
        bindstatechange="onPlay">
   </live-player>
 </view>

Можно ли использовать его одновременно с WebRTC?

В сценарии приложения Tencent Classroom учитель использует протокол RTMP для потоковой передачи в классе.Учитывая, что WebRTC можно использовать только для потоковой передачи на стороне ПК, могут ли пользователи смотреть уроки в прямом эфире непосредственно через апплет на мобильном терминале? Я думаю, что это технически осуществимо.Прямая трансляция мини-программы будет большим подспорьем в расширении влияния платформы, распространении в социальных кругах и улучшении конвертации сборов. Сложность заключается в сложном контроле разрешений, многоканальных аудио- и видеопотоках, подключении к микрофону нескольких человек и т. д. Например, контроль разрешений может быть выполнен только в логике управления помещением, а сами аудио- и видеопотоки лишены такой возможности. проверка, а также переключение основного и вспомогательного каналов Необходимо добавить отдельное управление сигнализацией и соответствующую логику оценки в апплет.

4. Справочные статьи

  1. Начало работы с протоколом HTTP
  2. Используйте flv.js для прямых трансляций
  3. Ориентированная на будущее технология прямых трансляций — WebRTC [видео, PPT]
  4. Аудио- и видеовозможности мини-программы Технический руководитель Интерпретация «Прямая трансляция мини-программы»
  5. Простой учебник по разработке мини-программ
  6. Аудио- и видеоинтерпретация мини-программ


Категории