Введение
Прежде всего, эта статья представляет собой концепцию + практику. Она будет полезна для тех, кто хочет понять и попрактиковаться в простой веб-функции веб-камеры в прямом эфире. Из-за ограниченного места и глубины практики демонстрационный эффект в настоящее время поддерживает только прямую трансляцию на компьютер и широко используемые камеры.Для потоковой передачи видео в реальном времени другие сложные функции (такие как обработка видеоинформации в реальном времени, высокая степень параллелизма, сетевое распространение и т. д.) еще не реализованы и нуждаются в дальнейшем изучении.
текст
Ниже приводится объяснение по одному в соответствии со схемой каталога.
1. Внедрение технологии прямых трансляций
Технология прямого вещания охватывает широкий спектр технологий.В настоящее время люди широко знают, что технология прямого вещания используется в личных прямых трансляциях видео-сайтов, мобильных прямых трансляциях и мониторинге камер безопасности.
Ниже приведена концептуальная схема для представления каждой технической связи в процессе прямой трансляции. Можно понять, что он разделен на конец сбора, сервер потокового мультимедиа и конец воспроизведения; вам также необходимо понимать, что такое push-поток и что такое pull-поток.
- Окончание захвата: как следует из названия, это источник видео, и захват видео обычно получается с реальной камеры. Например, мобильные устройства, камеры ПК-устройств и некоторые устройства с камерами;
- Сервер потокового мультимедиа: Сервер потокового мультимедиа является очень важной частью всей технологии прямой трансляции.Он должен получать видеопоток, передаваемый со стороны захвата, а затем передавать видеопоток на конец воспроизведения;
- Конец воспроизведения: конец воспроизведения — это всевозможные приложения, проигрыватель на веб-странице, извлекает видеопоток на сервер потокового мультимедиа, затем перекодирует его и, наконец, воспроизводит;
- Push-поток: процесс инкапсуляции данных, собранных на этапе сбора, и их передача на сервер;
- Pull stream: на сервере уже есть контент в реальном времени и процесс его извлечения с указанного адреса.
Поскольку необходимо передавать и извлекать потоки, это должно включать передачу видеопотоков, поэтому далее представлены широко используемые протоколы передачи потокового мультимедиа. Обычно используемые протоколы потоковой передачи мультимедиа — RTMP, RTSP, HLS и HTTP-FLV.
-
RTMP (доступен для push и pull)
Протокол обмена сообщениями в реальном времени, протокол обмена сообщениями в реальном времени. В протоколе RTMP видео должно быть закодировано в H264, а аудио должно быть закодировано в AAC или MP3, и большинство из них упаковано в формат flv. Поскольку основная передача протокола RTMP представляет собой потоковые файлы формата FLV, для воспроизведения необходимо использовать флэш-плеер. -
RTSP (для окончания потоковой передачи)
Real-Time Stream Protocol, эффект реального времени RTSP очень хорош, подходит для видеочата, видеонаблюдения и других направлений. -
HLS (для вытяжного конца)
Http Live Streaming — протокол передачи потокового мультимедиа в реальном времени на основе HTTP, определенный Apple. Содержимое передачи состоит из двух частей: 1.файл описания M3U8 и 2.медиафайл TS. Видео в медиафайле TS должно быть закодировано в формате H264, а звук — в формате AAC или MP3. Данные передаются по протоколу HTTP. В настоящее время библиотека video.js поддерживает воспроизведение файлов в этом формате. -
HTTP-FLV (для окончания потоковой передачи)
Это протокол http+flv, который инкапсулирует аудио- и видеоданные в формат FLV, а затем передает их клиенту по протоколу http.Этот протокол значительно облегчает браузерному клиенту воспроизведение видеопотоков в реальном времени. На данный момент библиотека flv.js поддерживает воспроизведение файлов в этом формате.
С приведенными выше базовыми концепциями мы примерно знаем, что необходимо для создания страницы с функцией прямой трансляции.Ниже приведена реализация каждой части на основе этой архитектуры.
2. Технологии, используемые в фасадном строительстве
-
Создайте потоковый сервис
Когда дело доходит до серверов потокового мультимедиа, то, как фронтенд-разработчик, я поначалу был в растерянности, не знал, как это реализовать и на каком языке написать. Первое, что приходит на ум, это поиск существующих технологий реализации, чтобы увидеть, можно ли их реализовать через чистый интерфейс. Если вы используете только технологию JS, вы должны сначала подумать о node.js, поэтому вы используете ключевые слова «node.js + план реализации технологии потокового мультимедиа» для поиска и получаете более надежный результат: NodeMediaServer, а затем переходите к см. Введение обнаружил, что это сервер потокового мультимедиа с открытым исходным кодом на основе узла.Хотя последняя версия была рефакторинг с использованием go, все-таки он был разработан узлом в истории, поэтому я решил прочитать документацию и попробовать собрать такой сервер. . Пожалуйста, обратитесь кОфициальный сайт NodeMediaServer.
NodeMediaServer поддерживает: push stream по протоколу rtmp, rtsp, hls pull, поддержку http-flv, ws-flv для pull stream, то есть поддержку на стороне браузера использования http или websocket для передачи видеопотока формата flv для воспроизведения.
Начните создавать потоковый сервер:
- Загрузите соответствующий установочный пакет и используйте среду Linux.
скачать:
Распаковать:wget https://cdn.nodemedia.cn/nms/3.2.12/nms-linux-amd64-20200222.tar.gztar -zxvf nms-linux-amd64-20200222.tar.gz
Перейдите в распакованный каталог и выполните команду для запуска службы:
-
Введите в консоли
./nmsбегать -
Выполнить в текущем каталоге программы
sudo ./service.sh installУстановите сервис и запустите его автоматически -
Выполнить в текущем каталоге программы
sudo ./service.sh uninstallОстановите и удалите службу å -
После успешного запуска службы вы можете получить доступ к серверной системе службы потокового мультимедиа через порт 8000 (порт по умолчанию), который выглядит следующим образом:
Панель инструментов на домашней странице показывает использование процессора сервера и состояние пропускной способности сети.
- Загрузите соответствующий установочный пакет и используйте среду Linux.
-
После того, как служба запущена, следующее, что нужно сделать, это отправить поток
Как подтолкнуть поток? Это включает в себя очень мощную вещь, ffmpeg, программное обеспечение с открытым исходным кодом, которое можно использовать для записи, преобразования цифрового аудио и видео и преобразования его в поток.Он может захватывать и инкапсулировать видео в потоки и передавать их на серверы потокового мультимедиа. Например, после установки этого программного обеспечения на Mac вы можете вызвать камеру через него, а также инкапсулировать данные камеры в поток и отправить их на сервер потокового мультимедиа.Этот процесс является потоковым. ffmpeg также может передавать локальные видеофайлы на серверы потоковой передачи.
Используйте ffmpeg для передачи локальной камеры Mac на nodeMediaServer в режиме реального времени:
ffmpeg -f avfoundation -video_size 1280x720 -framerate 30 -i 0:0 -vcodec libx264 -preset veryfast -f flv http://ip:8000/live/stream.flvЗдесь задействован инструмент ffmpe.Вышеуказанные параметры не объясняются по одному, только самые важные:
-
·-vide_sizeУказывает размер разрешения видеоэкрана для вывода. -
-fСледующий параметр flv выражает формат вывода, за которым следует адресhttp://ip:8000/live/stream.flvУказывает адрес, который вы хотите вывести. Файл stream.flv этого адреса может быть изменен в соответствии с вашими потребностями. Просто оставьте суффикс в нужном вам формате flv.
Другим распространенным сценарием является прямое извлечение данных видеопотока с устройства камеры.Этот метод также поддерживается nodeMediaServer.Вам нужно только настроить информацию о конфигурации соответствующей камеры в фоновом режиме управления, а затем можно выполнить операцию потоковой передачи. Эта информация о конфигурации включает в себя IP-адрес, имя пользователя и пароль для входа в систему и т. д. Интерфейс конфигурации выглядит следующим образом:
Конфигурация по умолчанию:
Вы также можете настроить конфигурацию параметров.Если вы используете пользовательскую камеру с функцией передачи rtsp, вы можете использовать западный метод конфигурации для настройки информации о камере и указания адреса выходного потока, чтобы вы могли играть прямо из браузера. видео через этот адрес выходного потока:
-
-
Интерфейсная страница поддерживает воспроизведение видеопотока
Что касается части страницы внешнего интерфейса, основная цель - найти внешний проигрыватель, поддерживающий форматы протоколов http-flv и ws-flv.Во-первых, я просмотрел прямую трансляцию станции B и обнаружил, что их страница прямой трансляции была с помощью тега видео.Использует собственную библиотеку flv.js с открытым исходным кодом, представляющую собой проигрыватель, поддерживающий воспроизведение видеопотоков в форматах http-flv и ws-flv на стороне браузера, что как раз и нужно для воспроизведения в прямом эфире видеопотоки.
С видеопотоком вы можете использовать flv.js для создания демо-страницы и увидеть фактический эффект.
3. Практические эффекты
-
Сначала получите push-поток:
Были проведены эксперименты по отправке данных видеопотока камеры непосредственно с Mac и привязке адресной информации устройства камеры, а также по выполнению услуг push и pull через nodeMediaServer.
-
Затем на странице интерфейса воспроизводится видеопоток. Ниже приведен основной код части проигрывателя:
live-demo.jsimport * as React from 'react'; import { Button, Input, Row, Col } from 'react-x-component'; import flv from 'flv.js'; const { useState, useEffect } = React; interface LiveDemoProps { defaultUrl?: string, onUrlChange?: Function } export default function LiveDemo({ defaultUrl = 'http://ip:8000/live/stream.flv', onUrlChange }: LiveDemoProps) { let player = null; let playerDom = null; const [liveUrl, setLiveUrl] = useState(defaultUrl); useEffect(() => { if (flv.isSupported) { player = flv.createPlayer({ type: 'flv', isLive: true, hasAudio: false, hasVideo: true, url: liveUrl, cors: true }, { enableWorker: false, lazyLoadMaxDuration: 3 * 60, seekType: 'range' }); player.attachMediaElement(playerDom); player.load(); } else { console.log('Your browser is not support flv.js'); } }, []); function updatePlayer() { if (player) { player.unload(); player.detachMediaElement(); player.destroy(); player = null; } player = flv.createPlayer({ type: 'flv', isLive: true, hasAudio: false, hasVideo: true, url: liveUrl, cors: true }, { enableWorker: false, lazyLoadMaxDuration: 3 * 60, seekType: 'range' }); player.attachMediaElement(playerDom); player.load(); } return ( <div className='live-demo'> <div className="modify-url"> <Row> <Col md={6}> <Input value={liveUrl} onChange={(value) => { setLiveUrl(value); }} /> </Col> <Col md={6}> <Button type={'primary'} onClick={() => { updatePlayer(); onUrlChange && onUrlChange(liveUrl); }} >修改</Button> </Col> </Row> </div> <video style={{ width: '100%', height: '100%' }} controls className='video-demo' ref={(e) => playerDom = e} ></video> </div> ); } -
Воспроизведите эффект видеопотока с камеры.Слева — поток данных камеры, полученный напрямую, а справа — экран камеры в реальном времени, нажимаемый компьютером Mac:
Хорошо, это завершает создание полного набора внешних и внутренних технических услуг, необходимых для живых веб-страниц!
4. Последующий контент, который необходимо продолжать практиковать и изучать
Приведенный выше пример относительно прост, он просто строит сервер потокового мультимедиа с помощью сторонних технологий и фреймворков, а фронтенд поддерживает страницу воспроизведения для проигрывания видеопотоков, и собирает данные через камеру, проталкивает поток, и проходит весь процесс.Формируется замкнутый цикл, но еще многое предстоит сделать:
- Видеоинформация обрабатывается в режиме реального времени, как добавить больше информации
- Как реализовать сценарий высокого параллелизма Реализация сервера потокового мультимедиа все еще слишком проста, и должен быть механизм обработки распределения.
- Производительность воспроизведения в браузере требует стресс-тестирования
Суммировать
Благодаря концептуальному изучению и введению в этой статье понимается общий процесс архитектуры распространенных технологий видеовещания в прямом эфире и быстро создается полный набор функций веб-страницы в прямом эфире на основе внешнего интерфейса.Конечно, есть еще много недостатков и областей, которые необходимо дальнейшее изучение. , если в будущем будет более подробное техническое осаждение, он будет продолжать формировать статьи для обмена!