Vue3基于 ZLMRTCClient 实现高性能 WebRTC 流播放器

之前文章有介绍过weRtc的应用参考这边文章： https://www.cnblogs.com/lijinhuaboke/p/19456259 后面发现一个更便捷的在现代webRtc提出播放器，都不用自己封装写方法，下载ZLMRTCClient.js直接用就行。就介绍如何在 Vue 3 项目中，利用 ZLMediaKit 提供的  ZLMRTCClient.js 库，封装一个健壮的 WebRTC 播放器组件，并实现一个功能完备的调试 Demo 页面,ZLMRTCClient.js 库的使用文档地地址： https://shiyzhang.github.io/ZLMRTCClient/，ZLMRTCClient.js 库的下载地址： http://my.zsyou.top/2024/ZLMRTCClient.js。

链接点不开的话可以复制一下在浏览器直接打开，那个ZLMRTCClient.js 库的使用文档的地址可能打开比较慢

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

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

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

组件代码实现

<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 = nullfunction 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 efrmrs.firstfeed.com.cn ).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 组件库，提供了地址输入、参数控制和日志展示功能。

核心逻辑解析

1. 参数配置：使用  reactive 管理  zlmsdpUrl、 debug、 muted 等播放参数。
2. 日志系统：实现了一个简单的  addLog 函数，将播放器的连接状态、错误信息实时展示在界面上，方便调试。
3. 手动控制：通过  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: 'mba.firstfeed.com.cn app=live&stream=test&type=play', 
  debug: true,  recvOnly: true,  audioEnable: true,  videoEnable: true,  muted: false,
})const isPlaying = ref(false)const logs = ref<string[uj84iz.firstfeed.com.cn]>([])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 handlersfunction onConnected(dy.firstfeed.com.cn) {  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) { scopsr.gov.cn.firstfeed.com.cn 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>

3. 遇到的坑与解决方案

自动播放 (Autoplay) 问题

现代浏览器（尤其是 Chrome）对带音频的视频自动播放有严格限制。
解决方案：
在  WebRTCPlayer.vue 中，采用了“降级策略”：

1. 首先尝试直接调用  video.play()。
2. 如果报错（通常是  NotAllowedError），捕获错误并将  video.muted 设置为  true。
3. 再次尝试调用  video.play() 进行静音播放。

内存泄漏

WebRTC 连接如果不正确关闭，会占用大量网络端口和内存。
解决方案：
利用 Vue 的  onUnmounted 生命周期钩子，在组件销毁前强制调用  player.close()，并释放  <video> 元素的  srcObject。

4. 总结

通过 Vue 3 结合  ZLMRTCClient，我们可以快速搭建起一个功能强大的 WebRTC 播放端。本文提供的 Demo 不仅展示了基础播放功能，还包含了完善的错误处理和日志机制，非常适合作为实际项目的开发参考。
注意，ZLMRTCClient.js使用也需要后端的配合