vue2、vue3 播放rtsp视频流，拿到rtsp视频流地址如何处理，海康视频rtsp h264如何播放

最近在写一个基于vite+vue3的大屏项目其中有个需求是实时播放摄像头的视频，摄像头是海康的设备，搞了很长时间终于监控视频出来了，记录一下。

1、测试rtsp视频流能不能播放

video mediaplay官网 即（VLC）：https://www.videolan.org/vlc/

下载、安装完VLC后，打开VLC 点击媒体 -> 打开网络串流

将rtsp地址粘贴进去

不能播放的话，rtsp视频流地址有问题。

注意：视频可以播放也要查看视频的格式，如下

右击视频选择工具->编解码器信息

如果编解码是H264的，那么我的这种方法可以。如果是H265或者其他的话就要登录海康后台修改一下：

以 vite+vue3 为例

1、webrtcstreamer.js

点击下载 webrtcstreamer.js，解压后得到webrtcstreamer.js。

2、webrtc-streamer

下载地址：https://github.com/mpromonet/webrtc-streamer/releases。根据自己的操作系统，下载对应的版本。下载后解压，打开，启动

出现下面这个页面就是启动成功了，留意这里的端口号，就是我选出来的部分，一般都是默认8000，不排除其他情况。窗口不要关闭了，这是解码用的。

检查一下有没用启动成功，http://localhost:8000/ 粘贴到浏览器地址栏回车查看，启动成功能看到电脑当前页面（这里的8000就是启动的端口号，启动的是多少就访问多少）：

3、编写播放器组建：

新建ZhiboPlayer.vue：

<template>
  <div :style="{width: width, height: height}">
    <video ref="video" preload autoplay muted />
    <div @click="handleClickVideo">
      <div v-if="isShowTips">双击可全屏观看</div>
    </div>
  </div>
</template>
<script>
// 根据自己的情况引入
import WebRtcStreamer from '../utils/webrtcstreamer'
export default {
  data() {
    return {
      webRtcServer: null,
      isOn: false,
      clickCount: 0,
      isShowTips: true
    }
  },
  props: {
    width: {
      type: String,
      default:'258px'
    },
    height: {
      type: String,
      default:'100%'
    },
  },
  methods: {
    initPlayer(src: String, ip: String) {
      if(src) {
        this.destoryPlayer()
        this.initVideo(src, ip)
      }
    },
    destoryPlayer() {
      this.webRtcServer?.disconnect()
    },
    // 这里的'http://localhost:8000'一般不用改，除非您刚才启动的 webrtc-streamer 的端口号不正确，当然localhost也可以换成您的ip
    initVideo(src: String, ip: String = 'http://localhost:8000') {
      try {
        //连接后端的IP地址和端口
        this.webRtcServer = new WebRtcStreamer(this.$refs.video, ip)
        //向后端发送rtsp地址
        this.webRtcServer?.connect(src)
      } catch (error) {
        console.log(error)
      }
    },
    /* 
    ison用来判断是否需要更换视频流
    dbclick函数用来双击放大全屏方法
    */
    handleClickVideo() {
      if (this.isOn) {
        this.dbClick()
      } else {
        this.btnFull()
      }
    },
    /* 处理双击 单机 */
    dbClick() {
      this.clickCount++
      if (this.clickCount === 2) {
        this.btnFull() // 双击全屏
        this.clickCount = 0
      }
      setTimeout(() => {
        if (this.clickCount === 1) {
          this.clickCount = 0
        }
      }, 250)
    },
    /* 视频全屏 */
    btnFull() {
      const elVideo = this.$refs.video
      if (elVideo.webkitRequestFullScreen) {
        elVideo.webkitRequestFullScreen()
      } else if (elVideo.mozRequestFullScreen) {
        elVideo.mozRequestFullScreen()
      } else if (elVideo.requestFullscreen) {
        elVideo.requestFullscreen()
      }
    },
  },
  beforeUnmount() {
    this.destoryPlayer()
  },
  beforeMount() {
    setTimeout(() => {
      this.isShowTips = false
    }, 2000)
    window.onbeforeunload = () => {
      this.destoryPlayer()
    }
  }
}
</script>
<style scoped>
.video-contianer {
  position: relative;
  border: 1px solid white;
}
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}
</style>

注意：1、修改 webrtcstreamer.js 的实际引入位置

    2、根据需要修改上面的ip地址

4、页面中调用

在页面中引入 ZhiboPlayer.vue，并调用它的初始化方法：

<ZhiboPlayer ref="playerRef1" height="173px" />
<ZhiboPlayer :ref="playerRef2" height="173px" />

import ZhiboPlayer from '@/components/ZhiboPlayer.vue'
playerRef1.value.destoryPlayer()
playerRef1.value.initVideo('rtsp://rtspstream:c4a6229f.rtsp.stream/movie', 'http://192.168.1.88:8000')
playerRef2.value.destoryPlayer()
playerRef2.value.initVideo('rtsp://rtspstream:c4a6229f.rtsp.stream/movie', 'http://192.168.1.88:8000')

至此就完成了，亲测可行，可完美播放。