通过画布（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. // 初始版本
4. /**
5. * @typedef  CacheItem
6. * @property {HTMLElement | null} element
7. * @property {ZLMPlayer | null} player
8. * @property {number} usedAt
9. */
11. /** @typedef {InstanceType<typeof ZLMRTCClient.Endpoint>} ZLMPlayer */
13. /** 画布渲染间隔 */
14. const INTERVAL_RENDER = 100;
16. /** 画布分辨率更新间隔 */
17. const INTERVAL_RESIZE = 1000;
19. /** 检测画布是否在页面上间隔 */
20. const INTERVAL_WATCH_CANVAS = 1000;
22. /** 检测视频是否存在调用间隔 */
23. const INTERVAL_WATCH_VIDEO = 20000;
25. /** 模块名称 */
26. const PREFIX = '[video-preview]';
28. /** 重新播放间隔 */
29. const RESTART_TIMEOUT = 2000;
31. /** ZLM 客户端 */
32. const ZLMRTCClient = window.ZLMRTCClient;
34. /**
35. * @desc 缓存信息列表
36. * @type {Record<string, CacheItem | null>}
37. */
38. export const cacheList = {};
40. /**
41. * @description 初始化播放器
42. * @param {string} url 视频流地址
43. */
44. function initPlayer(url = '') {
45.   try {
47.     if (!url) {
48.       throw new Error('缺少 url 参数');
49.     }
51.     /** 是否主动停止播放 */
52.     let isStoped = false;
54.     /**
55.      * @description 初始化 & 更新数据
56.      * @param {CacheItem} cache
57.      */
58.     let fnInit = (cache) => {
60.       let element = document.createElement('video');
62.       // 开启自动播放
63.       // 注：不能用 `setAttribute`，否则没效果
64.       element.autoplay = true;
65.       element.controls = false;
66.       element.muted = true;
68.       // 添加到页面，否则无法播放
69.       element.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 0; height: 0');
70.       document.body.appendChild(element);
72.       let player = new ZLMRTCClient.Endpoint({
73.         // video 标签
74.         element: element,
75.         // 是否打印日志
76.         debug: false,
77.         // 流地址
78.         zlmsdpUrl: url,
79.         // 功能开关
80.         audioEnable: false,
81.         simulcast: false,
82.         useCamera: false,
83.         videoEnable: true,
84.         // 仅查看，不推流
85.         recvOnly: true,
86.         // 推流分辨率
87.         resolution: { w: 1280, h: 720 },
88.         // 文本收发
89.         // https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send
90.         usedatachannel: false,
91.       });
93.       // // 监听事件：ICE 协商出错
94.       // player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function () {
95.       //   console.error(PREFIX, 'ICE 协商出错')
96.       // });
98.       // 监听事件：获取到了远端流，可以播放
99.       player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (event) {
100.         console.log(PREFIX, '播放成功', event.streams);
101.       });
103.       // 监听事件：offer anwser 交换失败
104.       player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (event) {
106.         console.error(PREFIX, 'offer anwser 交换失败', event);
108.         // 当前没有主动停止
109.         if (!isStoped) {
110.           // 停止播放
111.           stopPlayer(player, element);
112.           // 重新播放
113.           setTimeout(() => {
114.             fnInit(cache);
115.           }, RESTART_TIMEOUT);
116.         }
118.       });
120.       // 监听事件：RTC 状态变化
121.       player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (state) {
123.         console.log(PREFIX, 'RTC 状态变化', state);
125.         // 状态为已断开
126.         if (state === 'disconnected' && !isStoped) {
127.           // 停止播放
128.           stopPlayer(player, element);
129.           // 重新播放
130.           setTimeout(() => {
131.             fnInit(cache);
132.           }, RESTART_TIMEOUT);
133.         }
135.       });
137.       cache.element = element;
138.       cache.player = player;
139.       cache.usedAt = Date.now();
141.     };
143.     let cacheItem = cacheList[url];
145.     if (cacheItem) {
146.       return cacheItem;
147.     } else {
148.       cacheItem = {};
149.     }
151.     console.log(PREFIX, '初始化', cacheItem);
153.     // 初始化
154.     fnInit(cacheItem);
156.     // 添加缓存信息
157.     cacheList[url] = cacheItem;
159.     // 监听调用情况
160.     let watchTimer = setInterval(() => {
162.       let currTime = Date.now();
163.       let lastTime = cacheItem.usedAt;
165.       // 一段时间内没有被调用，停止播放
166.       if (currTime - lastTime > INTERVAL_WATCH_VIDEO) {
167.         console.debug(PREFIX, '视频没有被调用，停止播放', { url });
168.         isStoped = true;
169.         stopPlayer(cacheItem.player, cacheItem.element);
170.         cacheList[url] = null;
171.         clearInterval(watchTimer);
172.       }
174.     }, INTERVAL_WATCH_VIDEO);
176.     return cacheItem;
178.   } catch (error) {
179.     console.error(PREFIX, '初始化播放器失败：');
180.     console.error(error);
181.     return null;
182.   }
183. }
185. /**
186. * @description 停止播放
187. * @param {ZLMPlayer}        player
188. * @param {HTMLVideoElement} element
189. */
190. function stopPlayer(player, element) {
191.   try {
193.     if (player) {
194.       console.debug(PREFIX, 'stopPlayer - 停止播放');
195.       player.close();
196.     }
198.     if (element instanceof HTMLVideoElement) {
199.       console.debug(PREFIX, 'stopPlayer - 移除元素');
200.       element.remove();
201.     }
203.     return true;
205.   } catch (error) {
206.     console.error(PREFIX, '停止播放失败：');
207.     console.error(error);
208.     return false;
209.   }
210. }
212. /**
213. * @description 获取视频画面 canvas
214. * @param {string} url
215. */
216. export function getVideoCanvas(url = '') {
217.   try {
219.     if (!url) {
220.       throw new Error('缺少 url 参数');
221.     }
223.     let cacheItem = initPlayer(url);
224.     let canvas = document.createElement('canvas');
225.     let ctx = canvas.getContext('2d');
227.     // 背景填充
228.     canvas.style.backgroundPosition = 'center center';
229.     canvas.style.backgroundSize = '100% 100%';
231.     /** 更新画布分辨率 */
232.     let fnResize = () => {
234.       let parent = canvas.parentElement;
235.       let rect = parent ? parent.getBoundingClientRect() : null;
237.       if (rect) {
239.         let cWidth = Math.round(canvas.width);
240.         let cHeight = Math.round(canvas.height);
242.         let rWidth = Math.round(rect.width);
243.         let rHeight = Math.round(rect.height);
245.         if (cWidth !== rWidth || cHeight !== rHeight) {
246.           // 更新画布分辨率前将画面设置为背景，防止闪烁
247.           canvas.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
248.           // 更新画布分辨率（将会自动清空画布内容）
249.           canvas.width = rWidth;
250.           canvas.height = rHeight;
251.         }
253.       }
255.     };
257.     if (!cacheItem) {
258.       throw new Error('获取缓存数据失败');
259.     }
261.     // 渲染画面
262.     let renderTimer = setInterval(() => {
264.       // 注：
265.       // 每次渲染都重新获取，防止重连后获取不到新创建的 video 元素
266.       let video = cacheItem.element;
267.       let cWidth = canvas.width;
268.       let cHeight = canvas.height;
270.       if (document.contains(video)) {
271.         ctx.drawImage(video, 0, 0, cWidth, cHeight);
272.       }
274.       canvas.style.backgroundImage = '';
275.       cacheItem.usedAt = Date.now();
277.     }, INTERVAL_RENDER);
279.     // 更新分辨率
280.     let resizeTimer = setInterval(fnResize, INTERVAL_RESIZE);
282.     // 监听元素
283.     let watchTimer = setInterval(() => {
284.       if (!document.contains(canvas)) {
285.         console.debug(PREFIX, '画布已被移除，停止渲染画面', { url });
286.         clearInterval(renderTimer);
287.         clearInterval(resizeTimer);
288.         clearInterval(watchTimer);
289.       }
290.     }, INTERVAL_WATCH_CANVAS);
292.     // 初始化分辨率
293.     setTimeout(fnResize, 0);
295.     return canvas;
297.   } catch (error) {
298.     console.error(PREFIX, '获取 canvas 失败：');
299.     console.error(error);
300.     return null;
301.   }
302. }

复制代码

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

来源:https://www.cnblogs.com/frost-zx/p/-/zlm-rtc-client-multi-video-pull-once
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！