? 直播流程完整鏈路（基于 SRS + OBS + 前后端）
🧍?♂? 用戶操作流程：
? 用戶登錄系統（前端）
系統中校驗用戶身份（JWT 等）
后端可能校驗權限，比如“是否有開播資格”
? 用戶點擊“我要開播”
前端調用后端接口，例如：
POST /api/live/apply后端生成并返回推流地址 + 推流碼（Key）
示例返回：
{ "livePushUrl": "rtmp://your-srs-ip/live/room123", "livePushSecret": "abc123" // 有些平臺把推流碼單獨拆開 }
? 前端展示推流地址 + 推流碼
前端展示給用戶復制：
推流地址: rtmp://your-srs-ip/live 推流碼（StreamName）: room123?token=abc123
? 用戶打開 OBS
進入設置 > 推流
服務：自定義
推流地址：
rtmp://your-srs-ip/live串流密鑰（推流碼）：
room123?token=abc123
開始推流
📡 技術流程圖（你可以參考這個思維路徑）：
[用戶點擊我要開播]↓ [前端調用后端接口生成推流地址]↓ [后端生成 RTMP 地址和推流密鑰]↓ [前端展示推流地址+密鑰]↓ [用戶復制地址/密鑰到 OBS 開始推流]↓ [OBS 推流至 SRS 流媒體服務器]↓ [SRS 接收 RTMP 流并轉為 FLV/HLS 等格式]↓ [用戶/觀眾端 前端播放器（flv.js）拉取播放地址，播放視頻流]
🎬 觀眾端播放流程：
前端頁面通過
flv.js或video.js拉取播放地址，比如：http://your-srs-ip/live/room123.flv播放器組件
flv.js將流綁定在<video>標簽上用戶看到直播畫面
🧠 小貼士（進階要點）
| 環節 | 補充說明 |
|---|---|
| 推流地址 | 一般是 rtmp://ip/live/房間號，后面可附加簽名參數防盜鏈 |
| 推流碼（stream key） | 可作為 URL 的查詢參數，便于權限控制 |
| 播放地址 | 一般用 .flv 或 .m3u8，給前端播放器使用 |
| OBS | 只要填寫好推流地址和 key，就能推流成功 |
| SRS | 可配置是否開啟 flv/hls/webrtc 輸出，是否驗證簽名等 |
前端組件頁面
<template><div class="live-play-wrapper"><div class="player-header"><h2>直播播放</h2><p v-if="!url" class="error-text">?? 當前無有效直播地址</p></div><div class="player-container" v-if="url"><videoref="videoElement"id="videoElement"controlsautoplaymutedwidth="100%"height="100%"class="video-player"></video></div><div v-else class="no-url-placeholder"><p>請等待推流或聯系管理員開啟直播</p></div></div>
</template><script>
import flvjs from "flv.js";export default {name: "LivePlay",props: {url: {type: String,required: false,default: "",},},data() {return {flvPlayer: null,};},watch: {url(newUrl) {console.log("播放地址變化：", newUrl);this.destroyPlayer();if (newUrl) {this.initPlayer(newUrl);}},},mounted() {if (this.url) {this.initPlayer(this.url);}},beforeDestroy() {this.destroyPlayer();},methods: {initPlayer(playUrl) {if (flvjs.isSupported()) {const video = this.$refs.videoElement;this.flvPlayer = flvjs.createPlayer({type: "flv",url: playUrl,isLive: true,});this.flvPlayer.attachMediaElement(video);this.flvPlayer.load();this.flvPlayer.play().catch((err) => {console.error("播放失敗", err);});// 監聽播放錯誤this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {console.error("FLV 播放出錯", errType, errDetail);// 可選：自動重連// setTimeout(() => this.initPlayer(playUrl), 3000);});} else {console.warn("瀏覽器不支持 flv.js 播放");}},destroyPlayer() {if (this.flvPlayer) {this.flvPlayer.destroy();this.flvPlayer = null;}},},
};
</script><style scoped>
.live-play-wrapper {width: 100%;max-width: 960px;margin: 0 auto;padding: 20px;
}
.player-header {text-align: center;margin-bottom: 15px;
}
.error-text {color: red;font-weight: bold;
}
.player-container {border: 2px solid #ccc;border-radius: 10px;overflow: hidden;background: #000;height: 540px;
}
.video-player {width: 100%;height: 100%;background-color: #000;
}
.no-url-placeholder {text-align: center;font-size: 16px;color: #999;margin-top: 30px;
}
</style>
使用組件標簽
<LivePlay :url="'http://your-srs-server/live/room123.flv'" />
)
