Front-end reproduz fluxo de vídeo rtsp (finalmente usando WebRtc)

Front-end reproduz fluxo de vídeo rtsp (finalmente usando WebRtc)

Prefácio:

​ O projeto precisa introduzir as imagens da câmera do laboratório na página inicial, então tentamos vários métodos comuns. Embora o processo tenha sido difícil, o resultado foi bom.

Algumas coisas para tentar:

• RTSPtoWebRtcTool

  Como o RTSPtoWebRtc está configurado com ice_serve, o vídeo não pode ser acessado na LAN.

• nginx+FFmepg

A ideia inicial é processar o stream rtsp, convertê-lo em rtmp e finalmente acessá-lo na forma de http. Mas depois de vários dias de tentativas, descobri as seguintes desvantagens:

1. A imagem de vídeo em tempo real tem um atraso alto, com um atraso de cerca de 10s. Após a decodificação pela GPU, ainda há um atraso de 6 a 7s.
2. Existe um certo grau de dificuldade na configuração http do nginx (acho que esse é o meu problema). Ele não pode ser acessado no formato http, portanto não pode ser exibido na página web.

Depois de algumas reviravoltas decidi usar WebRtc

No começo pensei que isso seria mais problemático, mas me arrependi de não ter tentado antes...

1. Baixe WebRtc

github：Lançamentos · mpromonet/webrtc-streamer (github.com)

Tenha cuidado para não baixar o errado

2. Execute webrtc-streamer

Após o download, descompacte-o, abra a janela de comando e execute o seguinte comando

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

onde D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exeestá o caminho absoluto

-o: Não há necessidade de transcodificar, reduza a CPU

-H: Especifique o número da porta

Em seguida, acesse 127.0.0.1:8001/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264 no navegador

Lembre-se de modificar o rtsp

3. Introdução ao Vue

Copie o arquivo webrtcstreamer.js na pasta html do pacote de download webrtc-streamer e o arquivo adaptador.min.js na pasta html/libs para o diretório público do projeto VUE. E introduza esses dois arquivos js no arquivo index.html. O formato é o seguinte:

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

4. Escrevendo páginas

O código a seguir pode ser copiado e colado diretamente e modificado conforme necessário.

<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 da operação

Link de referência:
VUE + webrtc-streamer realiza reprodução de vídeo em tempo real (monitoramento de dispositivo-rtsp)_vue webrtc-streamer-CSDN blog

O stream rtsp [Vue2 + webrtc-steamer] é reproduzido em tempo real no blog Web_Is webrtc-streamer stable-CSDN