博客 / 詳情

返回

使用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 組件。該組件主要負責：

  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 = 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 組件庫，提供了地址輸入、參數控制和日誌展示功能。

核心邏輯解析

  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: '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 中，採用了“降級策略”：

  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使用也需要後端的配合哦.

前端
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.