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

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

收藏一下   不知道什么时候能用到

过来提前占个楼

过来提前占个楼

感谢分享，下载保存了，貌似很强大

用心讨论，共获提升！

不错，里面软件多更新就更好了

这个有用。

东西不错很实用谢谢分享

用心讨论，共获提升！

用心讨论，共获提升！

新版吗？好像是停更了吧。

收藏一下   不知道什么时候能用到

收藏一下   不知道什么时候能用到

谢谢分享，辛苦了

很好很强大  我过来先占个楼 待编辑

这个有用。

感谢分享，下载保存了，貌似很强大

感谢分享

感谢分享，学习下。