Skip to content

Commit

Permalink
docs: Update video-texture-use-video-texture.mdx
Browse files Browse the repository at this point in the history
md tweaks
  • Loading branch information
abernier authored Sep 19, 2024
1 parent 1c4b7a2 commit 6c9cd38
Showing 1 changed file with 14 additions and 6 deletions.
20 changes: 14 additions & 6 deletions docs/loaders/video-texture-use-video-texture.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ sourcecode: src/core/VideoTexture.tsx
</li>
</Grid>

A convenience hook that returns a `THREE.VideoTexture` and integrates loading into suspense. By default it falls back until the `loadedmetadata` event. Then it starts playing the video, which, if the video is muted, is allowed in the browser without user interaction.
<Intro>
A convenience hook that returns a `THREE.VideoTexture` and integrates loading into suspense.
</Intro>

By default it falls back until the `loadedmetadata` event. Then it starts playing the video, which, if the video is muted, is allowed in the browser without user interaction.

```tsx
type VideoTextureProps = {
Expand Down Expand Up @@ -43,6 +47,8 @@ return (
<meshBasicMaterial map={texture} toneMapped={false} />
```

## `MediaStream`

It also accepts a [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) from eg. [`.getDisplayMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) or [`.getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia):

```jsx
Expand All @@ -65,14 +71,16 @@ function VideoMaterial({ src }) {

NB: It's important to wrap `VideoMaterial` into `React.Suspense` since, `useVideoTexture(src)` here will be suspended until the user shares its screen.

## HLS

HLS - useVideoTexture supports .m3u8 HLS manifest via (https://github.com/video-dev/hls.js).

You can fine-tune via the hls configuration:

```
const texture = useVideoTexture('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', {
hls: { abrEwmaFastLive: 1.0, abrEwmaSlowLive: 3.0, enableWorker: true }
})
```jsx
const texture = useVideoTexture('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', {
hls: { abrEwmaFastLive: 1.0, abrEwmaSlowLive: 3.0, enableWorker: true }
})
```

> Available options: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
Available options: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning

0 comments on commit 6c9cd38

Please sign in to comment.