使用ZLMRTCClient.j实现webRtc流播放
<h1 id="vue3基于-zlmrtcclient-实现高性能-webrtc-流播放器">Vue3基于 ZLMRTCClient 实现高性能 WebRTC 流播放器</h1><p>之前文章有介绍过weRtc的应用参考这边文章：https://www.cnblogs.com/lijinhuaboke/p/19456259 后面发现一个更便捷的在现代webRtc提出播放器，都不用自己封装写方法，下载ZLMRTCClient.js直接用就行。就介绍如何在 Vue 3 项目中，利用 ZLMediaKit 提供的 <code>ZLMRTCClient.js</code> 库，封装一个健壮的 WebRTC 播放器组件，并实现一个功能完备的调试 Demo 页面,ZLMRTCClient.js 库的使用文档地地址：https://shiyzhang.github.io/ZLMRTCClient/，ZLMRTCClient.js 库的下载地址：http://my.zsyou.top/2024/ZLMRTCClient.js。</p>
<p>链接点不开的话可以复制一下在浏览器直接打开，那个ZLMRTCClient.js 库的使用文档的地址可能打开比较慢</p>
<h2 id="1-核心播放器组件封装-webrtcplayervue">1. 核心播放器组件封装 (<code>WebRTCPlayer.vue</code>)</h2>
<p>为了在项目中复用播放逻辑，我们首先封装一个 <code>WebRTCPlayer</code> 组件。该组件主要负责：</p>
<ol>
<li><strong>初始化播放器实例</strong>：配置 <code>ZLMRTCClient.Endpoint</code>。</li>
<li><strong>处理自动播放</strong>：解决浏览器禁止带音频自动播放的问题。</li>
<li><strong>生命周期管理</strong>：组件销毁时正确关闭连接。</li>
</ol>
<h3 id="组件代码实现">组件代码实现</h3>
<pre><code class="language-html"><script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
// 引入 ZLMRTCClient 库 (根据自行下载的路径修改)
import { ZLMRTCClient } from './ZLMRTCClient/ZLMRTCClient.js'
const props = defineProps({
zlmsdpUrl: { type: String, required: true }, // WebRTC 流地址
debug: { type: Boolean, default: true }, // 是否开启调试日志
recvOnly: { type: Boolean, default: true }, // 仅接收模式
audioEnable: { type: Boolean, default: true },
videoEnable: { type: Boolean, default: true },
muted: { type: Boolean, default: false }, // 是否静音
})
const emit = defineEmits(['connected', 'failed', 'closed', 'statechange'])
const video = ref<HTMLVideoElement | null>(null)
let player: any = null
function createPlayer() {
if (!video.value) return
// 初始化 ZLMRTCClient 端点
// @ts-ignore
player = new (ZLMRTCClient as any).Endpoint({
element: video.value, // 绑定 video 元素
debug: props.debug,
zlmsdpUrl: props.zlmsdpUrl,
simulcast: false,
useCamera: false,
audioEnable: props.audioEnable,
videoEnable: props.videoEnable,
recvOnly: props.recvOnly,
usedatachannel: false,
})
// 监听远程流事件
// @ts-ignore
player.on((ZLMRTCClient as any).Events.WEBRTC_ON_REMOTE_STREAMS, (s) => {
console.log(' 收到远程流')
if (video.value) {
video.value.srcObject = s
// 这里的 muted 属性非常关键，静音有助于自动播放成功
if (props.muted) {
video.value.muted = true
}
// 尝试自动播放逻辑
const playVideo = () => {
if (!video.value) return
video.value.play()
.then(() => console.log(' 自动播放成功'))
.catch(e => {
console.warn(' 自动播放失败，尝试静音播放:', e)
// 如果带声音播放失败，降级为静音播放
if (video.value) {
video.value.muted = true
video.value.play().catch(err => console.error(' 静音播放也失败:', err))
}
})
}
playVideo()
emit('connected')
}
})
// 错误处理
// @ts-ignore
player.on((ZLMRTCClient as any).Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => {
emit('failed', e)
})
// 状态变化
// @ts-ignore
player.on((ZLMRTCClient as any).Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (state) => {
emit('statechange', state)
})
}
function start() {
stop() // 先清理旧实例
createPlayer()
}
function stop() {
if (player) {
player.close()
player = null
}
// 清理 video srcObject
if (video.value) {
try {
;(video.value as any).srcObject = null
video.value.load()
} catch {}
}
emit('closed')
}
// 监听 URL 变化自动重播
watch(() => props.zlmsdpUrl, () => {
if (props.zlmsdpUrl) start()
})
onMounted(() => {
start()
})
onUnmounted(() => {
stop()
})
defineExpose({ start, stop })
</script>
<template>
<video ref="video" :muted="muted" controls autoplay playsinline>
您的浏览器不支持 HTML5 视频播放。
</video>
</template>
<style scoped>
video {
width: 100%;
height: 100%;
object-fit: fill; /* 充满容器 */
background-color: #000;
}
</style>
</code></pre>
<hr>
<h2 id="2-播放器-demo-页面实现">2. 播放器 Demo 页面实现</h2>
<p>封装好组件后，搞写一个 Demo 页面来测试功能。这个项目里使用了 Ant Design Vue 组件库，提供了地址输入、参数控制和日志展示功能。</p>
<h3 id="核心逻辑解析">核心逻辑解析</h3>
<ol>
<li><strong>参数配置</strong>：使用 <code>reactive</code> 管理 <code>zlmsdpUrl</code>、<code>debug</code>、<code>muted</code> 等播放参数。</li>
<li><strong>日志系统</strong>：实现了一个简单的 <code>addLog</code> 函数，将播放器的连接状态、错误信息实时展示在界面上，方便调试。</li>
<li><strong>手动控制</strong>：通过 <code>ref</code> 获取播放器组件实例，手动调用 <code>start()</code> 和 <code>stop()</code> 方法。</li>
</ol>
<h3 id="demo-代码片段">Demo 代码片段</h3>
<pre><code class="language-html"><script setup lang="ts">
import { ref, reactive } from 'vue'
import WebRTCPlayer from '@/components/Ljh/WebRTC/WebRTCPlayer.vue'
import { message } from 'ant-design-vue'
const playerRef = ref()
const formData = reactive({
// 换成你自己的服务器地址
zlmsdpUrl: 'http://127.0.0.1/index/api/webrtc?app=live&stream=test&type=play',
debug: true,
recvOnly: true,
audioEnable: true,
videoEnable: true,
muted: false,
})
const isPlaying = ref(false)
const logs = ref<string[]>([])
function addLog(msg: string) {
const time = new Date().toLocaleTimeString()
logs.value.unshift(`[${time}] ${msg}`)
if (logs.value.length > 50) logs.value.pop()
}
function handleStart() {
if (!formData.zlmsdpUrl) {
message.warning('请输入 WebRTC 地址')
return
}
if (playerRef.value) {
// WebRTCPlayer 组件内部 watch 了 zlmsdpUrl，变化会自动 start
// 这里手动调用 start 以防万一，或者用于重新开始
playerRef.value.start()
isPlaying.value = true
addLog('调用 start()')
}
}
function handleStop() {
if (playerRef.value) {
playerRef.value.stop()
isPlaying.value = false
addLog('调用 stop()')
}
}
// Event handlers
function onConnected() {
addLog('Connected: 连接成功')
message.success('连接成功')
isPlaying.value = true
}
function onFailed(e: any) {
addLog(`Failed: ${JSON.stringify(e)}`)
message.error('连接失败')
isPlaying.value = false
}
function onClosed() {
addLog('Closed: 连接关闭')
isPlaying.value = false
}
function onStateChange(state: any) {
addLog(`State Change: ${state}`)
}
</script>
<template>
<div class="webrtc-demo-container">
<a-card title="WebRTC 播放器 Demo" :bordered="false">
<a-form layout="vertical">
<a-form-item label="WebRTC 地址 (zlmsdpUrl)">
<a-input v-model:value="formData.zlmsdpUrl" placeholder="请输入 WebRTC 流地址 (例如: http://ip/index/api/webrtc?app=live&stream=test&type=play)" allow-clear />
</a-form-item>
<div class="controls">
<a-space>
<a-button type="primary" @click="handleStart">开始播放</a-button>
<a-button danger @click="handleStop">停止播放</a-button>
</a-space>
</div>
<a-row :gutter="16" class="settings-row">
<a-col :span="4">
<a-form-item label="静音 (Muted)">
<a-switch v-model:checked="formData.muted" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="调试模式 (Debug)">
<a-switch v-model:checked="formData.debug" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="仅接收 (RecvOnly)">
<a-switch v-model:checked="formData.recvOnly" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="启用音频 (Audio)">
<a-switch v-model:checked="formData.audioEnable" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="启用视频 (Video)">
<a-switch v-model:checked="formData.videoEnable" />
</a-form-item>
</a-col>
</a-row>
</a-form>
<div class="player-wrapper">
<WebRTCPlayer
ref="playerRef"
:zlmsdpUrl="formData.zlmsdpUrl"
:debug="formData.debug"
:recvOnly="formData.recvOnly"
:audioEnable="formData.audioEnable"
:videoEnable="formData.videoEnable"
:muted="formData.muted"
@connected="onConnected"
@failed="onFailed"
@closed="onClosed"
@statechange="onStateChange"
/>
</div>
<a-card title="日志" size="small" class="log-card">
<div class="logs">
<div v-for="(log, index) in logs" :key="index" class="log-item">{{ log }}</div>
</div>
</a-card>
</a-card>
</div>
</template>
<style scoped>
.webrtc-demo-container {
padding: 20px;
}
.controls {
margin-bottom: 20px;
}
.settings-row {
margin-bottom: 20px;
}
.player-wrapper {
width: 100%;
height: 500px;
background: #000;
margin-bottom: 20px;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.log-card {
margin-top: 20px;
}
.logs {
height: 200px;
overflow-y: auto;
background: #f5f5f5;
padding: 10px;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
}
.log-item {
border-bottom: 1px solid #e8e8e8;
padding: 4px 0;
word-break: break-all;
}
</style>
</code></pre>
<h2 id="3-遇到的坑与解决方案">3. 遇到的坑与解决方案</h2>
<h3 id="自动播放-autoplay-问题">自动播放 (Autoplay) 问题</h3>
<p>现代浏览器（尤其是 Chrome）对带音频的视频自动播放有严格限制。<br>
<strong>解决方案</strong>：<br>
在 <code>WebRTCPlayer.vue</code> 中，采用了“降级策略”：</p>
<ol>
<li>首先尝试直接调用 <code>video.play()</code>。</li>
<li>如果报错（通常是 <code>NotAllowedError</code>），捕获错误并将 <code>video.muted</code> 设置为 <code>true</code>。</li>
<li>再次尝试调用 <code>video.play()</code> 进行静音播放。</li>
</ol>
<h3 id="内存泄漏">内存泄漏</h3>
<p>WebRTC 连接如果不正确关闭，会占用大量网络端口和内存。<br>
<strong>解决方案</strong>：<br>
利用 Vue 的 <code>onUnmounted</code> 生命周期钩子，在组件销毁前强制调用 <code>player.close()</code>，并释放 <code><video></code> 元素的 <code>srcObject</code>。</p>
<h2 id="4-总结">4. 总结</h2>
<p>通过 Vue 3 结合 <code>ZLMRTCClient</code>，我们可以快速搭建起一个功能强大的 WebRTC 播放端。本文提供的 Demo 不仅展示了基础播放功能，还包含了完善的错误处理和日志机制，非常适合作为实际项目的开发参考。<br>
注意，ZLMRTCClient.js使用也需要后端的配合哦.</p><br><br>
来源：https://www.cnblogs.com/lijinhuaboke/p/19456554
頁:
[1]