使用ZLMRTCClient.j实现webRtc流播放

1. 核心播放器组件封装 (WebRTCPlayer.vue)为了在项目中复用播放逻辑我们首先封装一个WebRTCPlayer组件。该组件主要负责初始化播放器实例配置ZLMRTCClient.Endpoint。处理自动播放解决浏览器禁止带音频自动播放的问题。生命周期管理组件销毁时正确关闭连接。组件代码实现script setup langts 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 refHTMLVideoElement | 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 refvideo :mutedmuted controls autoplay playsinline 您的浏览器不支持 HTML5 视频播放。 /video /template style scoped video { width: 100%; height: 100%; object-fit: fill; /* 充满容器 */ background-color: #000; } /style2. 播放器 Demo 页面实现封装好组件后搞写一个 Demo 页面来测试功能。这个项目里使用了 Ant Design Vue 组件库提供了地址输入、参数控制和日志展示功能。核心逻辑解析参数配置使用reactive管理zlmsdpUrl、debug、muted等播放参数。日志系统实现了一个简单的addLog函数将播放器的连接状态、错误信息实时展示在界面上方便调试。手动控制通过ref获取播放器组件实例手动调用start()和stop()方法。Demo 代码片段script setup langts 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?applivestreamtesttypeplay, debug: true, recvOnly: true, audioEnable: true, videoEnable: true, muted: false, }) const isPlaying ref(false) const logs refstring[]([]) 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 classwebrtc-demo-container a-card titleWebRTC 播放器 Demo :borderedfalse a-form layoutvertical a-form-item labelWebRTC 地址 (zlmsdpUrl) a-input v-model:valueformData.zlmsdpUrl placeholder请输入 WebRTC 流地址 (例如: http://ip/index/api/webrtc?applivestreamtesttypeplay) allow-clear / /a-form-item div classcontrols a-space a-button typeprimary clickhandleStart开始播放/a-button a-button danger clickhandleStop停止播放/a-button /a-space /div a-row :gutter16 classsettings-row a-col :span4 a-form-item label静音 (Muted) a-switch v-model:checkedformData.muted / /a-form-item /a-col a-col :span4 a-form-item label调试模式 (Debug) a-switch v-model:checkedformData.debug / /a-form-item /a-col a-col :span4 a-form-item label仅接收 (RecvOnly) a-switch v-model:checkedformData.recvOnly / /a-form-item /a-col a-col :span4 a-form-item label启用音频 (Audio) a-switch v-model:checkedformData.audioEnable / /a-form-item /a-col a-col :span4 a-form-item label启用视频 (Video) a-switch v-model:checkedformData.videoEnable / /a-form-item /a-col /a-row /a-form div classplayer-wrapper WebRTCPlayer refplayerRef :zlmsdpUrlformData.zlmsdpUrl :debugformData.debug :recvOnlyformData.recvOnly :audioEnableformData.audioEnable :videoEnableformData.videoEnable :mutedformData.muted connectedonConnected failedonFailed closedonClosed statechangeonStateChange / /div a-card title日志 sizesmall classlog-card div classlogs div v-for(log, index) in logs :keyindex classlog-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; } /style3. 遇到的坑与解决方案自动播放 (Autoplay) 问题现代浏览器尤其是 Chrome对带音频的视频自动播放有严格限制。解决方案在WebRTCPlayer.vue中采用了“降级策略”首先尝试直接调用video.play()。如果报错通常是NotAllowedError捕获错误并将video.muted设置为true。再次尝试调用video.play()进行静音播放。内存泄漏WebRTC 连接如果不正确关闭会占用大量网络端口和内存。解决方案利用 Vue 的onUnmounted生命周期钩子在组件销毁前强制调用player.close()并释放video元素的srcObject。4. 总结通过 Vue 3 结合ZLMRTCClient我们可以快速搭建起一个功能强大的 WebRTC 播放端。本文提供的 Demo 不仅展示了基础播放功能还包含了完善的错误处理和日志机制非常适合作为实际项目的开发参考。注意ZLMRTCClient.js使用也需要后端的配合哦.