前端在浏览器显示摄像头传回的RTSP视频流，前端采用的技术有VUE+video.js+flv.js

在前端使用Vue.js框架，结合video.js和flv.js播放RTSP视频流，需要经过一系列步骤，因为浏览器并不能直接播放RTSP流，所以通常需要一个服务器来将RTSP流转为HLS或FLV格式，然后前端再通过flv.js播放。以下是一个基于此思路的基本实现指南：

确保你已经安装了Vue.js、video.js、flv.js相关的依赖。

npm install video.js flv.js --save

Vue组件实现

<template>
  <div>
    <video id="myPlayer" class="video-js vjs-default-skin" controls></video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import flvjs from 'flv.js';

export default {
  mounted() {
    this.player = videojs('myPlayer', {
      techOrder: ['html5', 'flvjs'],
      sources: [{
        src: 'YOUR_FLV_STREAM_URL', // 这里换成实际的FLV流URL
        type: 'video/x-flv'
      }],
      controlBar: { // 自定义控制栏
        fullscreenToggle: true,
      },
    });

    // 检查flvjs是否可用并加载流
    if (flvjs.isSupported()) {
      const tech = flvjs.createPlayer({
        type: 'flv',
        url: 'YOUR_FLV_STREAM_URL', // 与sources.src相同，确保一致
      });
      this.player.tech_.hls = tech;
      tech.attachMediaElement(this.player.el().querySelector('video'));
      tech.load();
    } else {
      console.error('FLV.js is not supported in this browser.');
    }
  },
  beforeDestroy() {
    if (this.player && this.player.dispose) {
      this.player.dispose();
    }
  },
};
</script>

以上代码提供了一个基础框架，实际应用中可能需要根据具体需求和环境进行调整。

如果streamUrl从后端获取，并隔一段时间推送一次呢？

如果streamUrl需要从后端动态获取，并且这个URL可能会随着时间推移而变化（例如，每隔一段时间后端推送新的流地址），你可以采用Vue的响应式特性以及WebSocket或轮询的方式来动态更新视频流地址。下面是一个简化版的实现思路：

使用WebSocket接收实时更新

1. 安装WebSocket客户端库: 首先，确保你的项目中安装了WebSocket客户端库，如socket.io-client。 npm install socket.io-client

2. 建立WebSocket连接: 在Vue组件中建立与后端的WebSocket连接，并设置消息监听器来接收新的streamUrl。

import io from "socket.io-client";

data() {
  return {
    player: null,
    streamUrl: '', // 初始化为空或默认值
    socket: null, // 用于存放WebSocket实例
  };
},
mounted() {
  this.initWebSocket();
  this.initPlayer();
},
methods: {
  initWebSocket() {
    this.socket = io("http://your-backend-url"); // 替换为你的后端WebSocket服务器地址
    this.socket.on("newStreamUrl", (newUrl) => {
      console.log("New stream URL received:", newUrl);
      this.streamUrl = newUrl;
      // 当收到新的URL时，重新设置播放器的源
      if (this.player && this.player.src) {
        this.player.src({
          type: 'application/x-flv',
          src: this.streamUrl,
        });
        // 重新加载播放器
        this.player.load();
        // 如果需要，还可以在这里调用play()方法开始播放
      }
    });
  },
  
  // ...其他代码保持不变
},
beforeDestroy() {
  // 清理WebSocket连接
  if (this.socket) {
    this.socket.disconnect();
  }
  // ...其他清理工作
}

使用定时轮询

步骤 1: 定义数据属性和方法

在Vue组件中，定义需要的数据属性，比如存放视频流URL的变量，以及一个用于发起请求的方法。

export default {
  data() {
    return {
      videoStreamUrl: '', // 初始视频流URL
      pollInterval: null, // 用于存储轮询的定时器引用
    };
  },
  methods: {
    fetchVideoStreamUrl() {
      // 发起请求到后台获取视频流URL
      axios.get('/api/getVideoStream')
        .then(response => {
          if (response.data.success && response.data.url) {
            this.videoStreamUrl = response.data.url;
            // 如果是首次获取成功，或者需要在每次获取后重新加载播放器，这里可以添加逻辑
            // 例如，如果使用video.js，可能需要重新初始化播放器或更新源
          }
        })
        .catch(error => {
          console.error('Error fetching video stream URL:', error);
        });
    },
  },
};

步骤 2: 创建轮询逻辑

在Vue组件的生命周期钩子中启动轮询，通常在mounted钩子启动，在beforeDestroy钩子中清理轮询，避免内存泄漏。

mounted() {
  // 启动轮询，例如每10秒检查一次
  this.pollInterval = setInterval(() => {
    this.fetchVideoStreamUrl();
  }, 10000); // 10000毫秒即10秒
},
beforeDestroy() {
  // 清理轮询，当组件销毁时停止
  clearInterval(this.pollInterval);
},

步骤 3: 动态更新视频播放

当从后台获取到新的视频流URL时，如果你使用的是像video.js这样的播放器库，你可能需要根据新的URL更新播放器的源。具体实现取决于你使用的播放器库的API。

对于video.js，你可能需要重新创建播放器实例或使用其提供的API来更新视频源。例如：

methods: {
  // ...其他方法
  updateVideoSource(newUrl) {
    if (this.player) {
      // 假设this.player是video.js播放器实例
      this.player.src({
        src: newUrl,
        type: 'video/x-flv', // 根据实际情况调整类型
      });
      // 可能需要重新加载或播放
      this.player.load();
      this.player.play();
    }
  },
},
// 在fetchVideoStreamUrl方法内部调用updateVideoSource
if (response.data.success && response.data.url !== this.videoStreamUrl) {
  this.updateVideoSource(response.data.url);
}

这样，你就实现了根据后台动态提供的视频流URL，使用轮询方式在前端进行定期检查和更新的功能。记得根据实际应用场景调整轮询间隔，避免过于频繁的请求导致服务器压力。

以上是ai生成，实际项目代码如下：

<template>
  <div class="planningStyle">
    <div class="top">
      <div class="top-title">
        实时视频
      </div>
      <el-select
        v-model="devSnValue"
        class="planselectes"
        @change="changePlanning"
        placeholder="请选择"
      >
        <el-option
          v-for="item in cameraList"
          :key="item.devSn"
          :label="item.devName"
          :value="item.devSn"
        >
        </el-option>
      </el-select>
    </div>

    <div class="content" v-loading="loading">
      <video
        class="video"
        id="videoElement"
        :src="streamUrl"
        :autoplay="true"
        :fluid="true"
        :controls="false"
        muted
      ></video>
    </div>
  </div>
</template>

<script>
import { getCameraListWithGb, getStreamInfo } from '@/api/cockpit';
export default {
  name: 'RealtimeVideo',
  data() {
    return {
      loading: false,
      cameraList: [],
      currentVideoObj: {},
      devSnValue: '',
      streamUrl: '',
      flvPlayer: null,
      pollIntervalTimer: null // 定时器
    };
  },

  mounted() {
    this.getDataList();
  },
  watch: {
    streamUrl(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.$nextTick(() => {
          this.createPlayer();
        });
      }
    }
  },
  methods: {
    getDataList() {
      const form = new FormData();
      form.append('token', this.$store.getters.token);
      form.append('pageNum', 1);
      form.append('pageSize', -1);
      form.append('status', '1');
      getCameraListWithGb(form).then(ret => {
        this.cameraList = ret.data.body.list;
        this.currentVideoObj = this.cameraList[0];
        this.devSnValue = this.currentVideoObj.devSn;
        this.getStreamInfo(); // 获取设备码流地址
      });
    },
    // 获取设备码流地址
    getStreamInfo() {
      this.loading = true;
      const form = new FormData();
      form.append('token', this.$store.getters.token);
      form.append('productIdentifier', this.currentVideoObj.productIdentifier);
      form.append('devSn', this.devSnValue);
      form.append('channelNum', 1);
      form.append('streamMode', 'sub');
      getStreamInfo(form).then(ret => {
        if (ret.data.status === 0) {
          let res = ret.data.body;
          this.streamUrl = res.streamUrl;
        }
      });
    },
    createPlayer() {
      if (!this.streamUrl) return;
      // 判断当前浏览器是否支持播放
      if (flvjs.isSupported()) {
        let videoElement = document.getElementById('videoElement');
        // 创建一个播放实例
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          cros: true,
          enableWorker: true,
          enableStashBuffer: false,
          stashInitialSize: 128,
          url: this.streamUrl
        });
        // 将播放实例注册到video节点
        this.loading = false;
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load(); // 加载数据流
        this.flvPlayer.play(); // 播放数据流
      }
    },
    changePlanning(value) {
      this.currentVideoObj = this.cameraList.find(item => {
        return item.devSn === value;
      });
      this.stopPlay();
      this.getStreamInfo();
    },
    // 停止播放
    stopPlay() {
      if (!this.flvPlayer) return false;
      this.clearPolling();
      this.flvPlayer.pause(); // 暂停播放数据流
      this.flvPlayer.unload(); // 取消数据流加载
      this.flvPlayer.detachMediaElement(); // 将播放实例从节点中取出
      this.flvPlayer.destroy(); // 销毁播放实例
      this.flvPlayer = null;
    },
    // 开始轮询,每两分钟获取一次视频流
    polling() {
      if (this.pollIntervalTimer) {
        this.clearPolling();
        return;
      }
      this.pollIntervalTimer = setInterval(() => {
        this.getStreamInfo();
      }, 1000 * 15);
    },
    clearPolling() {
      clearInterval(this.pollIntervalTimer);
    }
  },
  beforeDestroy() {
    clearInterval(this.pollIntervalTimer);
    this.pollIntervalTimer = null;
  },
  destroyed() {
    this.stopPlay();
  }
};
</script>
<style lang="scss" scoped>
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 2s;
}
.fade-leave-to {
  opacity: 0;
}
.fade-leave-active {
  transition: opacity 2s;
}

.planningStyle {
  width: 100%;
  height: 100%;
  padding: 13px 9px 24px 9px;

  .top {
    width: 100%;
    height: 32px;
    background: url('~@/assets/images/bigScreen/title-figure.gif') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    font-size: 20px;
    color: #1af1e9;
    .top-title {
      width: 100%;
      text-align: center;
      margin-left: 85px;
      line-height: 22px;
    }
  }
  .planselectes {
    position: relative;
    margin-top: 13px;
    width: 153px;
    height: 20px;
    margin-right: 10px;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    background: #05488c;
    border-radius: 4px;
    :deep(.el-input__suffix) {
      display: none;
    }
    :deep(.el-input__inner) {
      padding: 0px;
      text-align: center;
      height: 20px;
      line-height: 20px;
      background: #05488c !important;
      font-size: 14px;
      color: #ffffff;
      border-radius: 4px;
      max-width: 100px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /*将小箭头的样式去去掉*/
    .el-icon-arrow-up:before {
      content: '';
    }
  }
  .content {
    height: 244px;
    .video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
  .el-select__caret :before {
    content: '';
  }
  /deep/ .el-loading-mask {
    background: transparent;
  }
}
</style>