H5 Живая Starter (теория раздела)

Эта статья воспроизводится в: Ape 2048 Сайт ➻ https://www.mk2048.com/blog/blog.php?id=i1kia0h2bb

предисловие

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

фон

Это можно увидеть в прямом эфире с ПК на мобильный терминал был разработан, чтобы все большее число жить класса App на линии при пролете в беспрецедентной вспышки живой сцены, но для большинства мобильных вещания, что должно было быть достигнуто для того, чтобы Native Client в основном, но H5 конец мобильного вещания также несет незаменимую роль, например, H5 распространился быстро и легко выпуск преимуществ, в то время как наиболее важным является H5 может также играть видео в реальном времени.

Живая 2016 это первый год, первый, так как основные провайдеры широкополосного доступа соответствуют общественное мнение расширяющегося цены, а во-вторых, большой приток капитала в вещательном секторе, а также содействовать итерационный технологии обновления. Рынок, наиболее часто используемый является введением протокола Apple, HLS вещания (H5 оригинального воспроизведение поддержки), конечно же, RTMP, HTTP-FLV, RTP и так далее.

Текущие видео форматы файлов и протоколы

Форматы видео файлов

Видео форматы файлов факт, мы часто упоминается как формат контейнера, то есть, мы часто говорили о больше всего в жизни в общем формате, FLV, MP4, формат Ogg. Следует понимать, что конкретный поток битов в поле в определенном порядке. Это использует различные форматы для установки видео Есть проблема?

Ответ нет, нет проблем, но вы должны знать, как открыть коробку и найти соответствующий декодер для декодирования. Если вы сделаете это, то в соответствии с этим, для этих mp4, О, WebM видео форматов и так далее, до тех пор, как у меня есть этот соответствующий декодер и проигрыватель, то нет никаких проблем. Затем битовый поток видео в коробку внутри, где определенный период, если есть проблема, то окончательный сгенерированный файл является фактически непригодным для использования, так как сама коробка является проблематичной.

Однако, есть недоразумение из первых мест, которые я только понимаемыми как статический видеопоток. Представьте себе, если видео требует непрерывного воспроизведения, например, живой, в прямом эфире и так далее. Здесь мы взяли поток TS / PS, чтобы объяснить.

• PS (Program Stream): Статический файл поток

• TS (Transport Stream): Динамический файловый поток

Формат Контейнер направлен на выше двух, по сути, битовый поток видеоданных выполнен из другого процесса.

• PS: Полное видео немного сослан в поле, фиксированный файл, созданный
• TS: полученное видео, разделены на разные коробки. Наконец генерируется файл с несколькими ящиками.

Тогда результат, если один или несколько ящиков поврежден, формат PS не может смотреть, но TS будет просто пропускать кадры или эффект мозаики. Конкретное различие между ними состоит в следующем: чем выше отказоустойчивость для видео, он будет выбирать TS, тем ниже скорость отказоустойчивой видео, будет выбирать PS.

Живой протокол HLS

HTTP Live Streaming (называемый HLS) представляет собой протокол на основе HTTP потокового видео. Это живой потоковый протокол, предложенный Apple. В настоящее время, IOS и Android версия будет поддерживать высокую HLS. HLS что это? HLS два основных содержание .m3u8 ts-файл и воспроизвести файл.

Протокол HLS основан на HTTP, и сервер, обеспечивающий HLS нужно сделать две вещи:

Кодирование: В изображении кодирования формата H.263 в MP3 или кодировании звук HE-AAC, в конце концов упаковано в TS MPEG-2 (транспортный поток), контейнер;

Сегментация: TS закодирован файл до тех пор, как хороший разрезать на небольшие файлы суффикс ц, и генерирует простой текст индексный файл .m3u8;

Браузер с помощью файла m3u8. m3u8 со списком аудио форматов, таких как m3u, вы можете просто думать m3u8 будет включать несколько плейлистов тс файлы. Игрок-на-плеер в порядке, все сделано, а затем посмотреть m3u8 запрос файла для получения списка воспроизведения содержит последние файлы TS продолжают играть снова и снова. Весь процесс должен опираться на живую постоянно обновляется m3u8 ц и кучей мелких файлов, m3u8 должны быть динамически обновляться, TS может идти CDN.

Здесь мы выделим о процессе клиента. Прежде всего, причина транслируется в прямом эфире, что его содержание обновляется в режиме реального времени. HLS, что как полное это?

Мы используем HLS могут быть непосредственно включены в видео:

<video autoplay controls>
    <source src="xxx.m3u8" type="application/vnd.apple.mpegurl" />
    <p class="warning">Your browser doesn't support video</p>
</video>

Согласно приведенному выше описанию, это на самом деле файл индекса запроса о .m3u8. Этот файл содержит описание соответствующего .ts файла, например:

Однако, это лишь очень простой, он не связан с какой-либо из функций живого потока. На самом деле, HLS вся архитектура может быть разделена на:

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

При заполнении мастера список воспроизведение URL, то пользователь будет загружать только один раз мастер воспроизведение. Затем игроки решают, какой список воспроизведения медиа (то есть, к югу m3u8 файл) на основе текущей среды. Если при воспроизведении, состояние воспроизведения пользователя изменяется, игрок будет переключить соответствующий список воспроизведения медиа.

Конечно, функция поддержки HLS, а не только порезать игрок (в частности, относится и к жизни), она также включает в себя другую надлежащей функции.

• Ts шифрование файлов с помощью HTTPS

• Быстрая / перемотка назад

• вставки объявлений

• Различные переключения разрешения видео

Вы можете увидеть протокол HLS, по существу, еще один из запроса HTTP / ответ, адаптивности так хорошо, брандмауэр не будет затронут. Но он также имеет фатальную слабость: явление задержки очень очевидно. Если каждые 5 секунд тс в соответствии с сегментацией, ТС 6 индекса m3u8 пут, приведет, по крайней мере задержку 30 секунд. Если уменьшить длину каждого ц, и уменьшить число индекса m3u8 ЗАДЕРЖЕК действительно уменьшает, но приведет к более частой буферизации, давление на стороне службы запроса будет удвоено. Вы можете только найти компромиссную точку в соответствии с реальной ситуацией.

Примечание: HLS поддержка сафари браузер только на стороне ПК, похожий на хром браузера с помощью HTML5 тег видео не может воспроизводить формат m3u8, могут быть использованы непосредственно в Интернете некоторые из более зрелых программ, таких как: sewise-плеер, MediaElement, videojs-вно-HLS, jwplayer ,

Живой протокол RTMP

Real Time Messaging Protocol (далее RTMP) является Macromedia разработала набор протоколов видео вещания, в настоящее время принадлежит компании Adobe. И то же самое может быть применено к ЗОЖ видео в реальном времени, различие основано на RTMP вспышка не может быть воспроизведен в браузере IOS, но производительность в реальном времени лучше, чем ЗОЖ. Таким образом, общее использование этого протокола, чтобы загрузить видео поток, видео поток, который проталкивается к серверу.

Ниже приводится сравнение HLS и RTMP:

Живой протокол HTTP-FLV

RTMP и HTTP-FLV похоже, распространяют потоковое для живых видео форматов в FLV сделать. Тем не менее, два имеют большое значение.

• Прямой запуск долго соединение, загрузить соответствующие файлы FLV
• Простая информация заголовка

В настоящее время доступны на рынке, чаще всего используется воспроизведение HTTP-FLV. Тем не менее, с конца телефона не поддерживается, поэтому, Н5 HTTP-FLV также больное место. Теперь, однако, flv.js может помочь высокую версию браузера для разбора через MediaSource. HTTP-FLV также очень прост в использовании. И HLS, как вы можете просто добавить соединение:

<object type="application/x-shockwave-flash" src="xxx.flv"></object>

Живите базовую архитектуру

В настоящее время живут более зрелый продукт, как правило, основаны на H5 и стороне сервера и Native (Android, IOS) достигается с живой, эта процедура в основном на следующем рисунке:

Полная трансляцию можно разделить на следующие куски:

• Видео конец записи: в основном аудио и видео устройства ввода или мобильный телефон на стороне камеры или микрофона на компьютере, на основе мобильного терминала в настоящее время мобильное видео.

• Видео стороны воспроизведения: можно воспроизводить на компьютере, мобильный телефон на стороне Native игрок, есть H5 видео этикеток, до сих пор конец телефона был основным игроком Native.

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

В настоящее время H5 похожа живая страница, достичь мало технических трудностей, которые могут быть разделены по реализации: ① в нижней части видео фон тега видео с видеоплеер для достижения ② беспокойства, комментарий модуль использует WebScoket новых сообщений, отправленных и полученный в режиме реального времени через DOM и CSS3 ③ достичь превью использовать CSS3 анимации

Для заграждения, это немного сложнее, возможно, необходимо сосредоточить внимание на следующие моменты:

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

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

• Обнаружение столкновений и анимация (то есть, не перекрывает друг друга заграждения) или тому подобное во время рендеринга заграждения

H5 в прямом эфире программы

Используйте flv.js живут

• Краткое введение

flv.js является проектом с открытым кодом от Bilibli. Он разбирает файл FLV подается в нативные тег воспроизведения аудио и видео данных HTML5 видео, браузер без помощи FLV Flash-плеера возможно.

• превосходство

Поскольку браузер на родном лейбле видео использует аппаратное ускорение, хорошая производительность, поддержка высокой четкости. Поддерживает как приклеенный и жить. Избавиться от зависимости от Flash.

• Браузер зависит

flv.js полагаться на функции браузера Список совместимости

1, HTML5 видео

2, Media Source Extensions

3, WebSocket

4, HTTP FLV: принести 或 поток

• принцип

flv.js сделать только одну вещь, после получения аудио- и видеоданных в формате FLV нативным JS FLV декодировать данные, а затем подается на родной HTML5 тег видео с помощью Media Source Extensions API. (HTML5 поддерживает только родное воспроизведение mp4 / формат WebM не поддерживает FLV)

Почему flv.js периметра, получить преобразование FLV с сервера, а затем декодируются и затем подаются видео ярлыка это? По следующим причинам:

1, совместимо с текущей живой программой: Большинство программ жить аудио и видео услуги, используя формат контейнера FLV для передачи аудио и видео данных.

2, формат контейнера FLV формат MP4 по сравнению с более простым, более быстрым и удобным, чтобы решить их.

• Совместимые решения

конец PC

1, предпочтительно с использованием HTTP-FLV, потому что это небольшая задержка, производительность не плохо 1080P очень гладко.

2, на использование вспышки не поддерживает flv.js игрока RTMP потоковое вещание. Совместимость с флэш-очень хорошая, но разница в производительности отключена по умолчанию многих браузеров.

3, не хотите использовать флэш-совместимый HLS также может быть использован, но сторона PC только Safari поддерживает HLS

Мобильный конец

1, предпочтительно с использованием HTTP-FLV, потому что это небольшая задержка, вспомогательное оборудование запуска производительности flv.js HTTP-FLV достаточно.

2, не поддерживает flv.js по использованию СВУ, но HLS задерживать очень большой.

3, HLS не поддерживает он не может жить, так как мобильный терминал не поддерживает Flash.

Ну, в конце концов, въездные теоретические статьи, последующий, если есть опыт, я буду обновлять чтение чувства сейчас, чем сердце ~