vue实现监控视频播放

Vue 实现监控视频播放方案

使用 video.js 实现基础播放

安装 video.js 和对应的 Vue 适配器：

npm install video.js @videojs-player/vue

创建视频播放组件：

<template>
  <video-player
    src="监控视频地址"
    controls
    autoplay
    :options="playerOptions"
  />
</template>

<script>
import { defineComponent } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'

export default defineComponent({
  components: { VideoPlayer },
  setup() {
    const playerOptions = {
      fluid: true,
      aspectRatio: '16:9',
      techOrder: ['html5'],
      sources: [{
        src: '监控视频地址',
        type: 'application/x-mpegURL' // 适配HLS流
      }]
    }
    return { playerOptions }
  }
})
</script>

实现RTSP流播放

由于浏览器不支持直接播放RTSP，需要转码服务：

后端使用FFmpeg转码RTSP为HLS：

ffmpeg -i rtsp://监控地址 -c copy -f hls -hls_time 2 -hls_list_size 3 -hls_flags delete_segments stream.m3u8

前端通过HLS.js播放：

<template>
  <video ref="videoEl" controls></video>
</template>

<script>
import Hls from 'hls.js'

export default {
  mounted() {
    const video = this.$refs.videoEl
    if (Hls.isSupported()) {
      const hls = new Hls()
      hls.loadSource('http://转码服务器地址/stream.m3u8')
      hls.attachMedia(video)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play()
      })
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = 'http://转码服务器地址/stream.m3u8'
      video.addEventListener('loadedmetadata', () => {
        video.play()
      })
    }
  }
}
</script>

实现多画面监控

使用CSS Grid布局多个视频源：

<template>
  <div class="video-grid">
    <video-player 
      v-for="(src, index) in videoSources" 
      :key="index"
      :src="src"
    />
  </div>
</template>

<style>
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 10px;
}
</style>

添加时间轴回放功能

对于存储的监控录像，实现时间选择：

<template>
  <input 
    type="datetime-local" 
    v-model="selectedTime"
    @change="changeVideoTime"
  />
</template>

<script>
export default {
  methods: {
    changeVideoTime() {
      const timestamp = new Date(this.selectedTime).getTime()
      // 调用API获取对应时间段的视频
      fetchVideoByTimestamp(timestamp)
    }
  }
}
</script>

性能优化建议

• 使用Web Worker处理视频分析
• 对非活动标签页降低视频帧率
• 实现动态码率切换
• 添加loading状态和错误处理

完整示例组件

<template>
  <div class="surveillance-container">
    <div class="toolbar">
      <button @click="toggleFullscreen">全屏</button>
      <input type="datetime-local" v-model="playbackTime">
    </div>

    <div class="video-wrapper" ref="videoContainer">
      <video-player
        ref="player"
        :options="playerOptions"
        @ready="handlePlayerReady"
      />
    </div>
  </div>
</template>

<script>
import { VideoPlayer } from '@videojs-player/vue'
import Hls from 'hls.js'

export default {
  components: { VideoPlayer },
  data() {
    return {
      playerOptions: {
        autoplay: true,
        controls: true,
        sources: [{
          src: '',
          type: 'application/x-mpegURL'
        }]
      },
      playbackTime: null,
      hls: null
    }
  },
  methods: {
    handlePlayerReady(player) {
      this.videoPlayer = player
      this.initHlsPlayer()
    },
    initHlsPlayer() {
      if (Hls.isSupported()) {
        this.hls = new Hls()
        this.hls.loadSource(this.playerOptions.sources[0].src)
        this.hls.attachMedia(this.videoPlayer.tech().el())
      }
    },
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        this.$refs.videoContainer.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    }
  }
}
</script>