Vue plays rtsp video stream

There is a need to play video surveillance at work. Recently, I first learned about the method of playing rtsp video streams on web pages. The following is my personal experience.
Finally, I chose vue+webrtc-streamer to realize the method of playing rtsp stream on the web page for testing.

personal experience

I tried the vue-video-player+videojs method for the first time, and found that it is only applicable to browsers that support flash, but the latest versions of all browsers do not support flash plug-ins, so I gave up.

Note that vue-video-player has a pit, and it keeps reporting errors when importing css files. The reason is that there is a problem with npm install vue-video-player.

After all kinds of Baidu for a long time, I found that I am using vue2. I don’t know why no one said that if you want to use vue-video-player in vue2 version, you must download version 4.x. The download of vue3 has changed the plugin name to @videojs-player/vue.

Download the 4.0.1 version and find that the css file can be imported normally, but the browser does not support flash, so the playback is not successful.

insert image description here

The second time I tried ffmpeg, I found it was too complicated, and I spent a long time thinking about it to no avail.

The third time I tried webrtc-streamer, I finally succeeded, and it is simpler than the first two methods!

Vue+webrtc-streamer realizes playing rtsp video stream on web pages

First download the compressed package of webtrc-streamer, which is available on github

https://github.com/mpromonet/webrtc-streamer/releases

download windows version

insert image description here

Double-click webrtc-streamer.exe to start the service

insert image description here

Copy the webrtcstreamer.js file under the html folder of the download package and the adapter.min.js file under the html/libs folder to the public/static directory of the VUE project, and import these two js files into the index.html file.

write test code

<template>
  <div class="home">
    <video id="video" autoplay width="600" height="400"></video>
    <video id="video1" autoplay width="600" height="400"></video>
  </div>
</template>
//不放心我又引入了一遍
   <script type="text/javascript" src="../../public/stactic/webrtcstreamer.js"></script>
   <script type="text/javascript" src="../../public/stactic/adapter.min.js"></script>
<script>
export default {
      
      
  name: "HomeView",
  data() {
      
      
    return {
      
      
      webRtcServer: null,
      webRtcServer1: null
    };
  },
  mounted() {
      
      
    //192.168.1.100是启动webrtc-streamer的服务器IP，8000是webrtc-streamer的默认端口号，可以在服务端启动的时候更改的
    this.webRtcServer = new WebRtcStreamer(
      "video",
      location.protocol + "//127.0.0.1:8000"
    );
    //需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用
    // this.webRtcServer.connect(
    //   "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
    // );
    this.webRtcServer.connect(
      "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
    );
      //第二个视频
      //根据不同的video标签来控制
    this.webRtcServer1 = new WebRtcStreamer(
      "video1",
      location.protocol + "//127.0.0.1:8000"
    );
    this.webRtcServer1.connect(
      "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
    );
  },
  methods: {
      
      },
  beforeDestroy() {
      
      
    this.webRtcServer.disconnect();
    this.webRtcServer = null;
  }
};
</script>

At this point, the video can be seen by running the web page.

insert image description here

But there are disadvantages (not yet resolved):

The video played has no sound
The console reports an error but does not affect normal playback

insert image description here
If anyone knows how to solve it, please leave a message!
Refer to http://t.csdn.cn/gj93S for the above content