library-management-system/src/views/components/hkVideo.vue

<template>
  <div style="width: 100%; height: 100%; overflow: hidden;">
    <!-- <h1>海康威视视频流</h1> -->
    <!-- <h3>400W</h3>
    <VideoCom :rtsp="rtspurl1" ref="video1"></VideoCom>
    <h3>800W</h3>
    <VideoCom :rtsp="rtspurl2" ref="video2"></VideoCom> -->

    <video id="video" controls autoplay muted width="100%" height="100%" />
  </div>
</template>

<script>
// import VideoCom  from '../components/video'
// rtsp://admin:ftzn83560792@192.168.99.23:554/h264/ch1/main/av_stream
// rtsp://admin:ftzn83560792@192.168.99.26:554/Streaming/Channels/101
export default {
  name: 'Home',
  components: {
    // VideoCom
  },
  props: {
    hkConfig: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      webRtcServer: null,
      camera_ip: '127.0.0.1:8000'
    }
  },
  created() {
    // this.controlVolume()
  },
  mounted() {
    // video：需要绑定的video控件ID
    // 127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
    // eslint-disable-next-line no-undef
    this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
    // 需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
    this.webRtcServer.connect('rtsp://' + this.hkConfig.username + ':' + this.hkConfig.password + '@' + this.hkConfig.ip + ':' + this.hkConfig.port + '/h264/ch1/main/av_stream')
  },
  // 销毁视频流
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  },
  methods: {
    controlVolume() {
      this.$nextTick(() => {
        this.$refs.video1.volume = 0
        this.$refs.video2.volume = 0
      })
    }
  }
}
</script>

<style lang="scss">
</style>