前端在浏览器显示摄像头传回的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接收实时更新
-
安装WebSocket客户端库: 首先，确保你的项目中安装了WebSocket客户端库，如
socket.io-client。npm install socket.io-client -
建立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，使用轮询方式在前端进行定期检查和更新的功能。记得根据实际应用场景调整轮询间隔，避免过于频繁的请求导致服务器压力。
