как мы все знаем,В сфере живого видео,Существуют разные продавцы, предлагающие различные бизнес-решения.,Среди наиболее надежных поставщиков услуг — Alibaba.Облачный прямой эфир,Тенсент Облачный прямой эфир, а также платные услуги прямых трансляций Youpai Cloud и NetEase Cloud Services включают в себя программное и аппаратное оборудование, камеры, кодеры, серверы потокового мультимедиа и т. д. Однако его высокая стоимость и высокий порог входа отпугивают многих частных лиц и малый бизнес. В этой статье объясняется, как использовать nginx-rtmp для создания сервера прямой трансляции, сотрудничать с FFmpeg для передачи потока и использовать vue.js в качестве носителя. веб-страницу. js в качестве проигрывателя потоковой передачи для создания удобного решения для прямой онлайн-трансляции видео.

Процесс прямой видеотрансляции можно разделить на следующие этапы:

    коллекция —>иметь дело с—>Кодирование и упаковка—>Отправить на сервер—>Распространение потоковой передачи на сервере—>Стриминг игрока

Реализуйте отображение живых программ на терминале. Поскольку протокол передачи, который я здесь использую, — RTMP, можно использовать любой проигрыватель, поддерживающий протокол потоковой передачи RTMP. Здесь мы используем nginx.

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

Создание сервера прямой трансляции — долгий и сложный процесс, а его компиляция и настройка немного громоздки. К счастью, в Docker существует множество сред rtmp, скомпилированных и настроенных другими, поэтому вы можете использовать их напрямую. Из этого видно превосходство docker. Здесь используется библиотека alfg/nginx-rtmp.

Установить докер

Текущая стабильная версия — DockerToolbox-18.03.0-ce.exe. Просто нажмите, чтобы установить ее.

Есть одна вещь, на которую нужно обратить внимание в процессе установки. Вы должны включить технологию виртуализации процессора в локальном биосе.

После установки докера загрузите образ nginx-rtmp и запустите службу, чтобы сопоставить порты 1945 и 8000.

docker pull alfg/nginx-rtmp
docker run -it -p 1935:1935 -p 8000:80 --rm alfg/nginx-rtmp

Получите доступ к порту хоста 8000, чтобы отобразить страницу приветствия nginx.

Затем используйте FFmpeg для выполнения потоковых операций.,ffmpegЧто это, пожалуйста, подвинься：Python3 использует ffmpeg для выполнения некоторых операций с видео.

Введите команду. Обратите внимание, что камера и микрофон должны соответствовать оборудованию компьютера. Кроме того, сервер потоковой передачи должен быть перенесен на только что развернутый nginx.

ffmpeg -f dshow -i video="VMware Virtual USB Video Device":audio="Microphone (High Definition Audio Device)" -tune:v zerolatency -f flv "rtmp://192.168.99.100:1935/stream/test"

После успешной отправки мы будем смотреть прямую трансляцию на веб-сайте. Здесь мы используем vue.js для создания внешнего сервиса и video.js для проигрывателя видеопотоков.

Сначала создайте проект поддержки прямой трансляции, затем установите необходимые библиотеки прямой трансляции и, наконец, запустите проект.

#Создать проект
vue init webpack-simple zhibo
cd zhibo
cnpm install vue-router save
cnpm install

#Установить компоненты прямой трансляции
cnpm install video.js
cnpm install aes-decrypter
cnpm install m3u8-parser
cnpm install mpd-parser
cnpm install mux.js
cnpm install url-toolkit
cnpm install videojs-contrib-hls

#hotstartproject
cnpm run dev

Создайте новый video.vue и добавьте код воспроизведения.

<template>
    <div>

    

      <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" >
    <!-- Адрес прямой трансляции — это адрес воспроизведения, сопоставленный nginx. Обратите внимание, что для прямого потока используется суффикс m3u8. -->
    <source src="http://192.168.99.100:8000/live/test.m3u8" >
</video>

    </div>
  </template>
   
  <script>

import videojs from 'video.js'
import 'videojs-contrib-hls'


  export default {
    data () {
      return {
      
      }
    
    },
    mounted:function(){

      videojs('my-video', {
    bigPlayButton: true,
    textTrackDisplay: false,
    posterImage: true,
    errorDisplay: false,
    controlBar: true
}, function () {
    this.play()
})

    }
  }
  </script>
   
  <style>
  </style>

Наконец, привяжите компонент video.vue к маршруту vue.js, войдите в браузер и протестируйте прямую трансляцию.

Готово и заканчиваем