# @vanwei-wcs/wwav-player-webdecodecs

> a wwav video player

Latest version **0.1.5** (published 2023-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vanwei-wcs/wwav-player-webdecodecs
pnpm add @vanwei-wcs/wwav-player-webdecodecs
yarn add @vanwei-wcs/wwav-player-webdecodecs
bun add @vanwei-wcs/wwav-player-webdecodecs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2023-04-11 |
| First published | 2023-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 221.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lowrie |
| Maintainers | yuan_zhenjia, ma_long, chenwuai |
| Keywords | wwav-player |

## Links

- npm: https://www.npmjs.com/package/@vanwei-wcs/wwav-player-webdecodecs
- npm.io page: https://npm.io/package/@vanwei-wcs/wwav-player-webdecodecs

## Dependencies (5)

- [jmuxer](https://npm.io/package/jmuxer.md) ^2.0.3
- [@vanwei-wcs/stream](https://npm.io/package/@vanwei-wcs/stream.md) ^0.0.1
- [h265-stream-player](https://npm.io/package/h265-stream-player.md) ^1.0.4
- [@vanwei-wcs/wwav-io](https://npm.io/package/@vanwei-wcs/wwav-io.md) ^1.0.0
- [webcodecs-h265-stream-player](https://npm.io/package/webcodecs-h265-stream-player.md) ^1.0.9

## Recent versions

- 0.1.5 (latest) — 2023-04-11
- 0.1.4 — 2023-04-11
- 0.1.3 — 2023-04-11

## README

# wwav-player-webdecodecs

播放 wwav 格式的视频url 的播放器

## 安装
```bash
npm i @vanwei-wcs/wwav-player-webdecodecs
```

```javascript
import WWAVPlayer from '@vanwei-wcs/wwav-player-webdecodecs'
const url = 'ws://192.168.8.120:3094/mts/wwav/W867651902yzwfQzpCcNPUd283Gjs.wwav'
const token = 'c70mxehw'

var player = new WWAVPlayer({
	debug: false // 当前只有这一个属性
});
```

## 方法

- attachVideoElement()
- attachCanvasElement()
- open()
- play()
- pause()
- on()
- off()
- destroy()

### attachVideoElement()

```Typescript
player.attachVideoElement(node:HTMLVideoElement,options:Options)
```

用来配置播放 h264 流需要用来到的 dom 和参数

**Options**
|属性|说明|类型|可选值|默认值|
|---|---|---|---|---|
|mode|播放模式|string|both、video、audio|video|
|flushingTime|buffer缓冲区刷新毫秒间隔|number|-|500|
|maxDelay|最大毫秒延迟|number|-|500|
|debug|是否开启 h264 播放器的debug模式|boolean|-|false|

### attachCanvasElement()

```Typescript
player.attachCanvasElement(node:HTMLCanvasElement,options:Options)
```

用来配置播放 h265 流需要用来到的 dom 和参数

**Options**
+ baseLibPath

> 设置此属性时，请先在 `statics/h265` 文件夹下面找到 `libffmpeg_265.js`、`libffmpeg_265.wasm` 这两个文件。

此属性用来在 web worker 中拼接出 `libffmpeg_265.js`、`libffmpeg_265.wasm` 两个文件的下载路径，然后使用 `importScript(libffmpeg_265.js)` 和 `fetch(libffmpeg_265.wasm)` 下载这两个文件，默认值为 `/lib/`。

有两种设置方式
+ 相对路径

拼接规则为 `location.origin + baseLibPath + 'libffmpeg_265.js'`， 例如：`baseLibPath = '/public/'`，当前运行脚本的 `location.origin` 为 `http://192.168.1.10:9000`， 则最后的拼接地址为 `http://192.168.1.10:9000/public/libffmpeg_265.js`
+ 一种是绝对路径，拼接规则为 `baseLibPath + 'libffmpeg_265.js'`

+ 绝对路径

拼接规则为 `baseLibPath + 'libffmpeg_265.js'`， 例如：`baseLibPath = 'http://192.168.1.10:9000/public/'` ，则最后的拼接地址为 `http://192.168.1.10:9000/public/libffmpeg_265.js`

> 无论设置哪一种方式，都必须要求可以通过此链接访问 `libffmpeg_265.js` 文件内容，
> `libffmpeg_265.js`、`libffmpeg_265.wasm` 这两个文件必须在同一个文件夹下面


+ debug

开启 H265 播放器 debug 模式

+ decoderLogLevel

设置 H265 解码器的日志等级，js-0; wasm-1; ffmpeg-2


### open()

```Typescript
player.open(url:string,token:string)
```
url 为 `wwav` 格式的视频地址，token 为视频地址密码

### play()

当视频正在播放时，调用此方法可以暂停视频播放

### pause()

当视频暂停后，调用此方法可以开始播放视频

### on()

监听播放器回调事件，具体定义参看下方`静态属性 PlayerEvents`
|事件|说明|参数|
|---|---|---|
|error|播放发生错误，具体错误参考下方错误回调|{errorType,detail,info}|
|play|视频开始播放|event|
|pause|视频暂停播放|event|
|media_info|解码出来的视频信息，format（流格式H264/H265），width（视频分辨率宽度），height（视频分辨率高度）|{format,width,height}|

```javascript
player.on("media_info", ({format,width,height}) => {
	console.log("media_info", format,width,height);
});
```

### off()
取消 on 方法监听的事件的回调
```javascript
// off(eventName,listener)
player.off("media_info");
// 不指定listener，则取消事件名对应的所有回调
```
> 如果需要取消所有回调，调用 offAll() 方法

### destroy()

销毁播放器，异步方法，返回promise

## 静态属性和方法

### PlayerEvents
回调事件枚举属性
```javascript
{
	ERROR: 'error',
	PLAY: 'play',
	PAUSE: 'pause',
	MEDIA_INFO: 'media_info'
}
```

```javascript
player.on(WWAVPlayer.PlayerEvents.ERROR, (errorType,detail,info) => {
	console.log("media_info", errorType,detail,info);
	// errorType 对应于下方 ErrorTypes 的值
	// detail 对应于下方 ErrorDetails 的值
});
```

### ErrorTypes
`error` 回调事件的错误类型枚举
```javascript
ErrorTypes = {
	NETWORK_ERROR: 'network_error',
	MEDIA_ERROR: 'media_error',
	OTHER_ERROR: 'other_error'
}
```
|类型|说明|
|---|---|
|network_error|通常是提供的视频地址无法连接，密码不正确无法认证等网络错误|
|media_error|通常是没有提供视频需要的正确 dom 元素，最好在播放前把 video 和 canvas 元素都绑定，因为无法提前确定当前视频url获取到的视频流是 H264 还是 H265|
|other_error|其他错误|

### ErrorDetails
`error` 回调事件的错误描述枚举
```javascript
ErrorDetails = {
	NETWORK_AUTH_FAILED: 'network_auth_failed',
	NETWORK_ON_CLOSE: 'network_close',
	NETWORK_ON_ERROR: 'network_error',

	MEDIA_INVALID_ELEMENT: 'media_invalid_element'
}
```
|类型|说明|
|---|---|
|network_auth_failed|视频url认证失败错误，通常是密码不正确|
|network_close|连接视频url 的 websocket 实例断开连接的回调|
|network_error|通常是提供的视频地址url无法连接，或连接异常断开|
|media_invalid_element|获取到视频流后，发现提供的dom元素不是所需要的，就会触发此错误。例如接收到的是 H264 流，但是没有绑定 video dom元素，或接收到的是 H265 流，但是没有绑定 canvas dom元素|

### isSupported()

检查当前浏览器是否支持播放
```javascript
	const isSuppotred = WWAVPlayer.isSupported()
```


## demo

```html
<script>
	var video = document.getElementById("video");
	var canvas = document.getElementById("canvas");

	var player = null;

	var url = 'ws://192.168.8.10/xxxxxfesfsfsf.wwav'
	var token = 'xxxxxx'

	function open() {
		try {
			if (player) {
				player.destroy();
			}
			player = new WWAVPlayer({
				debug: false,
			});

			player.attachVideoElement(video);
			player.attachCanvasElement(canvas, {
				baseLibPath: "/statics/h265/",
				debug: false,
			});

			player.on("error", (error_type, detail, info) => {
				console.error("player error", error_type, detail, info);
				errorSpan.innerHTML =
					detail + (info.message ? " : " + info.message : "");
			});
			player.on("play", (event) => {
				console.log("play", event);
			});
			player.on("pause", (event) => {
				console.log("pause", event);
			});
			player.on("media_info", (event) => {
				console.log("media_info", event);
			});

			player.open(url, token);
		} catch (error) {
			console.error("error", error);
		}
	}

	function stop() {
		if (player) {
			player.destroy();
		}
		player = null;
	}

	function play() {
		if (player) {
			player.play();
		}
	}
	function pause() {
		if (player) {
			player.pause();
		}
	}
</script>
```

---
_Source: https://npm.io/package/@vanwei-wcs/wwav-player-webdecodecs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._