Интерфейс воспроизводит видеопоток rtsp (наконец, используя WebRtc)

Предисловие:

Проекту необходимо добавить на лицевую страницу видео с камеры в лаборатории, поэтому мы попробовали несколько распространенных методов. Хотя процесс был непростым, результат оказался хорошим.

Некоторые вещи, которые стоит попробовать:

RTSPtoWebRtcTool

Поскольку RTSPtoWebRtc настроен с помощью Ice_serve, доступ к видео в локальной сети невозможен.
nginx+FFmepg

Первоначальная идея состоит в том, чтобы обработать поток rtsp, преобразовать его в rtmp и, наконец, получить к нему доступ в форме http. Но после нескольких дней попыток я обнаружил следующие недостатки:

Видеоизображение в реальном времени имеет высокую задержку, около 10 с. После декодирования графическим процессором задержка все еще составляет 6-7 с.
В настройке http nginx есть определенная сложность (думаю, это моя проблема). К нему нельзя получить доступ в виде http, поэтому его нельзя отобразить на веб-странице.

После некоторых перипетий решил использовать WebRtc.

Сначала я думал, что это будет более хлопотно, но пожалел, что не попробовал раньше...

1. Загрузите WebRtc

github：Релизы · mpromonet/webrtc-streamer (github.com)

Будьте осторожны, чтобы не загрузить не тот файл.

Вставьте сюда описание изображения

2. Запустите webrtc-стример.

После загрузки разархивируйте его, откройте командное окно и выполните следующую команду

 D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exe -o -H 0.0.0.0:8000

где D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exeабсолютный путь

-o: нет необходимости перекодировать, уменьшить нагрузку на процессор

-H: указать номер порта

Вставьте сюда описание изображения

Затем откройте 127.0.0.1:8001/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264 в браузере.

Не забудьте изменить rtsp

3. Введение в Vue

Скопируйте файл webrtcstreamer.js из папки html загружаемого пакета webrtc-streamer и файл адаптера.min.js из папки html/libs в общедоступный каталог проекта VUE. И добавьте эти два js-файла в файл index.html. Формат следующий:

    <script src="<%= BASE_URL %>adapter.min.js"></script>
    <script src="<%= BASE_URL %>webrtcstreamer.js"></script>

Вставьте сюда описание изображения

4. Написание страниц

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

<template>
  <div>
    <video id="video" autoplay width="500" height="300"></video>
  </div>
</template>

<script>
export default {
  name: 'index1',
  data() {
    return {
      webRtcServer: null
    }
  },
  mounted() {
    //video：需要绑定的video控件ID
    //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
    this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
    //需要查看的rtsp地址，记得修改rtsp地址
    this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')
  },
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  },
  methods: {

  }
}
</script>

<style scoped></style>

5. Результаты операции

Вставьте сюда описание изображения

Ссылка:
VUE+webrtc-streamer реализует воспроизведение видео в реальном времени (мониторинг устройства-rtsp)_vue блог webrtc-streamer-CSDN

[Vue2 + webrtc-steamer] rtsp-поток воспроизводится в реальном времени в блоге Web_Is webrtc-streamer стабильный-CSDN