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

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

## 📺 播放实现方式

### useWorker

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

### useFlvPlayer

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

## 🚀 快速开始

### 获取项目代码

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

### 安装依赖

```sh
pnpm install
```

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

```sh
pnpm build
```

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

## 更新npm包

### 1. 修改版本号

```bash
pnpm version patch
```

### 2. 发布到npm

```bash
pnpm publish --no-git-checks
```

## 🍩 版本支持

需要最新版 Chrome
Node.js 18+

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

## 安装

```bash
pnpm i omnimatrix-video-player@latest
```

## 使用

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

```js

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("播放完成");
});
```