Подробное объяснение идей по реализации функции прямой трансляции видео в HTML5.

Не так давно я нашел время, чтобы провести небольшое исследование популярной в настоящее время прямой трансляции видео, понять общий процесс ее реализации и изучить возможность прямой трансляции на мобильном HTML5.

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

HTTP Live Streaming (сокращенно HLS) — это протокол потоковой передачи видео на основе HTTP, реализованный Apple. Все версии QuickTime и Safari в Mac OS и Safari в iOS хорошо поддерживают HLS. В более поздних версиях Android также добавлена ​​поддержка HLS. Некоторые распространенные клиенты, такие как MPlayerX и VLC, также поддерживают протокол HLS.

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

Кодирование: кодируйте изображения в формате H.263, кодируйте звуки в MP3 или HE-AAC и, наконец, упаковывайте их в контейнеры MPEG-2 TS (Transport Stream). Разделение: разрезайте закодированные файлы TS на равные длины. Небольшой файл с суффиксом; ts и генерирует обычный текстовый индексный файл .m3u8, браузер использует файлы m3u8; m3u8 очень похож на формат списка аудио m3u. Вы можете просто думать о m3u8 как о списке воспроизведения, содержащем несколько файлов ts. Игрок воспроизводит их один за другим по порядку, а затем запрашивает файл m3u8 после воспроизведения их всех и получает список воспроизведения, содержащий последний файл ts, для продолжения воспроизведения, и цикл начинается снова. Весь процесс прямой трансляции основан на постоянно обновляемом файле m3u8, и множество небольших файлов ts m3u8 должны обновляться динамически, и ts может проходить через CDN. Типичный формат файла m3u8 выглядит следующим образом:

 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111gear2/prog_index.m3u8#EXT-X -STREAM -INF:ID-ПРОГРАММЫ=1, ПРОПУСКНОСТЬ=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, ПРОПУСКНОСТЬ=737777gear4/prog_index.m3u8

Видно, что суть протокола HLS по-прежнему заключается в одном HTTP-запросе/ответе, поэтому он обладает хорошей адаптивностью и не подвержен влиянию межсетевых экранов. Но у него есть и фатальная слабость: задержка очень очевидна. Если каждый ts разделен на 5 секунд и один m3u8 содержит 6 ts-индексов, это приведет к задержке не менее 30 секунд. Если уменьшить длину каждого ts и уменьшить количество индексов в m3u8, задержка действительно уменьшится, но это вызовет более частую буферизацию и нагрузка запросов на сервер также увеличится в геометрической прогрессии. Поэтому найти компромиссную точку мы можем только исходя из реальной ситуации.

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

 <video src=./bipbopall.m3u8″ height=300″ width=400″ preload=auto autoplay=autoplay loop=loop webkit-playsinline=true></video>

Примечание. HLS поддерживает только браузер Safari на ПК, аналогично браузеру Chrome, использующему видео HTML5.

Тег не может воспроизводить формат m3u8. Вы можете напрямую использовать некоторые относительно зрелые решения в Интернете, такие как Seise-Player, MediaElement, videojs-contrib-hls и jwplayer.

Протокол обмена сообщениями в реальном времени (сокращенно RTMP) — это набор протоколов прямой трансляции видео, разработанный Macromedia и теперь принадлежащий Adobe. Это решение требует создания специализированной службы потоковой передачи RTMP, такой как Adobe Media Server, и для реализации проигрывателя в браузере можно использовать только Flash. Его производительность в реальном времени очень хорошая, а задержка очень мала, но его недостатком является то, что он не поддерживает воспроизведение мобильных WEB-файлов.

Хотя его нельзя воспроизвести на странице H5 iOS, вы можете написать собственное декодирование и анализ для собственных приложений iOS. RTMP имеет низкую задержку и хорошую производительность в реальном времени. Сторона браузера, видео HTML5

Тег не может воспроизводить видео по протоколу RTMP, чего можно добиться с помощью video.js.

 <link href=http://vjs.zencdn.net/5.8.8/video-js.css rel=stylesheet><video id=example_video_1″ class=video-js элементы управления vjs-default-skin preload=auto width=640 height=264 цикл=цикл webkit-playsinline><source src=rtmp://10.14.221.17:1935/rtmplive/home type='rtmp/flv '></video><script src=http://vjs.zencdn.net/5.8.8/video.js>< /script><script>videojs.options.flash.swf = 'video.swf ';videojs('example_video_1').ready(function() {this.play();});</script>

В настоящее время в форматах отображения прямых трансляций обычно преобладают такие страницы, как YY Live и Yingke Live. Вы можете видеть, что их структуру можно разделить на три уровня:

① Слой фонового видео.

② Модуль подписки и комментариев

③ Нравится анимация

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

① Фон видео внизу использует тег видео для воспроизведения.

② Модуль подписки и комментариев использует WebScoket для отправки и получения новых сообщений в режиме реального времени через DOM и CSS3.

③ Ставьте лайк и используйте анимацию CSS3.

Разобравшись с форматом прямой трансляции, давайте разберемся с процессом прямой трансляции в целом.

Общий процесс прямой трансляции можно условно разделить на:

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

Сервер потокового видео в реальном времени. Сервер Nginx собирает видеопоток (кодировка H264/ACC), передаваемый со стороны видеозаписи, анализирует и кодирует его на стороне сервера и передает видеопоток в формате RTMP/HLS на сторону воспроизведения видео.

Видеоплеер: это может быть плеер на компьютере (QuickTime Player, VLC), родной плеер на мобильном телефоне или видеотег H5 и т. д. На данный момент основным является родной плеер на мобильном телефоне.

(Группа обмена веб-интерфейсом обучения: 328058344. Общение запрещено. Если вам не интересно, пожалуйста, не входите!)

Для записи видео H5 вы можете использовать мощную технологию webRTC (Web Real-Time Communication), которая поддерживает веб-браузеры для голосовых разговоров или видеоразговоров в реальном времени. Недостаток заключается в том, что она хорошо поддерживается только в Chrome на ПК. и не очень хорошо на мобильных устройствах.

Базовый процесс записи видео с использованием webRTC

① Вызов window.navigator.webkitGetUserMedia().

Получите видеоданные с камеры ПК пользователя.

② Преобразуйте полученные данные видеопотока в window.webkitRTCPeerConnection.

(формат данных потокового видео).

③ Используйте WebScoket

Передача данных потокового видео на сервер.

Уведомление:

Хотя Google продвигает WebRTC и появилось много зрелых продуктов, большинство мобильных браузеров пока не поддерживают webRTC (последняя iOS 10.0 его не поддерживает), поэтому реальная запись видео по-прежнему зависит от клиента (iOS, Android), эффект будет лучше.

Поддержка WebRTC

Поддержка WebRTC

Родное приложение iOS вызывает камеру для записи видео процесса

① Для сбора аудио и видео исходный поток аудио и видео данных можно собрать с помощью AVCaptureSession и AVCaptureDevice.

② Кодирование H264 для видео и AAC для аудио. В iOS имеются инкапсулированные библиотеки кодирования (кодирование x264, кодирование faac, кодирование ffmpeg) для кодирования аудио и видео.

③ Соберите закодированные аудио- и видеоданные в пакеты.

④ Установите RTMP-соединение и передайте его на сервер.

5. Постройте Нг

Установите nginx, модуль nginx-rtmp.

① Сначала клонируйте проект nginx локально:

заваривать кран доморощенного/nginx

② Запустите и установите модуль nginx-rtmp.

заварить установку nginx-full –with-rtmp-module

2. Конфигурационный файл nginx.conf, настройте RTMP и HLS.

Найдите файл конфигурации nginx.conf (путь/usr/local/etc/nginx/nginx.conf) и настройте RTMP и HLS.

① Добавьте содержимое конфигурации rtmp перед узлом http:

② Добавьте конфигурацию hls в http.

Перезапустите службу nginx, введите http://localhost:8080 в браузере и проверьте, появляется ли интерфейс приветствия, подтверждающий успешный перезапуск nginx.

nginx -s перезагрузить

Когда сервер получает видеопоток, передаваемый со стороны видеозаписи, ему необходимо проанализировать и закодировать его и передать видеопоток формата RTMP/HLS в видеоплеер. Часто используемые решения для библиотек общего кодирования, такие как кодирование x264, кодирование faac, кодирование ffmpeg и т. д. Поскольку инструмент FFmpeg объединяет несколько кодировок аудио и видео форматов, мы можем отдать приоритет использованию FFmpeg для преобразования форматов, кодирования и потоковой передачи.

1. Установите инструмент FFmpeg.

заварить установку ffmpeg

2. Нажмите файлы MP4.

Адрес видеофайла:/Users/gao/Desktop/video/test.mp4

Адреса потоковой передачи push и pull: rtmp://localhost:1935/rtmplive/home, rtmp://localhost:1935/rtmplive/home.

 //поток протокола RTMP ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//поток протокола HLS ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

Уведомление:

После отправки потока мы можем установить VLC и ffplay (видеоплеер, поддерживающий протокол rtmp), чтобы загрузить поток локально для демонстрации.

① Видеофайлы для прямой трансляции

 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101: 1935/hls/testffmpeg-re-i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② Нажмите потоковую камеру + рабочий стол + запись с микрофона для прямой трансляции

 ffmpeg -f avfoundation -framerate 30 -i 1:0″ /-f avfoundation -framerate 30 -video_size 640x480 -i 0 /-c:v libx264 -preset ultrafast /-filter_complex 'overlay=main_w-overlay_w-10:main_h-overlay_h -10' -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

Дополнительные команды см. в разделе:

Полный список команд FFmpeg для обработки потокового мультимедиа RTMP

Часто используемые команды потоковой передачи FFmpeg

Мобильные терминалы iOS и Android естественным образом поддерживают протокол HLS. После завершения сбора видео и завершения службы отправки потокового видео вы можете напрямую настроить тег видео на странице H5 для воспроизведения живого видео.

 <элементы управления видео preload=auto autoplay=autoplay loop=loop webkit-playsinline><source src=http://10.14.221.8/hls/test.m3u8″ type=application/vnd.apple.mpegurl /><p class=warning >Ваш браузер не поддерживает видео HTML5.</p></video>

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

① Ограничением H5 HLS должна быть кодировка H264+AAC.

② Проблема с воспроизведением H5 HLS застряла. Серверная часть может реализовать стратегию фрагментации, поместить ts-файлы в CDN, а внешний интерфейс может попытаться реализовать DNS-кеширование и т. д.

③ Чтобы добиться лучшего взаимодействия в реальном времени, прямая трансляция H5 также может использовать протокол RTMP и реализовывать воспроизведение через video.js.

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