obs+node-media-server+flv.js реализует запись и трансляцию

Node.js сервер JavaScript прямая трансляция

Реализовать идеи

  • Загрузите программу obs и запишите видео.
  • Запускаем сервис через node-media-server и проталкиваем поток на сервер в obs
  • Для достижения воспроизведения узла-медиа-сервера в узле-медиа-сервере в сочетании с видео тегом HTML5.

приступить к реализации

использование наблюдений

Пожалуйста, перейдите, чтобы загрузить obsОфициальный сайт, для загрузки доступны три платформенные версии windows, mac, linux Я использую здесь версию для Mac, другие версии должны быть похожими

  • Сначала вам нужно создать новую сцену
    新建场景.png
    Здесь можно использовать множество сценариев, я буду использовать захват экрана, чтобы продемонстрировать...
    新建场景.png
    Вы можете назвать сцену, я просто использую имя по умолчанию, нажмите «ОК».
    新建场景.png

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

缩放场景.png

  • push поток Суть видео фактически в вырезанной картинке.Нам нужно поместить эти картинки в одно место,а потом фронтенд сможет их прочитать с этого места и отобразить.Поэтому нам нужно перед этим открыть сервис.Получить исходный адрес видео в качестве внешнего интерфейса

служба запуска узла-медиа-сервера

  1. Создайте новую пустую папку и выполнитеnpm init, После ввода соответствующей информации по запросу загрузите node-media-server
npm install node-media-server --save
  1. Создайте новый файл записи index.js
const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};

var nms = new NodeMediaServer(config)
nms.run();
  1. а затем выполнить в командной строке
node index.js

Если вы видите следующее приглашение, это означает, что мы успешно запустили службу node-media-server.

开启服务.png

flv.js

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

  • Создайте новый файл index.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>直播</title>
</head>
<body>
   <script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
   <video id="videoElement" width="100%" controls></video>
   <script>
       if (flvjs.isSupported()) {
           var videoElement = document.getElementById('videoElement');
           var flvPlayer = flvjs.createPlayer({
               type: 'flv',
               url: 'http://localhost:8000/live/hello.flv'
           });
           flvPlayer.attachMediaElement(videoElement);
           flvPlayer.load();
           flvPlayer.play();
       }
   </script>
</body>
</html>

Здесь есть ямка, наверное из-за мака, видео по умолчанию не воспроизводится автоматически, и я не добавлял элементы управления в тег видео в начале, поэтому веб-страница всегда отображала статичную картинку, но я случайно обнаружил, что это было Видео приостановлено =_=!!

Можешь записать~

  • Нажмите настройки в obs, войдите на страницу настроек, нажмите на поток, если это локальная прямая трансляция, выберите пользовательский сервер потокового мультимедиа для типа потока, введите URL-адрес, как показано на рисунке, и введите имя параметра index.html для имени потока. Этот проектhello

Мы также можем играть на платформах прямых трансляций, таких как bilibili.Заполните здесь ссылку на прямую трансляцию и имя на bilibili.

image.png

  • Нажмите кнопку запуска obs
    image.png

В это время дважды щелкните, чтобы открыть index.html в браузере, чтобы увидеть прямую трансляцию. Не забудьте нажать кнопку запуска под видео~

Категории