最近項目中需要對接攝像頭監控，海康攝像頭為rtsp流格式
有一個軟件VLC media player，可以在線進行rtsp或者rtmp流播放，可用來測試流地址是否可用
功能實現思路為后臺通過fmpeg把rtsp流進行轉碼，然后通過ws方式進行一幀一幀推送。（還有一種時后臺通過fmpeg轉為hls格式，但是這樣會在項目中生產一張張圖片，所以我們沒有考慮）
首先后臺我先使用node進行了一個測試dme，網上找了一個測試的rtmp地址：
rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid? //好像是個游戲直播
const { spawn } = require('child_process');
const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 9999 });wss.on('connection', (ws) => {console.log('WebSocket 客戶端連接');// 關鍵修改1：使用完整FFmpeg路徑（避免環境變量問題）const ffmpegPath = 'D:\\rj\\ffmpeg\\bin\\ffmpeg.exe'; // 自己電腦的ffmpeg地址，自行更換確保路徑存在// 關鍵修改2：簡化參數（移除可能沖突的選項）const args = ['-i', 'rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid', //網上的游戲直播地址'-f', 'mpegts','-codec:v', 'mpeg1video','-'];// // rtsp的配置,和rtp略有區別
// const args= [
// '-rtsp_transport', 'tcp', // 強制TCP傳輸
// '-timeout', '5000000', // 5秒超時
// '-re', // 按原始速率讀取
// '-i', 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4',
// '-f', 'mpegts',
// '-codec:v', 'mpeg1video', // JSMpeg兼容編碼
// '-b:v', '800k', // 視頻比特率
// '-r', '25', // 幀率
// '-vf', 'scale=640:480', // 分辨率縮放
// '-preset', 'ultrafast', // 最快編碼預設
// '-fflags', 'nobuffer', // 減少緩沖
// '-'
// ]// 關鍵修改3：顯式傳遞環境變量const env = { ...process.env, PATH: process.env.PATH }; // 繼承當前環境const ffmpeg = spawn(ffmpegPath, args, { env: env,stdio: ['ignore', 'pipe', 'pipe'] // 忽略stdin，捕獲stdout/stderr});// 打印FFmpeg日志（調試用）ffmpeg.stderr.on('data', (data) => {console.log('[FFmpeg]', data.toString());});// 轉發數據到WebSocketffmpeg.stdout.on('data', (data) => {if (ws.readyState === ws.OPEN) {ws.send(data, { binary: true });}});ws.on('close', () => {ffmpeg.kill('SIGTERM');});
});代碼寫完后通過node運行
前端在vue中采用? ?@cycjimmy/jsmpeg-player 或者?vue-jsmpeg-player，關于這點，因為vue-jsmpeg-player必須要求vue?2.6.12 以上，版本地低的話有問題，我這邊采用@cycjimmy/jsmpeg-player
1.使用@cycjimmy/jsmpeg-player
npm install?@cycjimmy/jsmpeg-player
npm下載安裝后新建一個播放直播流的vue組件，代碼如下
<template><div class="video-player"><!-- 視頻畫布容器 --><div class="video-container" ref="videoContainer"><canvas ref="videoCanvas" class="video-canvas"></canvas><!-- 加載狀態 --><div v-if="isLoading" class="loading-overlay"><div class="spinner"></div><p class="loading-text">加載中...</p></div><!-- 錯誤提示 --><div v-if="hasError" class="error-overlay"><p class="error-text">無法加載視頻流，請檢查連接</p><button @click="reloadPlayer" class="reload-btn">重新加載</button></div></div><!-- 控制欄 --><div class="controls-bar"><div class="controls-group"><!-- 播放/暫停按鈕 --><button class="control-btn" @click="togglePlay":title="isPlaying ? '暫停' : '播放'"><i class="fas" :class="isPlaying ? 'fa-pause' : 'fa-play'"></i></button><!-- 音量控制 --><div class="volume-control"><button class="control-btn volume-btn"@click="toggleMute":title="isMuted ? '取消靜音' : '靜音'"><i class="fas" :class="isMuted ? 'fa-volume-mute' : 'fa-volume-up'"></i></button><inputtype="range"min="0"max="100"v-model="volume"@input="setVolume"class="volume-slider":title="`音量: ${volume}%`"></div></div><div class="controls-group"><!-- 全屏按鈕 --><button class="control-btn" @click="toggleFullscreen":title="isFullscreen ? '退出全屏' : '進入全屏'"><i class="fas" :class="isFullscreen ? 'fa-compress' : 'fa-expand'"></i></button></div></div></div>
</template><script>
import JSMpeg from '@cycjimmy/jsmpeg-player';export default {name: 'VideoPlayer',props: {// 視頻流地址streamUrl: {type: String,required: true,default: 'ws://localhost:9999' //node后臺1的ws地址},// 封面圖poster: {type: String,default: ''}},data() {return {player: null,isPlaying: false,volume: 80,isMuted: false,isFullscreen: false,isLoading: true,hasError: false};},mounted() {this.initPlayer();this.addEventListeners();},beforeUnmount() {this.destroyPlayer();this.removeEventListeners();},methods: {// 初始化播放器initPlayer() {this.isLoading = true;this.hasError = false;try {this.player = new JSMpeg.Player(this.streamUrl, {canvas: this.$refs.videoCanvas,autoplay: false,loop: false,controls: false,poster: this.poster,decodeFirstFrame: true,volume: this.volume / 100,// 事件回調onPlay: () => {this.isPlaying = true;this.isLoading = false;},onPause: () => {this.isPlaying = false;},onEnded: () => {this.isPlaying = false;},onError: () => {this.hasError = true;this.isLoading = false;this.isPlaying = false;}});} catch (error) {console.error('播放器初始化失敗:', error);this.hasError = true;this.isLoading = false;}},// 銷毀播放器destroyPlayer() {if (this.player) {this.player.destroy();this.player = null;}},// 重新加載播放器reloadPlayer() {this.destroyPlayer();this.initPlayer();},// 切換播放/暫停togglePlay() {if (!this.player) return;if (this.isPlaying) {this.player.pause();} else {// 處理瀏覽器自動播放限制this.player.play().catch(err => {console.warn('自動播放失敗，需要用戶交互:', err);this.showPlayPrompt();});}},// 顯示播放提示（用于自動播放限制）showPlayPrompt() {const container = this.$refs.videoContainer;const prompt = document.createElement('div');prompt.className = 'play-prompt';prompt.innerHTML = '<i class="fas fa-play"></i><p>點擊播放</p>';container.appendChild(prompt);prompt.addEventListener('click', () => {this.player.play();container.removeChild(prompt);}, { once: true });},// 切換靜音toggleMute() {if (!this.player) return;this.isMuted = !this.isMuted;this.player.volume = this.isMuted ? 0 : this.volume / 100;},// 設置音量setVolume() {if (!this.player) return;this.isMuted = this.volume === 0;this.player.volume = this.volume / 100;},// 切換全屏toggleFullscreen() {const container = this.$refs.videoContainer;if (!document.fullscreenElement) {container.requestFullscreen().catch(err => {console.error(`全屏錯誤: ${err.message}`);});this.isFullscreen = true;} else {if (document.exitFullscreen) {document.exitFullscreen();this.isFullscreen = false;}}},// 監聽全屏狀態變化handleFullscreenChange() {this.isFullscreen = !!document.fullscreenElement;},// 添加事件監聽器addEventListeners() {document.addEventListener('fullscreenchange', this.handleFullscreenChange);},// 移除事件監聽器removeEventListeners() {document.removeEventListener('fullscreenchange', this.handleFullscreenChange);}}
};
</script><style scoped>
.video-player {position: relative;width: 100%;max-width: 1200px;margin: 0 auto;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}.video-container {position: relative;width: 100%;background-color: #000;aspect-ratio: 16 / 9; /* 保持視頻比例 */
}.video-canvas {width: 100%;height: 100%;object-fit: contain;
}/* 加載狀態 */
.loading-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.5);color: white;z-index: 10;
}.spinner {width: 40px;height: 40px;border: 4px solid rgba(255, 255, 255, 0.3);border-radius: 50%;border-top: 4px solid white;animation: spin 1s linear infinite;margin-bottom: 16px;
}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}.loading-text {font-size: 16px;font-weight: 500;
}/* 錯誤提示 */
.error-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.7);color: white;z-index: 10;padding: 20px;text-align: center;
}.error-text {font-size: 16px;margin-bottom: 20px;max-width: 400px;
}.reload-btn {background-color: #42b983;color: white;border: none;padding: 8px 16px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: background-color 0.2s;
}.reload-btn:hover {background-color: #359e75;
}/* 播放提示 */
::v-deep .play-prompt {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.5);color: white;z-index: 9;cursor: pointer;
}::v-deep .play-prompt i {font-size: 48px;margin-bottom: 16px;transition: transform 0.2s;
}::v-deep .play-prompt:hover i {transform: scale(1.1);
}/* 控制欄 */
.controls-bar {display: flex;justify-content: space-between;align-items: center;padding: 12px 20px;background-color: #1a1a1a;color: white;
}.controls-group {display: flex;align-items: center;gap: 16px;
}.control-btn {background: none;border: none;color: white;font-size: 18px;cursor: pointer;width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: background-color 0.2s;
}.control-btn:hover {background-color: rgba(255, 255, 255, 0.15);
}/* 音量控制 */
.volume-control {display: flex;align-items: center;gap: 8px;
}.volume-slider {width: 100px;height: 4px;-webkit-appearance: none;background: rgba(255, 255, 255, 0.2);border-radius: 2px;outline: none;
}.volume-slider::-webkit-slider-thumb {-webkit-appearance: none;width: 14px;height: 14px;border-radius: 50%;background: white;cursor: pointer;transition: transform 0.1s;
}.volume-slider::-webkit-slider-thumb:hover {transform: scale(1.2);
}/* 響應式調整 */
@media (max-width: 768px) {.controls-bar {padding: 8px 12px;}.controls-group {gap: 8px;}.control-btn {font-size: 16px;width: 32px;height: 32px;}.volume-slider {width: 80px;}
}
</style>
然后在父組件中引入使用就可以了。
2.使用?vue-jsmpeg-player
npm i?vue-jsmpeg-player@1.1.0-beta
安裝后在main.js全局引入：
import JSMpegPlayer from 'vue-jsmpeg-player';
import 'vue-jsmpeg-player/dist/jsmpeg-player.css';Vue.use(JSMpegPlayer)然后新建vue組件：
<template><div><jsmpeg-player :url="url" /></div>
</template><script>
export default {components: {},data() {return {//后臺轉發的ws地址url: "ws://10.10.10.113:9999", //后臺ws地址};},computed: {},mounted() {// jsmpeg-player組件的使用說明// url string 視頻流地址(推薦websocket，實際上jsmpeg.js原生也支持http方式，但沒有經過測試)// title string 播放器標題// no-signal-text string 無信號時的顯示文本// options object jsmpeg原生選項，直接透傳，詳見下表// closeable boolean 是否可關閉（單擊關閉按鈕，僅拋出事件）// in-background boolean 是否處于后臺，如el-tabs的切換，路由的切換等，支持.sync修飾符// show-duration boolean 是否現實持續播放時間// default-mute boolean 默認靜音// with-toolbar boolean 是否需要工具欄// loading-text boolean 加載時的文本，默認為：拼命加載中},beforeDestroy() {},methods: {},
};
</script><style lang="scss">
</style>
