blurhash

KO | EN

gitlite — search

#python #react #ai #typescript #llm #android #rust #deep-learning #java #windows #kubernetes #security #openai #open-source

(★ 15)

Using woltapp/blurhash to make nice placeholders for Mux videos. Works nicely with Mux Player.

blurhash Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @mux/blurhash

A server-side package for node that uses [woltapp/blurhash](https://github.com/woltapp/blurhash) and [sharp](https://www.npmjs.com/package/sharp) to make placeholders for Mux videos. Works nicely with [Mux Player](https://docs.mux.com/guides/video/mux-player).

> [!NOTE]  
> Since we wrote this library, we've learned a _lot_ about blurry image placeholders on the web. While we would still encourage the use of [facade placeholders](https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/) and lazy-loading, using blurhash in the way this library promotes may not be the most efficient technique.
> 
> Check out the new [@mux/blurup](https://github.com/muxinc/blurup) library and [Wes's blog post](https://www.mux.com/blog/blurry-image-placeholders-on-the-web) for the latest on this topic.

## Installation

```shell
npm install @mux/blurhash
```

```shell
yarn add @mux/blurhash
```

## Examples

- With NextJS and mux-player-react [[Basic Usage](./examples/nextjs/pages/basic.jsx)] [[Live Example](https://mux-blurhash-react.vercel.app)]
- With SvelteKit and mux-player [[Basic Usage](./examples/sveltekit/src/routes/basic)] [[Lazy Loading](./examples/sveltekit/src/routes/lazy)] [[Live Example](https://mux-blurhash-svelte.vercel.app)]

## Usage

Run `@mux/blurhash` server-side. `@mux/blurhash` will not work in the browser.

```js
import muxBlurHash from '@mux/blurhash';

const playbackId = '3fevCt00ntwf7WxwvBhRo1EZ01IoABwo2d';
const { blurHash, blurHashBase64, sourceWidth, sourceHeight } = await muxBlurHash(playbackId);
```

### Using `blurHashBase64` with Mux Player

#### mux-player element

```html
<mux-player
	placeholder="{blurHashBase64}"
	style="aspect-ratio: {sourceWidth}/{sourceHeight}"
></mux-player>
```

#### mux-player-react and mux-player-react/lazy

```jsx
<MuxPlayer placeholder={blurHashBase64} style={{ aspectRatio: sourceWidth / sourceHeight }} />
```

See the [examples directory](./examples) to learn more

### Using `blurHashBase64` with native elements

#### HTML

```html
<img src="{blurHashBase64}" width="{sourceWidth}" height="{sourceHeight}" />
```

#### CSS

```css
background-image: url({blurHashBase64});
aspect-ratio: {sourceWidth}/{sourceHeight};
```

### Using `blurHash` with JavaScript

#### Canvas

See documentation for [blurhash.decode](https://github.com/woltapp/blurhash/tree/master/TypeScript#decodeblurhash-string-width-number-height-number-punch-number--uint8clampedarray)

### Options

`@mux/blurhash` will accept an optional second parameter that will allow configuration of the blurhash.

| Parameter      | Type   | Description                                                                                                                                                                                                                  | Default |
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| blurWidth      | number | The image will be compressed to this width before blurring. Lower values load faster but have less detail.                                                                                                                   | 32      |
| blurHeight     | number | The image will be compressed to this height before blurring. Lower values load faster but have less detail.                                                                                                                  | 32      |
| time           | number | The video timestamp from which to grab the blurhash. (If you're using a `thumbnailToken`, then the `time` option will have no effect; encode `time` in your token according to the secure video playback guide linked below) |         |
| thumbnailToken | string | Videos with playback restrictions may require a thumbnail token. See https://docs.mux.com/guides/video/secure-video-playback for details                                                                                     |         |

#### For example...

```js
import muxBlurHash from '@mux/blurhash';

// a lower resolution blurHash that will load more quickly
const options = { blurWidth: 16, blurHeight: 16 };
const { blurHash } = await muxBlurHash(playbackId, options);
```

blurhash

blurhash Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

blurhash

blurhash Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README