AIAlarmAnalysis/omnimatrix-video-player

omnimatrix-video-player 观曜视频播放插件源码

本插件主要使用 TypeScript、React 和 Vite 进行开发，结合现代前端技术实现高效的视频播放体验。依赖于 pnpm 进行包管理和构建，支持在主流浏览器环境下运行。

📺 播放实现方式

useWorker

• 利用 canvas 渲染视频帧，结合 webcodecs 进行高效解码，mp4box 用于解析 MP4 文件格式。
• 适用于需要自定义渲染和处理视频流的场景，支持更灵活的视频处理能力。
• 优点：解码性能高，支持多种视频格式，易于扩展。
• 缺点：兼容性依赖于浏览器对 webcodecs 的支持。

useFlvPlayer

• 通过原生 video 标签结合 mpegts.js 实现 FLV 格式视频播放。
• 适用于直播流或需要低延迟播放的场景，支持 H.264 编码的 FLV 流。
• 优点：实现简单，兼容性好，适合直播和点播。
• 缺点：仅支持部分视频格式，功能扩展有限。

🚀 快速开始

获取项目代码

git clone http://39.100.237.43:3000/wangchao/WebSdk_Demo.git

安装依赖

pnpm install

修改完src目录下的文件后 打包到dist目录下

pnpm build

⬇️以下操作在dist目录下执行

更新npm包

1. 修改版本号

pnpm version patch

2. 发布到npm

pnpm publish --no-git-checks

🍩 版本支持

需要最新版 Chrome Node.js 18+

项目中使用方法========

安装

pnpm i omnimatrix-video-player@latest

使用

 <canvas id="video-demo" width="100%"></canvas>

import useWorker from 'omnimatrix-video-player'


/** 
 * function useWorker(url: string, className: string, callback?: Function, baseWH: object): any
 *
 * @param {String} url - wss连接地址   wss://origin/VideoShow/Common?UUID=uuid&DeviceID=deviceID&Token=token
 * @param {String} className - 选择器  .video-class  |  #video-class  ...
 * @param {Function} callback - 画面渲染完成时的回调
 * @param {Object} baseWH - 基础宽高信息 用于AI画框
 * @returns {Object} 包含两个Web Worker和一个关闭函数的对象
*/

const workerObj = null

// 测试地址 请更换自己的
const wss = `wss://origin/VideoShow/Common?UUID=uuid&DeviceID=deviceID&Token=token`

workerObj = useWorker(wss, "#video-demo", () => {
  console.log("播放完成");
});