当前位置：首页 > news >正文

使用ZLMRTCClient.j实现webRtc流播放

news 2026/4/9 2:00:40

1. 核心播放器组件封装 (`WebRTCPlayer.vue`)

为了在项目中复用播放逻辑，我们首先封装一个WebRTCPlayer组件。该组件主要负责：

初始化播放器实例：配置ZLMRTCClient.Endpoint。
处理自动播放：解决浏览器禁止带音频自动播放的问题。
生命周期管理：组件销毁时正确关闭连接。

组件代码实现

<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('[WebRTCPlayer] 收到远程流') 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('[WebRTCPlayer] 自动播放成功')) .catch(e => { console.warn('[WebRTCPlayer] 自动播放失败，尝试静音播放:', e) // 如果带声音播放失败，降级为静音播放 if (video.value) { video.value.muted = true video.value.play().catch(err => console.error('[WebRTCPlayer] 静音播放也失败:', 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>

2. 播放器 Demo 页面实现

封装好组件后，搞写一个 Demo 页面来测试功能。这个项目里使用了 Ant Design Vue 组件库，提供了地址输入、参数控制和日志展示功能。

核心逻辑解析

参数配置：使用reactive管理zlmsdpUrl、debug、muted等播放参数。
日志系统：实现了一个简单的addLog函数，将播放器的连接状态、错误信息实时展示在界面上，方便调试。
手动控制：通过ref获取播放器组件实例，手动调用start()和stop()方法。

Demo 代码片段

<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>