rtsp流引入海康威视摄像头——截图功能

此功能根据vue2使用rtsp视频流接入海康威视摄像头(纯前端)_vue rtsp-CSDN博客

案例进行更改添加,如果看不懂此篇请仔细阅读上篇博客再来观看此篇

一.功能描述

由于通过rtsp流引入海康威视摄像头导致原生摄像头部分功能无法使用,所以这里原生摄像头的抓图功能用video标签的截图功能代替

二.功能实现

直接看代码

video.vue(子组件)

<template>
  <div id="video-contianer">
    <video
      :id="id"
      ref="video"
      preload="auto"
      autoplay="autoplay"
      muted
      width="600"
      height="400"
    />
    <div
      class="mask"
      @click="handleClickVideo"
      :class="{ 'active-video-border': selectStatus }"
    ></div>
  </div>
</template>

<script>
import WebRtcStreamer from '../../public/hk/webrtcstreamer'

export default {
  name: 'videoCom',
  props: {
    id: {
      type: String,
      require: true,
    },
    rtsp: {
      type: String,
      required: true,
    },
    isOn: {
      type: Boolean,
      default: false,
    },
    spareId: {
      type: Number,
    },
    selectStatus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      socket: null,
      result: null, // 返回值
      pic: null,
      webRtcServer: null,
      clickCount: 0, // 用来计数点击次数
      imgUrl: '',
    }
  },
  watch: {
    rtsp() {
      // do something
      console.log(this.rtsp)
      this.webRtcServer.disconnect()
      this.initVideo()
    },
  },
  destroyed() {
    this.webRtcServer.disconnect()
  },
  beforeCreate() {
    window.onbeforeunload = () => {
      this.webRtcServer.disconnect()
    }
  },
  created() {},
  mounted() {
    this.initVideo()
  },
  methods: {
    handleScreenshot() {
      let video = document.getElementById(this.$props.id) //获取dom节点
      let canvas = document.createElement('canvas') //创建canvas节点
      let w = window.innerWidth
      let h = (window.innerWidth / 16) * 9
      canvas.width = w
      canvas.height = h //设置canvas宽高
      const ctx = canvas.getContext('2d')
      ctx.drawImage(video, 0, 0, w, h) //video写入到canvas
      this.imgUrl = canvas.toDataURL('image/jpge') //生成截图地址
      return this.imgUrl
    },
    initVideo() {
      try {
        //连接后端的IP地址和端口
        this.webRtcServer = new WebRtcStreamer(
          this.$refs.video,
          `http://192.168.1.139:8000`
        )
        //向后端发送rtsp地址
        this.webRtcServer.connect(this.rtsp)
      } 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 = this.$refs.video
      if (elVideo.webkitRequestFullScreen) {
        elVideo.webkitRequestFullScreen()
      } else if (elVideo.mozRequestFullScreen) {
        elVideo.mozRequestFullScreen()
      } else if (elVideo.requestFullscreen) {
        elVideo.requestFullscreen()
      }
    },
    /* 
    ison用来判断是否需要更换视频流
    dbclick函数用来双击放大全屏方法
    */
    handleClickVideo() {
      if (this.isOn) {
        this.$emit('selectVideo', this.spareId)
        this.dbClick()
      } else {
        this.btnFull()
      }
    },
  },
}
</script>

<style scoped lang="scss">
.active-video-border {
  border: 2px salmon solid;
}
#video-contianer {
  position: relative;
  // width: 100%;
  // height: 100%;
  .video {
    // width: 100%;
    // height: 100%;
    // object-fit: cover;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>

AboutView.vue(父组件)

<template>
  <div>
    <div>
      <h1>rtsp 视频流引入</h1>
      <div>
        <div style="display: inline-block">
          <button @click="screenshot">抓拍</button>
        </div>
        <div class="flex box">
          <Video :rtsp="rtspurl1" ref="video1" :id="id1"></Video>
          <Video :rtsp="rtspurl2" ref="video2" :id="id2"></Video>
        </div>
      </div>
      <div>
        <img
          style="width: 600px; height: 400px"
          v-for="(item, index) in imgArr"
          :key="index"
          :src="item"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Video from './video.vue'
export default {
  components: {
    Video,
  },
  data() {
    return {
      imgArr: [], //图片地址数组,存储base64数据
      id1: 'video1',
      id2: 'video2',
      rtspurl1:
        'rtsp://用户名:密码@摄像头地址//Streaming/Channels/101',
      rtspurl2:
        'rtsp://用户名:密码@摄像头地址//Streaming/Channels/101',
    }
  },
  created() {
    this.controlVolume()
  },
  methods: {
    //抓拍方法
    screenshot() {
      this.imgArr = []
      this.imgArr.push(this.$refs['video1'].handleScreenshot())
      this.imgArr.push(this.$refs['video2'].handleScreenshot())
    },
    //调整视频音量为0
    controlVolume() {
      this.$nextTick(() => {
        //调整音量为0
        this.$refs.video1.volume = 0
        this.$refs.video1.volume = 0
      })
    },
}
</script>
<style scoped>
.flex-box {
  display: flex;
  justify-content: flex-start;
  margin-top: 40px;
}
</style>

三.功能演示

至此

抓拍功能也就告一段落啦

欢迎各位老师在评论区交流讨论

如果有需要改进的地方可以私信讨论

最后

希望大家共同进步,事业蒸蒸日上!