效果預覽 視頻畫面 網路請求 代碼實現 ZLMRTCClient.js 當前使用的版本： 1.0.1 Mon Mar 27 2023 19:11:59 GMT+0800 首先需要修改 ZLMRTCClient.js 的代碼，解決由於網路導致播放失敗時無法觸發 WEBRTC_OFFER_ANWSER_ ...
效果預覽
視頻畫面
網路請求
代碼實現
ZLMRTCClient.js
當前使用的版本：
1.0.1Mon Mar 27 2023 19:11:59 GMT+0800
首先需要修改 ZLMRTCClient.js 的代碼，解決由於網路導致播放失敗時無法觸發 WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED 事件的問題。
修改前：
修改後：
修改內容：
// 添加 catch()
axios({
}).then(() => {
}).catch(() => {
// 網路異常時觸發事件
this.dispatch(Events$1.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, null);
});
video-preview.js
// 2024-05-30
// 初始版本
/**
* @typedef CacheItem
* @property {HTMLElement | null} element
* @property {ZLMPlayer | null} player
* @property {number} usedAt
*/
/** @typedef {InstanceType<typeof ZLMRTCClient.Endpoint>} ZLMPlayer */
/** 畫布渲染間隔 */
const INTERVAL_RENDER = 100;
/** 畫布解析度更新間隔 */
const INTERVAL_RESIZE = 1000;
/** 檢測畫布是否在頁面上間隔 */
const INTERVAL_WATCH_CANVAS = 1000;
/** 檢測視頻是否存在調用間隔 */
const INTERVAL_WATCH_VIDEO = 20000;
/** 模塊名稱 */
const PREFIX = '[video-preview]';
/** 重新播放間隔 */
const RESTART_TIMEOUT = 2000;
/** ZLM 客戶端 */
const ZLMRTCClient = window.ZLMRTCClient;
/**
* @desc 緩存信息列表
* @type {Record<string, CacheItem | null>}
*/
export const cacheList = {};
/**
* @description 初始化播放器
* @param {string} url 視頻流地址
*/
function initPlayer(url = '') {
try {
if (!url) {
throw new Error('缺少 url 參數');
}
/** 是否主動停止播放 */
let isStoped = false;
/**
* @description 初始化 & 更新數據
* @param {CacheItem} cache
*/
let fnInit = (cache) => {
let element = document.createElement('video');
// 開啟自動播放
// 註：不能用 `setAttribute`，否則沒效果
element.autoplay = true;
element.controls = false;
element.muted = true;
// 添加到頁面，否則無法播放
element.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 0; height: 0');
document.body.appendChild(element);
let player = new ZLMRTCClient.Endpoint({
// video 標簽
element: element,
// 是否列印日誌
debug: false,
// 流地址
zlmsdpUrl: url,
// 功能開關
audioEnable: false,
simulcast: false,
useCamera: false,
videoEnable: true,
// 僅查看，不推流
recvOnly: true,
// 推流解析度
resolution: { w: 1280, h: 720 },
// 文本收發
// https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send
usedatachannel: false,
});
// // 監聽事件：ICE 協商出錯
// player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function () {
// console.error(PREFIX, 'ICE 協商出錯')
// });
// 監聽事件：獲取到了遠端流，可以播放
player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (event) {
console.log(PREFIX, '播放成功', event.streams);
});
// 監聽事件：offer anwser 交換失敗
player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (event) {
console.error(PREFIX, 'offer anwser 交換失敗', event);
// 當前沒有主動停止
if (!isStoped) {
// 停止播放
stopPlayer(player, element);
// 重新播放
setTimeout(() => {
fnInit(cache);
}, RESTART_TIMEOUT);
}
});
// 監聽事件：RTC 狀態變化
player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (state) {
console.log(PREFIX, 'RTC 狀態變化', state);
// 狀態為已斷開
if (state === 'disconnected' && !isStoped) {
// 停止播放
stopPlayer(player, element);
// 重新播放
setTimeout(() => {
fnInit(cache);
}, RESTART_TIMEOUT);
}
});
cache.element = element;
cache.player = player;
cache.usedAt = Date.now();
};
let cacheItem = cacheList[url];
if (cacheItem) {
return cacheItem;
} else {
cacheItem = {};
}
console.log(PREFIX, '初始化', cacheItem);
// 初始化
fnInit(cacheItem);
// 添加緩存信息
cacheList[url] = cacheItem;
// 監聽調用情況
let watchTimer = setInterval(() => {
let currTime = Date.now();
let lastTime = cacheItem.usedAt;
// 一段時間內沒有被調用，停止播放
if (currTime - lastTime > INTERVAL_WATCH_VIDEO) {
console.debug(PREFIX, '視頻沒有被調用，停止播放', { url });
isStoped = true;
stopPlayer(cacheItem.player, cacheItem.element);
cacheList[url] = null;
clearInterval(watchTimer);
}
}, INTERVAL_WATCH_VIDEO);
return cacheItem;
} catch (error) {
console.error(PREFIX, '初始化播放器失敗：');
console.error(error);
return null;
}
}
/**
* @description 停止播放
* @param {ZLMPlayer} player
* @param {HTMLVideoElement} element
*/
function stopPlayer(player, element) {
try {
if (player) {
console.debug(PREFIX, 'stopPlayer - 停止播放');
player.close();
}
if (element instanceof HTMLVideoElement) {
console.debug(PREFIX, 'stopPlayer - 移除元素');
element.remove();
}
return true;
} catch (error) {
console.error(PREFIX, '停止播放失敗：');
console.error(error);
return false;
}
}
/**
* @description 獲取視頻畫面 canvas
* @param {string} url
*/
export function getVideoCanvas(url = '') {
try {
if (!url) {
throw new Error('缺少 url 參數');
}
let cacheItem = initPlayer(url);
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
// 背景填充
canvas.style.backgroundPosition = 'center center';
canvas.style.backgroundSize = '100% 100%';
/** 更新畫布解析度 */
let fnResize = () => {
let parent = canvas.parentElement;
let rect = parent ? parent.getBoundingClientRect() : null;
if (rect) {
let cWidth = Math.round(canvas.width);
let cHeight = Math.round(canvas.height);
let rWidth = Math.round(rect.width);
let rHeight = Math.round(rect.height);
if (cWidth !== rWidth || cHeight !== rHeight) {
// 更新畫布解析度前將畫面設置為背景，防止閃爍
canvas.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
// 更新畫布解析度（將會自動清空畫布內容）
canvas.width = rWidth;
canvas.height = rHeight;
}
}
};
if (!cacheItem) {
throw new Error('獲取緩存數據失敗');
}
// 渲染畫面
let renderTimer = setInterval(() => {
// 註：
// 每次渲染都重新獲取，防止重連後獲取不到新創建的 video 元素
let video = cacheItem.element;
let cWidth = canvas.width;
let cHeight = canvas.height;
if (document.contains(video)) {
ctx.drawImage(video, 0, 0, cWidth, cHeight);
}
canvas.style.backgroundImage = '';
cacheItem.usedAt = Date.now();
}, INTERVAL_RENDER);
// 更新解析度
let resizeTimer = setInterval(fnResize, INTERVAL_RESIZE);
// 監聽元素
let watchTimer = setInterval(() => {
if (!document.contains(canvas)) {
console.debug(PREFIX, '畫布已被移除，停止渲染畫面', { url });
clearInterval(renderTimer);
clearInterval(resizeTimer);
clearInterval(watchTimer);
}
}, INTERVAL_WATCH_CANVAS);
// 初始化解析度
setTimeout(fnResize, 0);
return canvas;
} catch (error) {
console.error(PREFIX, '獲取 canvas 失敗：');
console.error(error);
return null;
}
}
使用時只需要調用 getVideoCanvas() 獲取 canvas，然後插入到 DOM 即可，畫布會自適應父元素寬高。
