Жить онлайн с нуля

Node.js Nginx Ubuntu прямая трансляция

Прощание с экономикой совместного потребления, возвестившей волну прямых трансляций. Как разработчик, я всегда хочу исследовать свою неизведанную территорию. Сегодня я научу вас, как создать службу потокового вещания SRS и службу Node.js. Служба Node.js запрашивает видеоданные у службы потокового вещания SRS, затем анализирует запрошенные данные и, наконец, помещает проанализированные данные в тег видео на странице html.

В этой статье речь пойдет о следующих аспектах:

  • Приобретите облачные сервисы и установите необходимую среду разработки на облачном хосте
  • Создание службы потокового видео SRS
  • Создайте службу Node.js для анализа данных видеопотока SRS
  • Решить проблему перекрестных доменных запросов в службе Node.js

Купить облачные сервисы

На рынке облачных вычислений существует множество вариантов услуг, таких как внутреннее облако XX и зарубежное облако XX. Во избежание подозрений, здесь не рекомендуется.УведомлениеВсе примеры, описанные в этой статье, относятся к системной среде Ubuntu, поэтому рекомендуется установить систему Ubuntu на облачный хост.

Ниже приведены инструменты для подключения различных терминалов к облачным сервисам:

  • Компьютер с системой Windows 1. Загрузите и установите клиентский инструмент Windows SSH и Telnet Putty.Скачать замазку2. Имя пользователя: root, Хост: 193.112.195.120 3. Следуйте подсказкам Putty, чтобы войти в систему.Справка по использованию пароля Putty

  • Компьютер с системой Linux/Mac OS X (логин с паролем) 1. Откройте клиент SSH (Mac может использовать терминал, поставляемый с системой) 2. Введите ssh -q -l root -p 22 193.112.195.120 3. Введите пароль экземпляра CVM для входа.

  • Компьютер с системой Linux/Mac OS X (вход с ключом) 1. Откройте клиент SSH (Mac может использовать терминал, который поставляется вместе с системой). 2. Найдите адрес локального хранилища файла ключа SSH, связанного с вашим облачным сервером. 3. Ваши ключи не должны быть общедоступны для работы SSH. Используйте эту команду: chmod 400 [путь к ключевому файлу]. 4. Введите команду: ssh [-i путь к файлу ключа] root@193.112.195.120.

Настройка среды разработки системы ubuntu

установить wget

Команда wget используется для загрузки файла с указанного URL-адреса.команда wget завершена.

Установите команду инструмента wget:

sudo apt-get update  
sudo apt-get install wget

install-wget.png

Проверьте, успешно ли установлен wget:

check-wget.png

Установите среду Node.js

Существует множество способов установить среду Node.js в системе Ubuntu, см.Разные способы установки Node.js под Ubuntu.本文将采用源码的方式：

  • Обновите систему и установите несколько пакетов Node.js.
sudo apt-get update
sudo apt-get install python gcc make g++

install-gcc.png

  • Получите исходный код Node.JS (версия v8.11.1)
sudo wget http://nodejs.org/dist/v8.11.1/node-v8.11.1.tar.gz
sudo tar zxvf node-v8.11.1.tar.gz

install-node.png

  • начать установку
cd node-v8.11.1
sudo ./configure
sudo make install

Проверьте установленную версию Node.js:node -v

check-node.png

Необходимо установить перед установкой nginxpcre

установить ПКР

  • Скачать исходный код pcre
sudo wget https://ftp.pcre.org/pub/pcre/pcre2-10.31.tar.gz
sudo tar zxvf pcre2-10.31.tar.gz

download-pcre.png

  • установить ПКР

настроить

cd pcre2-10.31
sudo ./configure

configure-pcre.png

компилировать

sudo make

make-pcre.png

Установить

sudo make install

install-pcre.png

Перед установкой nginx необходимо установить zlib.

установить zlib

sudo apt-get install zlib1g-dev

install-zlib.png

установить нгинкс

Есть много способов установить nginx, вы можете обратиться кУстановка и настройка Nginx в Ubuntu.

Здесь я буду использовать исходный метод установки для установки nginx.

Загрузите исходный код nginx и разархивируйте его. sudo wget http://nginx.org/download/nginx-1.12.2.tar.gz sudo tar zxvf nginx-1.12.2.tar.gz

download-nginx.png

настроить

sudo ./comfigure

configure-nginx.png

компилировать sudo make

make-nginx.png

Установить

sudo make install

install-nginx.png

**Примечание.**Иногда вам также необходимо установить некоторые пакеты nginx.

nginx-package.png

Выполните следующую команду, чтобы установить пакет nginx.

sudo apt-get install nginx-core
sudo apt-get install nginx-extras
sudo apt-get install nginx-full
sudo apt-get install nginx-light

настроить nginxФайл nginx.conf обычно находится в папке /etc/nginx/nginx.conf и редактируется командой vi.ви общие команды

Вот некоторые из наиболее распространенных команд vi:

  • открыть файл sudo vi xxxx

  • Введите режим редактирования файлаПосле открытия файла нажмите i (вставка появится внизу файла)

  • переключить режим файлаНажмите esc на основе предыдущего шага (вставка внизу файла исчезнет)

  • выходной файлНа основе предыдущего шага нажмите комбинацию клавиш ":" + "q" + "!" без сохранения и выхода На основе предыдущего шага нажмите комбинацию клавиш «:» + «w» + «q», чтобы сохранить и выйти.

Запустите службу nginxПорт по умолчанию для запуска nginx — 80.

Перед запуском можно определить занятость следующих портов:sudo lsof -i:80Если порт занят, вы можете использовать команду kill, чтобы убить процесс.

Файл запуска nginx обычно находится в папке /usr/local/nginx/sbin.Обычные команды службы nginx:

sudo nginx  //启动服务
sudo nginx -s stop //关闭服务
sudo nginx -s reload  //重启服务
sudo nginx -t -c /usr/local/nginx/conf/nginx.conf //检查nginx配置是否正确

Запустите FLV-сервис SRS в Ubuntu

SRSПозиционирование — это кластер серверов прямых интернет-трансляций на уровне оператора, обеспечивающий лучшую концептуальную целостность и простейший код реализации. SRS предоставляет различные услуги потокового видео, см. подробностиГитхаб документа SRS.

Общие протоколы прямых трансляций:

  • RTMP: нижний уровень основан на TCP и использует Flash на стороне браузера.
  • HTTP-FLV: на основе потокового ввода-вывода HTTP для передачи FLV, воспроизведение FLV зависит от поддержки браузера.
  • WebSocket-FLV: основан на WebSocket для передачи FLV, воспроизведение FLV зависит от поддержки браузера. WebSocket построен поверх HTTP, и HTTP-соединение должно быть установлено до того, как будет установлено соединение WebSocket.
  • HLS: Http Live Streaming, протокол потоковой передачи мультимедиа на основе HTTP от Apple. HTML5 можно напрямую открывать и воспроизводить.
  • RTP: на основе UDP, с задержкой в ​​1 секунду, не поддерживается браузерами.

Здесь я выбираю протокол http-flv, потому что структура, которую я выбираю для анализа видеопотока SRS,FLV-фреймворк Bibili, подробности см. в следующем разделе. Процесс развертывания службы потоковой передачи http-flv см.Пример развертывания SRS-HTTP-FLV:

  • получить srsgit clone https://github.com/ossrs/srs && cd srs/trunk
  • настроить srssudo ./configure && make
  • скомпилировать srssudo make
  • запустить службуsudo ./objs/srs -c conf/http.flv.live.conf

install-srs-flv.png

Программное обеспечение для прямых трансляций OBS

программное обеспечение ОБСБесплатное программное обеспечение с открытым исходным кодом для прямой трансляции и записи. Подробнее об использовании OBS см.Учебник Douyu OBS.

Вам нужно настроить путь потока на OBS: rtmp://ваш ip адрес/live, и имя потока.

configure-obs.png

Убедитесь, что FLV-поток успешно отправленВведите в браузере:http://118.89.247.129:8080/live/live.flv, если загруженное видео появляется, это означает, что OBS успешно передает службу потоковой передачи в службу SRS.

verification-flv.png

Фреймворк для парсинга прямых трансляций — flv.js

flv.js — проект с открытым исходным кодом от Bilibli. Он анализирует FLV-файлы и передает их собственным тегам HTML5 Video для воспроизведения аудио- и видеоданных, что позволяет браузерам воспроизводить FLV без Flash. Подробнее см.Используйте flv.js для прямых трансляций.

Я открыл свой собственный код для прямой трансляции, используя библиотеку flv.js на github. Код представляет собой сервис, созданный с использованием экспресс-фреймворка node.js.Если вы хотите запустить код на сервере Ubuntu, вам нужно немного знать node.js.

git clone https://github.com/spursy/live.git   // 克隆node.js代码

cd live   // 进入项目

npm install   //  安装项目必须的包

npm run dev // 启动项目

Обратите внимание, что вам необходимо изменить путь к источнику видео в live/view/index.html перед запуском проекта.

if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                "isLive": true,//<====加个这个 
                url: "http://bianchenggou.wang:8080/live/live.flv',//<==自行修改
                //url:"demo.flv"
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
            flv_start();
        }

Реализуйте потоковое видео FLV в прямом эфире

Изменить исключение

Когда программа запускает службу node.js и обращается к http://193.112.195.120:9000/, она не может получить видеопоток.Проверить исключение через горячую клавишу F12 браузера chrome:

exception.png

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

Здесь я использую разрешение междоменного доступа в конфигурации сервера nginx.междоменная конфигурация nginx.

При установке nginx файл nginx.conf помещается в папку **/usr/local/nginx/conf**. Использование файлов конфигурации nginx можно найти вУчебник по Nginx.

изменить, как показано ниже:

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # Logging Settings
        ##
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##
        gzip on;
        gzip_disable "msie6";

        ##
        # Access-Control
        ##
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Headers X-Requested-With;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;

        server {
                listen      80;
                server_name  bianchenggou.wang;

                location  /srs/ {
                        proxy_pass   http://127.0.0.1:8080/;
                }
                location / {
                        proxy_pass  http://127.0.0.1:9000/;
                }
        }
}

Поскольку nginx выполняет прокси-сервис для всех запросов, поэтомуПуть к источнику видео в live/view/index.htmlСледует изменить на:

if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                "isLive": true,//<====加个这个 
                url: "http://bianchenggou.wang/srs/live/live.flv',//<==自行修改
                //url:"demo.flv"
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
            flv_start();
        }

При повторном обращении к службе узла исключение больше не возникает.

node-server.png

Настоящее живое видео

Конфигурация программного обеспечения ABS Live Breadcast остается неизменным. После выталкивания живого потока в соответствии с руководством запустите службу Node.js и перейдите на страницу Live Broadcast:

living.png

Категории