使用ZLMRTCClient.j实现webRtc流播放

Vue 3 实战：基于 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 组件。该组件主要负责：

初始化播放器实例：配置 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>

3. 遇到的坑与解决方案

自动播放 (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使用也需要后端的配合哦.

posted @ 2026-01-08 14:26 此颜差矣。阅读(35) 评论(0) 收藏举报

刷新页面返回顶部

lijinhuaboke