# webcodecs-h265-stream-player

> h265 stream player

Latest version **1.0.10** (published 2023-11-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install webcodecs-h265-stream-player
pnpm add webcodecs-h265-stream-player
yarn add webcodecs-h265-stream-player
bun add webcodecs-h265-stream-player
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2023-11-26 |
| First published | 2023-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lowrie |
| Maintainers | yuan_zhenjia |
| Keywords | h265, player, h265-player, h265-stream-player, video, WebCodecs API |

## Links

- npm: https://www.npmjs.com/package/webcodecs-h265-stream-player
- npm.io page: https://npm.io/package/webcodecs-h265-stream-player

## Dependencies (1)

- [znu-event](https://npm.io/package/znu-event.md) ^0.0.10

## Recent versions

- 1.0.10 (latest) — 2023-11-26
- 1.0.9 — 2023-04-11
- 1.0.8 — 2023-04-11
- 1.0.7 — 2023-04-11
- 1.0.6 — 2023-04-11
- 1.0.5 — 2023-04-11
- 1.0.4 — 2023-04-11
- 1.0.3 — 2023-04-11
- 1.0.2 — 2023-04-07

## README

# h265-player

🚀 h265 stream player 🌈. 在浏览器上播放 H265 视频流，调用 WebCodecs API 对 H265 视频流进行解码，并通过 canvas 绘制。

## 安装

```bash
npm i webcodecs-h265-stream-player
```

## 使用

```javascript
import H265Player from "webcodecs-h265-stream-player";

new H265Player(HTMLCanvasElement);
```

## api

### HTMLCanvasElement

canvas dom，用来绘制解码出来的图像

### 方法

| 方法       | 说明                        | 参数                                                                                             |
| ---------- | --------------------------- | ------------------------------------------------------------------------------------------------ |
| feed       | 喂给播放器 一帧 h265 视频流 | (arraybuffer,timestamp)，arraybuffer 是 ArrayBuffer 类型，timestamp 是 number 类型的时间戳（秒） |
| pause      | 暂停播放                    |                                                                                                  |
| play       | 开始播放                    |                                                                                                  |
| fullscreen | 视频全屏                    |                                                                                                  |
| destroy    | 销毁播放器                  |                                                                                                  |
| on         | 监听事件                    | 参照下面`监听事件`                                                                               |
| off        | 取消监听事件                |                                                                                                  |

### 监听事件

| 事件  | 说明                                                  | 回调值         |
| ----- | ----------------------------------------------------- | -------------- |
| ready | 播放器已准备好，可以开始调用 start 方法和 feed 方法了 |                |
| size  | 解码出来的视频的分辨率                                | {width,height} |
| play  | 视频正在播放                                          |                |
| pause | 视频暂停                                              |                |
| error | 视频播放出错                                          |                |

## 简单代码

```javascript
import H265Player from "h265-player";
const canvas = document.getElementById("canvas");

var player = new H265Player(canvas);
player.on("ready", () => {
  console.log("ready");
  player.start();
});
player.on("size", function (e) {
  console.log("size", e.width, e.height, e.mode);
});
player.on("play", () => {
  console.log("play");
});
player.on("pause", () => {
  console.log("pause");
});
player.on("error", (e) => {
  console.log("player error", e);
});

function feed(arraybuffer, timestamp) {
  if (player) {
    player.feed(arraybuffer, timestamp);
  }
}
```

> Thank you for your star

---
_Source: https://npm.io/package/webcodecs-h265-stream-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._