通过画布（Canvas）实现 ZLMRTCClient 同一视频流多次显示时只拉取一次

效果预览

视频画面

网络请求

代码实现

ZLMRTCClient.js

当前使用的版本：
1.0.1 Mon Mar 27 2023 19:11:59 GMT+0800

首先需要修改 ZLMRTCClient.js 的代码，解决由于网络导致播放失败时无法触发 WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED 事件的问题。
修改前：

修改后：

修改内容：

1. // 添加 catch()
2. axios({
3. }).then(() => {
4. }).catch(() => {
5.   // 网络异常时触发事件
6.   this.dispatch(Events$1.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, null);
7. });

复制代码

video-preview.js

1. // 2024-05-30 初始版本
2. // 2024-06-06 优化视频是否存在调用检测方式
3. // 2025-01-08 优化逻辑，减少定时器的使用
5. import { v4 as uuidv4 } from 'uuid';
7. /**
8. * @typedef  CacheItem
9. * @property {string}           id         缓存项唯一 ID
10. * @property {HTMLElement|null} element    Video 元素
11. * @property {boolean}          isStopped  是否为主动停止播放
12. * @property {ZLMPlayer|null}   player     ZLM 播放器对象
13. * @property {number}           timeCheck  最后一次检测关联画布的时间戳
14. * @property {number}           timeResize 最后一次更新分辨率的时间戳
15. * @property {number}           timeRender 最后一次渲染的时间戳
16. * @property {boolean}          willStop   是否没有关联的画布，在下一次停止播放
17. */
19. /** @typedef {InstanceType<typeof ZLMRTCClient.Endpoint>} ZLMPlayer */
21. /** 检测视频是否存在调用间隔 */
22. const INTERVAL_CHECK_VIDEO = 10000;
24. /** 画布渲染间隔 */
25. const INTERVAL_RENDER = 100;
27. /** 画布分辨率更新间隔 */
28. const INTERVAL_RESIZE = 1000;
30. /** 循环处理间隔 */
31. const INTERVAL_TIME = 100;
33. /** 模块名称 */
34. const PREFIX = '[video-preview]';
36. /** 重新播放间隔 */
37. const RESTART_TIMEOUT = 2000;
39. /** ZLM 客户端 */
40. const ZLMRTCClient = window.ZLMRTCClient;
42. /** 循环检测定时器 */
43. let loopTimer = null;
45. /**
46. * @desc 缓存信息列表
47. * @type {Record<string, CacheItem | null>}
48. */
49. export const cacheList = {};
51. /**
52. * @description 初始化播放器
53. * @param {string} url 视频流地址
54. */
55. function initPlayer(url = '') {
56.   try {
58.     if (!url) {
59.       throw new Error('缺少 url 参数');
60.     }
62.     /**
63.      * @description 初始化 & 更新数据
64.      * @param {CacheItem} cache
65.      */
66.     let fnInit = (cache) => {
68.       // 创建 video 元素
69.       let element = document.createElement('video');
71.       // 开启自动播放
72.       // 注：不能用 `setAttribute`，否则没效果
73.       element.autoplay = true;
74.       element.controls = false;
75.       element.muted = true;
77.       // 标记缓存 ID
78.       element.setAttribute('data-video-id', cache.id);
80.       // 添加到页面，否则无法播放
81.       element.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 0; height: 0');
82.       document.body.appendChild(element);
84.       // 初始化播放器
85.       let player = new ZLMRTCClient.Endpoint({
86.         // video 标签
87.         element: element,
88.         // 是否打印日志
89.         debug: false,
90.         // 流地址
91.         zlmsdpUrl: url,
92.         // 功能开关
93.         audioEnable: false,
94.         simulcast: false,
95.         useCamera: false,
96.         videoEnable: true,
97.         // 仅查看，不推流
98.         recvOnly: true,
99.         // 推流分辨率
100.         resolution: { w: 1280, h: 720 },
101.         // 文本收发
102.         // https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send
103.         usedatachannel: false,
104.       });
106.       // // 监听事件：ICE 协商出错
107.       // player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function () {
108.       //   console.error(PREFIX, 'ICE 协商出错')
109.       // });
111.       // 监听事件：获取到了远端流，可以播放
112.       player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (event) {
113.         console.log(PREFIX, '播放成功', event.streams);
114.       });
116.       // 监听事件：offer anwser 交换失败
117.       player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (event) {
119.         console.error(PREFIX, 'offer anwser 交换失败', event);
121.         // 当前没有主动停止
122.         if (!cache.isStopped) {
123.           // 停止播放
124.           stopPlayer(player, element);
125.           // 重新播放
126.           setTimeout(() => {
127.             fnInit(cache);
128.           }, RESTART_TIMEOUT);
129.         }
131.       });
133.       // 监听事件：RTC 状态变化
134.       player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (state) {
136.         console.log(PREFIX, 'RTC 状态变化', state);
138.         // 状态为已断开
139.         if (state === 'disconnected' && !cache.isStopped) {
140.           // 停止播放
141.           stopPlayer(player, element);
142.           // 重新播放
143.           setTimeout(() => {
144.             fnInit(cache);
145.           }, RESTART_TIMEOUT);
146.         }
148.       });
150.       cache.element = element;
151.       cache.player = player;
153.     };
155.     let cacheItem = cacheList[url];
157.     if (cacheItem) {
158.       return cacheItem;
159.     } else {
160.       cacheItem = {
161.         id: uuidv4(),
162.         element: null,
163.         isStopped: false,
164.         player: null,
165.         timeCheck: 0,
166.         timeRender: 0,
167.         timeResize: 0,
168.         willStop: false,
169.       };
170.     }
172.     console.log(PREFIX, '初始化', cacheItem);
174.     // 初始化
175.     fnInit(cacheItem);
177.     // 添加缓存信息
178.     cacheList[url] = cacheItem;
180.     return cacheItem;
182.   } catch (error) {
183.     console.error(PREFIX, '初始化播放器失败：');
184.     console.error(error);
185.     return null;
186.   }
187. }
189. /**
190. * @description 停止播放
191. * @param {ZLMPlayer}        player
192. * @param {HTMLVideoElement} element
193. */
194. function stopPlayer(player, element) {
195.   try {
197.     if (player) {
198.       console.debug(PREFIX, 'stopPlayer - 停止播放');
199.       player.close();
200.     }
202.     if (element instanceof HTMLVideoElement) {
203.       console.debug(PREFIX, 'stopPlayer - 移除元素');
204.       element.remove();
205.     }
207.     return true;
209.   } catch (error) {
210.     console.error(PREFIX, '停止播放失败：');
211.     console.error(error);
212.     return false;
213.   }
214. }
216. /**
217. * @description 获取视频画面 canvas
218. * @param {string} url
219. */
220. export function getVideoCanvas(url = '') {
221.   try {
223.     if (!url) {
224.       throw new Error('缺少 url 参数');
225.     }
227.     let cacheItem = initPlayer(url);
228.     let canvas = document.createElement('canvas');
230.     if (cacheItem) {
231.       // 标记缓存 ID
232.       canvas.setAttribute('data-cache-id', cacheItem.id);
233.     } else {
234.       throw new Error('获取缓存数据失败');
235.     }
237.     // 背景填充
238.     canvas.style.backgroundPosition = 'center center';
239.     canvas.style.backgroundSize = '100% 100%';
241.     return canvas;
243.   } catch (error) {
244.     console.error(PREFIX, '获取 canvas 失败：');
245.     console.error(error);
246.     return null;
247.   }
248. }
250. /** 开始循环处理视频 */
251. export function timerStart() {
252.   timerStop();
253.   loopTimer = setInterval(() => {
255.     for (let url in cacheList) {
257.       let cacheItem = cacheList[url];
258.       let currTime = Date.now();
260.       if (!cacheItem) {
261.         continue;
262.       }
264.       let cacheId = cacheItem.id;
265.       let videoElement = cacheItem.element;
267.       /**
268.        * @desc 画布元素列表
269.        * @type {NodeListOf<HTMLCanvasElement>}
270.        */
271.       let canvasList = document.querySelectorAll(`[data-cache-id="${cacheId}"]`);
272.       let foundCanvas = canvasList.length > 0;
274.       // 渲染画面
275.       if (currTime - cacheItem.timeRender >= INTERVAL_RENDER) {
276.         cacheItem.timeRender = currTime;
277.         canvasList.forEach((canvas) => {
279.           let ctx = canvas.getContext('2d');
280.           let cWidth = canvas.width;
281.           let cHeight = canvas.height;
283.           if (document.contains(videoElement)) {
284.             ctx.drawImage(videoElement, 0, 0, cWidth, cHeight);
285.           }
287.           canvas.style.backgroundImage = '';
289.         });
290.       }
292.       // 更新画布分辨率
293.       if (currTime - cacheItem.timeResize >= INTERVAL_RESIZE) {
294.         cacheItem.timeResize = currTime;
295.         canvasList.forEach((canvas) => {
297.           let parent = canvas.parentElement;
298.           let rect = parent ? parent.getBoundingClientRect() : null;
300.           if (rect) {
302.             let cWidth = Math.round(canvas.width);
303.             let cHeight = Math.round(canvas.height);
305.             let rWidth = Math.round(rect.width);
306.             let rHeight = Math.round(rect.height);
308.             if (cWidth !== rWidth || cHeight !== rHeight) {
309.               // 更新画布分辨率前将画面设置为背景，防止闪烁
310.               canvas.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
311.               // 更新画布分辨率（将会自动清空画布内容）
312.               canvas.width = rWidth;
313.               canvas.height = rHeight;
314.             }
316.           }
318.         });
319.       }
321.       // 检测是否存在与视频关联的画布
322.       if (currTime - cacheItem.timeCheck >= INTERVAL_CHECK_VIDEO) {
324.         cacheItem.timeCheck = currTime;
326.         // 当前存在关联的画布，不处理
327.         if (foundCanvas) {
328.           cacheItem.willStop = false;
329.           return;
330.         }
332.         // 若当前不存在关联的画布，检测上一次的查找结果
333.         if (cacheItem.willStop) {
334.           console.debug(PREFIX, '视频没有被调用，停止播放', { url });
335.           cacheItem.isStopped = true;
336.           stopPlayer(cacheItem.player, cacheItem.element);
337.           cacheList[url] = null;
338.         } else {
339.           cacheItem.willStop = true;
340.         }
342.       }
344.     }
346.   }, INTERVAL_TIME);
347. }
349. /** 停止循环处理视频 */
350. export function timerStop() {
351.   if (loopTimer) {
352.     clearInterval(loopTimer);
353.     loopTimer = null;
354.   }
355. }

复制代码

使用时只需要调用 getVideoCanvas() 获取 canvas，然后插入到 DOM 即可，画布会自适应父元素宽高。

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