Я думаю, что все слышали о Доуине, но знаете ли вы, что есть Web Доуин версия Людей может быть меньше, и TikTok То же самое и с Доуином. Web версия, которая позволяет нам смотреть короткие видеоролики и прямые трансляции Douyin в браузере. Как Douyin реализует прямую трансляцию в браузере? В этой статье будут проанализированы технические принципы прямой трансляции Douyin.

отлаживать

Первый клик https://live.douyin.com Войдите на страницу прямой трансляции Douyin.

Затем войдите в комнату прямой трансляции и откройте инструменты разработчика, чтобы просмотреть структуру DOM, связанную с игроком, как показано на рисунке ниже.

Прежде всего, вы можете обнаружить, что Douyin также используется. xgplayer。Кроме тогоможно найти video элементарный src Свойства blob: Видеоадрес в начале такой же, как мы обычно используем. video Видео, воспроизводимое элементом, немного отличается. Чтобы понять, почему адрес видео. blob: В начале нужно понять, что будет представлено дальше MSE API。

Введение в расширения медиа-источников

Media Source Extensions Расширение медиа-источника API (MSE) API Предоставляет реализацию, не требующую подключаемых модулей и основанную на Web Функция потоковой передачи отличается от простого использования video элемент,video Элементы — это полностью черный ящик для разработчиков. Браузер сам загружает данные, анализирует, декодирует и затем воспроизводит. В ходе этого процесса разработчики не могут выполнять какие-либо операции. использовать MSE API Разработчики могут настроить получение потоковых мультимедийных данных и выполнять некоторые операции с данными.

Совместимость MSE показана на рисунке ниже.

Можно обнаружить, что совместимость MSE довольно хорошая, и IE 11 поддерживает ее. Однако версия браузера Safari для iPhone, известная как современный IE, по-прежнему не поддерживает MSE API. Вероятно, Apple хочет продвигать свой собственный протокол HLS, чтобы вы могли использовать только его собственный протокол для воспроизведения потоковой передачи. медиа на устройствах iPhone.

MSE API В основном включают MediaSource и SourceBuffer Два объекта,MediaSource Представляет источник видео с одним или несколькими SourceBuffer,SourceBuffer выразить одни исходные данные, например одно видео, разделенное для видео и аудио, мы можем создать два SourceBuffer Один для воспроизведения видео, один для воспроизведения аудио, MSE Схема архитектуры показана ниже.

Вы также можете узнать это из картинки выше. SourceBuffer Это также разбито ниже TrackBuffer,потому чтодля Вы также можете создать два SourceBuffer,Используйте только один SourceBuffer игратьвидеои Аудио,Пусть он отделится внутри звука видео,Декодирование Играть с различными декодерами.

Процесс использования MSE для воспроизведения видео показан на рисунке ниже.

Сначала мы используем fetch или XHR Загрузите данные, выполните некоторую обработку и передайте данные MediaSource,наконец прошло video элемент для игры,

как MediaSource и video А как насчет соединений элементов? Для этого необходимо использовать URL.createObjectURL это создаст DOMString указывает на указанное File объектили Blob（двоичный большойобъект） объект. этот URL из Жизненный цикли Создайте его изWindow из document Привязка. Вот что нужно длявышеотлаживатьсерединаиз video элементарный src это blob начало строки.

Давайте посмотрим на минимальный код для воспроизведения видео с помощью MSE.

const video = document.querySelector('video')const mediaSource = new MediaSource()

mediaSource.addEventListener('sourceopen', ({ target }) => {    URL.revokeObjectURL(video.src)    const mime = 'video/webm; codecs="vorbis, vp8"'
    const sourceBuffer = target.addSourceBuffer(mime) // target Да mediaSource
    fetch('/static/media/flower.webm')
        .then(response => response.arrayBuffer())
        .then(arrayBuffer => {
            sourceBuffer.addEventListener('updateend', () => {                if (!sourceBuffer.updating && target.readyState === 'open') {
                    target.endOfStream()
                    video.play()
                }
            })
            sourceBuffer.appendBuffer(arrayBuffer)
        })
})

video.src = URL.createObjectURL(mediaSource)

addSourceBuffer метод будет основан на заданном MIME Тип создает новый SourceBuffer объект, а затем добавить его в MediaSource из SourceBuffers в списке.

Нам нужно передать соответствующую строку из кодеков (кодеков),здесьпервыйда Аудио（vorbis）,Нет.двадавидео（vp8）,Эти две позиции также можно поменять местами.,Если вы знаете конкретный браузер кодеков, вам не нужно загружать конкретные данные, чтобы узнать, поддерживает ли их текущий тип.,если не поддерживает метод Должен и выкинет NotSupportedError ошибка. Подробнее о типах носителей MIME На кодеки можно ссылаться RFC 4281。

Он также называется здесь в начале revokeObjectURL。Это не разрушает никакихобъект,Можно найти в MediaSource подключиться к video можно позвонить в любое время позже. Это позволяет браузеру при необходимости выполнять сборку мусора.

Видео не передается напрямую MediaSource внутри, но SourceBuffer,один MeidaSource Есть один и более в SourceBuffer。каждый со своим содержаниемтипассоциация,возможныйдавидео、Аудио、видеои Аудиождать。

Введение в HTTP-FLV

Понятное веб-окружение да Как воспроизводить потоковые медиа,Теперь давайте посмотрим на медиа-соглашение о прямой трансляции TikTok. Откройте инструменты разработчика и панель сети.,Как показано ниже.

можно найти Доуин в прямом эфиреиспользоватьизда HTTP-FLV Согласен, на самом деле, вы можете узнать Доуина, даже не смотря его. HTTP-FLV, потому что его используют все отечественные платформы прямого вещания. HTTP-FLV! Поэтому отечественная инфраструктура прямого вещания очень важна для HTTP-FLV Поддержка относительно хорошая. Но за границей HTTP-FLV Им почти никто не пользуется. Самые популярные за рубежом – изда. HLS и DASH протокол.

FLV (полное имя Flash Video) — формат потокового мультимедиа, разработанный Adobe разработанный компанией и 2003 Выпущен в году. Он кажется эффективным и решает проблему загрузки и воспроизведения файлов в Интернете, и на тот момент он имел практическое значение. Web Стандарты потокового мультимедиа, очень многие медиа-платформы-испоток используются для трансляции видео.

нода С технологиейизпрогресс, HTML5 из Video элемент, заменен Flash Воспроизведение видео, в настоящее время Flash технология была заброшена, и основные платформы потокового мультимедиа также перешли на HLS или DASH технология достижения Web Стриминг. Хотя Flash Устарело, за рубежом FLV Его почти никто не использует, но в Китае от него не отказались. Вместо этого он широко используется в сценариях прямых трансляций внутри страны, так что я понимаю. FLV-форматвозвращатьсяда Очень необходимоиз。

быть в Web притяжение окружающей среды flv Прямая трансляция, не может быть использована XHR, необходим для использования fetch API Иди, чтобы тянуть поток, потому что HTTP-FLV будет использоваться HTTP/1.1 из chunked transfer encoding Функция потока для загрузки данных, клиента и сервера для установления HTTP После подключения соединение остается неразъединенным, и сервер постоянно отправляет клиенту потоковые данные в реальном времени, аналогично IM Средний и длинный опрос.

Используется следующее fetch Извлеките пример кода потока.

fetch('./a.flv')
    .then((res) => {        const reader = res.body.getReader()        const pump = async () => {            const data = await reader.read();            if (!data.done) pump();            
        }        pump()
    })

Возможно, вы слышали об этом WS-FLV, который используется WebSocket Иди и тяни FLV поток, по сравнению с HTTP-FLV Преимущества нет, поэтому я начал использовать его как можно чаще. HTTP-FLV. по моему мнению WS-FLV Совместимость только с функцией IE 11 браузер, потому что IE 11 не поддерживается fetch из, и IE Принесите свой собственный MSStream Есть много проблем снова. В настоящее время мы можем только использовать. WebSocket Иди и тянипоток。

FLV-формат

Давайте посмотрим дальше повнимательнее FLV Формат файла, Состав FLV-форматизированного файла относительно прост. Весь файл состоит из одного Заголовка. файлаиодин Тело файлакомпозиция,Тело Файлада состоит из Этикетки.

Заголовок FLV-файла

FLV Автор: 9 байтиз Заголовок начало файла,Заголовок Структура FLV-файла представлена ​​в таблице ниже.

Тело FLV-файла

Заголовок FLV-файлапосле Да Тело файла,Тело файлот предыдущего Размер FLV-тега FLV Цикл этикетки составлен, как показано в таблице ниже.

Необходимо обратить внимание на,Размер FLV-тегада Этикеткаперед этимиз Размер FLV-тега, размер первого тега для первого тега 0。

общий 3 Вроде FLV-тег, FLV-тег показаны в таблице ниже.

Структура поля, созданная в теге FLV, отличается для типа тега, а поле данных для аудиотега отличается. AUDIODATA,видео Этикеткадля VIDEODATA,Скриптданные Этикеткадля SCRIPTDATAOBJECT。

Аудиотег FLV

Структура Аудио FLV-тегданные Поле показана в таблице ниже.

Для часто используемых AAC кодированиеиз Аудиоданные,FLV Спецификация также определяет AACAUDIODATA Структура данных показана в таблице ниже.

Тег FLV-видео

Структура видео FLV-тегданные Поле представлена ​​в таблице ниже.

Идентификатор кодировки в целомдля 7 выражать AVC кодирование, официальная спецификация нет поддерживается HEVC кодированиеиз, но сейчас HEVC кодирование становится все более популярным, поэтому сообщество обычно обращается к Идентификатору. кодировки 12 Определение для HEVC кодирование。

AVCVIDEOPACKET выражать AVC видеоданная структура, ее структура показана в таблице ниже.

о AVCDecoderConfigurationRecord структура данных, пожалуйста, просмотрите ISO 14496-15 из Нет. 5.2.4.1 глава.

Тег данных FLV

FLV видео Юаньданныехранится в Тег данных Внутри FLV-файла,Его структура представлена ​​в таблице ниже.

SCRIPTDATAOBJECT описыватьизэтообъект,Состоит из пары ключейценить,Структура показана в таблице ниже.

ключиценитьизданные Структура показана в таблице ниже.

FLV Метаинформация файла обычно размещается в onMetaData В Поле анализ завершен Тег данных FLV вернет следующий объект.

interface FLVScriptData {
    onMetaData?: {
        duration?: number;
        width?: number;
        height?: number;
        videodatarate?: number;
        framerate?: number;
        videocodecid?: number;
        audiosamplerate?: number;
        audiosamplesize?: number;
        stereo?: boolean;
        audiocodecid?: number;
        filesize?: number;
    }
}

onMetaData объектиз Поле означает следующее.

• duration Общая продолжительность давидеоиз, в да секунд.
• width ширина давидеоиз в пикселях.
• height давидеоиз высоты,Единица измерения — пиксель.
• videodatarate давидеоиз кодовая скорость, ед. да kb в секунду.
• framerate давидеоиз частоты кадров.
• videocodecid давидеоиз Идентификатор кодировки,такой же Тег FLV-видеосерединаиз Идентификатор кодировки。
• audiosamplerate да Аудиоиз частота дискретизации.
• audiosamplesize да Аудиоиз немного глубокомысленно.
• stereo выражатьданетдлястерео。
• audiocodecid да Аудиоиз Идентификатор кодировки,такой же Аудиотег FLVсерединаиз Идентификатор кодировки。
• filesize да размер файла, единица дабайт

Формат FMP4

MP4 Думаю, все слышали о формате MP4. или сказал MPEG-4 Нет. 14 Часть стандарта цифрового мультимедийного контейнера Формат, который определен в ISO 14496-14 в, да от appleiz QuickTime формат видеоразвился（также Даобщий для насиз .mov формат видео）。

FMP4 да fragmented MP4 из аббревиатуры FMP4 больше подходит для потоковой передачи мультимедиа.,Их различия заключаются в следующем.

Это обычный MP4 файл, вы можете видеть, что он имеет большой mdat （настоящий фильмданные）box,всевидео Юаньинформацияхранится в moov коробочка, в которой хранятся все звуки mdat коробка, так что mp4 Формат не подходит для потоковой передачи.

Да fragmented MP4 из Скриншота, это автор ISO BMFF Инициализировать осколки（ftyp за которым следует одно поле с названием фильма moov）,плюсодининдивидуальный moof и mdat Ящик состоит из фрагментов, а его метаинформация рассредоточена по отдельным ящикам. moof и mdat Коробкасередина,Загружайте только те части, которые необходимо отображать одновременно,Чем-то похоже на интерфейс с каскадным потоком страниц и зданной загрузкой.

потому чтодля MP4 соотношение форматов FLV Здесь много сложностей, а место здесь ограничено, поэтому я не буду вдаваться в подробности. Желающие могут пойти и посмотреть. ISO 14496-12。

формат видео

Причина, по которой это введено выше Формат FMP4дапотому чтодля MSE API Не во всех форматах видео поддерживается (например, вышепредставляетиз flv, или обычный из mp4 Формат не будет поддерживаться) В зависимости от браузера он может поддерживаться в формате видео тоже другое, но да Формат FMP4 поддерживается всеми браузерами, дополнительную информацию можно посмотреть здесь. ISO BMFF Byte Stream Format。

вышепредставляет из FLV, MP4, FMP4, MOV Это все инкапсуляционный формат давидео, они похожи на ящик для хранения реального видеопотокданного звука.

такбыть в Браузер Играйте в flv Прямая трансляция также должна быть flv формат видео Конвертировать в fmp4 формат видео。в соответствии свышепредставлятьиз flv пара форматов файлов flv Для анализа эту операцию обычно называют декапсуляцией (демультиплексированием). После анализа звукового видео и других информационных данных оно затем инкапсулируется (ремультиплексирование) в файл. fmp4 формат видео, наконец-то дай его MSE API играть.

Как показано на рисунке выше, нам нужно FLV-формат конвертируется в Формат FMP4,Среди них неизменным остается звуковой видеопоток.,Эту операцию также называют инкапсуляцией передачи.

Общий процесс воспроизведения

Затем в Web Играйте в HTTP-FLV прямая трансляцияпотокизобщийпоток Процесс заключается в следующем。

1. Первое использование fetch Иди и тяни flv Прямая трансляция.
2. использовать HTTP/1.1 из chunked transfer encoding Функция загрузки видео в стиле потокового вещания chunk фрагмент.
3. использовать FlvDemuxer Потоковая декапсуляция flv видеопоток。
4. Исправьте видеопоток и сделайте синхронизацию звука с видео. (Некоторые звуки видеопоток могут иметь проблемы)
5. использовать FMP4Remuxer Инкапсулировать видеопоток в Формат FMP4。
6. Наконец, он будет упакован FMP4 Фрагмент данных передан MSE Играть.

выше FlvDemuxer и FMP4Remuxer Код необходимо соблюдать самостоятельно flv и fmp4 Формат файла записан в flv Метаинформация каждого кадра из Аудио и видео декодируется, а затем инкапсулируется в fmp4 Формат.

Подвести итог

В этой статье объясняются технические принципы Douyin Live Broadcasting. HTTP-FLV Приходите и играйте в прямом эфире, не только в TikTok. HTTP-FLV План прямой трансляции, почти все отечественные платформы прямой трансляции доступны для использования. HTTP-FLV план, поэтому после прочтения этой статьи он эквивалентен всем отечественным платформам по принципу прямой трансляции технологии прямого вещания. Однако каждая платформа будет HTTP-FLV В общем, добавляйте что-нибудь свое.,НапримерDouyu Live также использует технологию P2P для экономии трафика сервера.。по сравнению си Используйте то же самое для других платформпрямая трансляцияпланиз Доуин в прямом эфире,Принцип воспроизведения короткого видео Douyin на самом деле более интересен.,В следующий раз я поделюсь техническими принципами короткого видео Douyin.