El front-end reproduce secuencias de video rtsp (finalmente usando WebRtc)

El front-end reproduce secuencias de video rtsp (finalmente usando WebRtc)

Prefacio:

El proyecto necesita introducir las imágenes de la cámara en el laboratorio en la página de inicio, por lo que probamos varios métodos comunes. Aunque el proceso fue complicado, el resultado fue bueno.

Algunas cosas para probar:

• RTSPtoWebRtcHerramienta

  Dado que RTSPtoWebRtc está configurado con ice_serve, no se puede acceder al vídeo en la LAN.

• Nginx + FFmepg

La idea inicial es procesar el flujo rtsp, convertirlo a rtmp y finalmente acceder a él en forma de http. Pero después de varios días intentándolo, encontré los siguientes inconvenientes:

1. La imagen de video en tiempo real tiene un retraso alto, con un retraso de aproximadamente 10 segundos después de la decodificación por la GPU, todavía hay un retraso de 6 a 7 segundos.
2. Hay un cierto grado de dificultad en la configuración http de nginx (creo que este es mi problema, no se puede acceder en formato http, por lo que no se puede mostrar en la página web).

Después de algunas idas y venidas decidí utilizar WebRtc

Al principio pensé que esto sería más problemático, pero lamenté no haberlo intentado antes...

1. Descargar WebRtc

github：Lanzamientos · mpromonet/webrtc-streamer (github.com)

Tenga cuidado de no descargar el incorrecto

2. Ejecute webrtc-streamer

Después de la descarga, descomprímalo, abra la ventana de comandos y ejecute el siguiente comando

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

¿Dónde D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exeestá el camino absoluto?

-o: No es necesario transcodificar, reduce la CPU

-H: especificar el número de puerto

Luego acceda a 127.0.0.1:8001/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264 en el navegador

Recuerda modificar rtsp

3. Introducción a Vue

Copie el archivo webrtcstreamer.js en la carpeta html del paquete de descarga webrtc-streamer y el archivo adaptor.min.js en la carpeta html/libs al directorio público del proyecto VUE. E introduzca estos dos archivos js en el archivo index.html. El formato es el siguiente:

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

4. Escribir páginas

El siguiente código se puede copiar y pegar directamente y modificar según sea necesario.

<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. Resultados de la operación

Enlace de referencia:
VUE + webrtc-streamer realiza reproducción de video en tiempo real (dispositivo de monitoreo-rtsp)_vue webrtc-streamer-CSDN blog

[Vue2 + webrtc-steamer] La transmisión rtsp se reproduce en tiempo real en Web_Is webrtc-streamer stable-CSDN Blog