vue2中使用rtsp展示监控_vue2如何播放u3m8格式,h265编码的监控视频流

视频地址格式为：rtsp://admin:abc123123@192.168.1.x:554/h264/XXXXXXX

1.视频地址解析

admin：用户名

abc123123：密码

192.168.1.x：摄像头ip地址

2.下载内容

（1）vlc   用来测试rtsp地址是否正确

        下载地址 https://www.videolan.org/vlc/

（2）WebRtcStreamer.js  用来初始化播放器

        下载地址 https://github.com/mpromonet/webrtc-streamer/releases

3.测试rtsp地址

（1）打开vlc，媒体--打开网络串流

 （2）粘贴地址，点击播放

（3）查看视频编码信息（当前方法仅支持H264）

        右键--工具--解编码器信息

（4）如果是H265需要更改 

        修改方法http://t.csdnimg.cn/ASoK6

（5）注意：把rtsp地址复制上去后是不需要任何操作的，等1~2秒之后就会展示监控视频，如果有提示需要输入密码，那么就是rtsp地址中的密码不正确

4.下载webrtc-streamer

（1）解压，打开webrtc-streamer.exe（注意：这个关闭视频不能播放）

（2）测试，浏览器打开127.0.0.1:8080

展示当前桌面说明打开成功

5.vue代码--视频组件

需要在当前文件引入webrtcstreamer.js，把他放到public下static文件下

注意：webrtcstreamer.js文件引入路径

<template>
  <div id="videoBody">
    <div class="video-contianer" v-for="(item, index) in rtsp" :key="index">
      <video
        class="video"
        :id="'video' + index"
        ref="video"
        preload="auto"
        autoplay="autoplay"
        muted
        width="100%"
        height="100%"
      />
      <div class="mask" @click="handleClickVideo(index)"></div>
    </div>
  </div>
</template>
 
<script>
import WebRtcStreamer from '../../../public/static/videojs/webrtcstreamer';
 
export default {
  name: 'videoCom',
  props: {
    rtsp: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      webRtcServer: [],
      clickCount: 0, // 用来计数点击次数
      currentIndex: null //当前视频流的索引
    };
  },
 
  destroyed() {
    this.webRtcServer.forEach((item) => {
      item.disconnect();
    });
    this.webRtcServer = [];
  },
 
  mounted() {
    this.rtsp.forEach((item, index) => {
      this.initVideo(item, index);
    });
  },
  methods: {
    initVideo(url, index) {
      try {
        //连接后端的IP地址和端口
        const webRtcServer = new WebRtcStreamer(
          'video' + index,
          `http://127.0.0.1:8000`
        );
        //向后端发送rtsp地址
        webRtcServer.connect(url);
        this.webRtcServer.push(webRtcServer);
      } catch (error) {
        console.log(error);
      }
    },
    /* 处理双击 单机 */
    dbClick() {
      this.clickCount++;
      if (this.clickCount === 2) {
        this.btnFull(); // 双击全屏
        this.clickCount = 0;
      }
      setTimeout(() => {
        if (this.clickCount === 1) {
          this.clickCount = 0;
        }
      }, 250);
    },
    /* 视频全屏 */
    btnFull() {
      const elVideo = document.getElementById('video' + this.currentIndex);
      if (elVideo.webkitRequestFullScreen) {
        elVideo.webkitRequestFullScreen();
      } else if (elVideo.mozRequestFullScreen) {
        elVideo.mozRequestFullScreen();
      } else if (elVideo.requestFullscreen) {
        elVideo.requestFullscreen();
      }
    },
    //  点击事件
    handleClickVideo(index) {
      this.currentIndex = index;
      this.dbClick();
    }
  }
};
</script>
 
<style scoped lang="scss">
#videoBody {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 1%;
  .video-contianer {
    position: relative;
    width: 24%;
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}
</style>
 

6.vue代码--父组件 

这里我只展示了两个视频，可根据需求在data的url中修改

<template>
  <div>
    <Video :rtsp="url" ref="videoSon"></Video>
  </div>
</template>
 
<script>
import Video from '@/components/video/video.vue';
export default {
  components: {
    Video
  },
  data() {
    return {
      url: [
        'rtsp://admin:bfhd2766@192.168.1.X:554/h264/XXXX',
        'rtsp://admin:bfhd2766@192.168.1.Y:554/h264/XXXX'
      ]
    };
  }
};
</script>
 
<style>
</style>

7.遇见问题 

视频一直在加载中，不报错也不播放

（1）检查视频编码信息是否是H264

（2）检查rtsp地址是否正确

         开发的时候有在webrtc-streamer.exe中报401错误是因为rtsp中密码有错导致身份验证不通过

8. 缺点

在展示两个监控视频时已经非常卡顿，而且webrtc-streamer.exe需要一直打开，不打开不能看到监控视频