使用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。
  
• 处理自动播放：解决浏览器禁止带音频自动播放的问题。
  
• 生命周期管理：组件销毁时正确关闭连接。
  

组件代码实现

1. <template>
2.   <video ref="video" :muted="muted" controls autoplay playsinline>
3.     您的浏览器不支持 HTML5 视频播放。
4.   </video>
5. </template>

复制代码

2. 播放器 Demo 页面实现

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

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

Demo 代码片段

1. <template>
2.   
3.    
4.       
5.         
6.          
7.         </a-form-item>
9.         
10.          
11.             开始播放</a-button>
12.             停止播放</a-button>
13.           </a-space>
14.         
16.         
17.          
18.             
19.               
20.             </a-form-item>
21.           </a-col>
22.          
23.             
24.               
25.             </a-form-item>
26.           </a-col>
27.            
28.             
29.               
30.             </a-form-item>
31.           </a-col>
32.          
33.             
34.               
35.             </a-form-item>
36.           </a-col>
37.          
38.             
39.               
40.             </a-form-item>
41.           </a-col>
42.         </a-row>
43.       </a-form>
45.       
46.         <WebRTCPlayer
47.           ref="playerRef"
48.           :zlmsdpUrl="formData.zlmsdpUrl"
49.           :debug="formData.debug"
50.           :recvOnly="formData.recvOnly"
51.           :audioEnable="formData.audioEnable"
52.           :videoEnable="formData.videoEnable"
53.           :muted="formData.muted"
54.           @connected="onConnected"
55.           @failed="onFailed"
56.           @closed="onClosed"
57.           @statechange="onStateChange"
58.         />
59.       
61.       
62.         
63.           {{ log }}
64.         
65.       </a-card>
66.     </a-card>
67.   
68. </template>

复制代码

3. 遇到的坑与解决方案

自动播放 (Autoplay) 问题

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

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

内存泄漏

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

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！