直播:画质可选、只读 /live/info、弹幕 WS 透传;Nginx 弹幕路径

Made-with: Cursor
This commit is contained in:
whm
2026-03-26 10:07:49 +08:00
parent 6b3210f714
commit 106e6e1f16
11 changed files with 417 additions and 8 deletions

View File

@@ -10,6 +10,17 @@
<code>LIVE_PUBLIC_IP</code>服务器公网 IPv4与域名一致并配置 <code>LIVE_ICE_SERVERS</code> TURN
</p>
<p class="status">{{ status }}</p>
<div v-if="!session" class="quality-row">
<span class="quality-label">推流画质</span>
<el-select v-model="quality" style="width: 220px" :disabled="!token">
<el-option
v-for="o in qualityOptions"
:key="o.value"
:label="o.label"
:value="o.value"
/>
</el-select>
</div>
<div class="actions">
<el-button v-if="!session" type="primary" :disabled="!token" @click="start">开始直播</el-button>
<el-button v-else type="danger" @click="stop">结束直播</el-button>
@@ -23,7 +34,7 @@
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { useAuthStore } from '../../stores/auth'
import { startPublishing } from '../../utils/liveWebRTC'
import { startPublishing, LIVE_QUALITY_OPTIONS } from '../../utils/liveWebRTC'
const authStore = useAuthStore()
const token = computed(() => authStore.getToken() || '')
@@ -39,6 +50,7 @@ function start() {
status.value = '正在连接…'
const { stop } = startPublishing({
token: token.value,
quality: quality.value,
onStatus: (s) => {
status.value = s
},
@@ -96,6 +108,16 @@ onBeforeRouteLeave(() => {
margin-bottom: 12px;
min-height: 1.5em;
}
.quality-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.quality-label {
font-size: 14px;
color: #606266;
}
.actions {
margin-bottom: 16px;
}