libmedia

https://github.com/zhaohappy/libmedia
Admin
libmedia is a utility library for processing multimedia content—such as audio, video, and...
Tokens:37,289
Snippets:331
Trust Score:7
License:LGPL-3.0
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install and Run Development Server

Source: https://github.com/zhaohappy/libmedia/blob/master/site/README.md

Install dependencies, start the development server, and build the documentation.

```bash
npm install
```

```bash
npm run dev
```

```bash
npm run build
```

--------------------------------

### Clone and Setup libmedia Project

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/contribution.en-US.md

Clone the repository, install dependencies, and compile AVPlayer and AVTranscoder in development mode.

```shell
git clone git@github.com:zhaohappy/libmedia.git

cd libmedia

pnpm install

npm run build-avplayer-dev

npm run build-transcoder-dev
```

--------------------------------

### Install @libmedia/audioresample with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio resampling library using npm.

```bash
npm install @libmedia/audioresample
```

--------------------------------

### Install @libmedia/avplayer-ui with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the player with UI package using yarn.

```bash
yarn add @libmedia/avplayer-ui
```

--------------------------------

### Install @libmedia/avprotocol with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video protocols library using npm.

```bash
npm install @libmedia/avprotocol
```

--------------------------------

### Install @libmedia/avplayer with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the player package using yarn.

```bash
yarn add @libmedia/avplayer
```

--------------------------------

### Install @libmedia/avprotocol with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video protocols library using yarn.

```bash
yarn add @libmedia/avprotocol
```

--------------------------------

### Install @libmedia/audioresample with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio resampling library using yarn.

```bash
yarn add @libmedia/audioresample
```

--------------------------------

### Install @libmedia/avprotocol with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video protocols library using pnpm.

```bash
pnpm add @libmedia/avprotocol
```

--------------------------------

### Install @libmedia/avplayer-ui with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the player with UI package using pnpm.

```bash
pnpm add @libmedia/avplayer-ui
```

--------------------------------

### Install @libmedia/audioresample with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio resampling library using pnpm.

```bash
pnpm add @libmedia/audioresample
```

--------------------------------

### Install @libmedia/audiostretchpitch with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio speed and pitch change processing library using npm.

```bash
npm install @libmedia/audiostretchpitch
```

--------------------------------

### Install @libmedia/avtranscoder with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the transcoder package using yarn.

```bash
yarn add @libmedia/avtranscoder
```

--------------------------------

### Install @libmedia/cheap with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the cheap tool library for multi-thread JavaScript and WebAssembly development using npm.

```bash
npm install @libmedia/cheap
```

--------------------------------

### Install @libmedia/avplayer-ui with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the player with UI package using npm.

```bash
npm install @libmedia/avplayer-ui
```

--------------------------------

### Install @libmedia/avplayer with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the player package using pnpm.

```bash
pnpm add @libmedia/avplayer
```

--------------------------------

### Install @libmedia/cheap with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the cheap tool library for multi-thread JavaScript and WebAssembly development using yarn.

```bash
yarn add @libmedia/cheap
```

--------------------------------

### Install @libmedia/avrender with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video rendering library using npm.

```bash
npm install @libmedia/avrender
```

--------------------------------

### Install @libmedia/avtranscoder with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the transcoder package using pnpm.

```bash
pnpm add @libmedia/avtranscoder
```

--------------------------------

### Install @libmedia/cheap with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the cheap tool library for multi-thread JavaScript and WebAssembly development using pnpm.

```bash
pnpm add @libmedia/cheap
```

--------------------------------

### Install @libmedia/audiostretchpitch with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio speed and pitch change processing library using yarn.

```bash
yarn add @libmedia/audiostretchpitch
```

--------------------------------

### Install @libmedia/avtranscoder with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the transcoder package using npm.

```bash
npm install @libmedia/avtranscoder
```

--------------------------------

### Install @libmedia/avrender with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video rendering library using yarn.

```bash
yarn add @libmedia/avrender
```

--------------------------------

### Install @libmedia/avrender with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video rendering library using pnpm.

```bash
pnpm add @libmedia/avrender
```

--------------------------------

### Install @libmedia/audiostretchpitch with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio speed and pitch change processing library using pnpm.

```bash
pnpm add @libmedia/audiostretchpitch
```

--------------------------------

### Install @libmedia/videoscale with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the video scale and format transform library using yarn.

```bash
yarn add @libmedia/videoscale
```

--------------------------------

### Install @libmedia/avformat with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the video and audio format library using yarn.

```bash
yarn add @libmedia/avformat
```

--------------------------------

### Install @libmedia/avplayer with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the player package using npm.

```bash
npm install @libmedia/avplayer
```

--------------------------------

### Install @libmedia/avformat with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the video and audio format library using npm.

```bash
npm install @libmedia/avformat
```

--------------------------------

### Install @libmedia/avformat with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the video and audio format library using pnpm.

```bash
pnpm add @libmedia/avformat
```

--------------------------------

### Install @libmedia/videoscale with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the video scale and format transform library using pnpm.

```bash
pnpm add @libmedia/videoscale
```

--------------------------------

### Install @libmedia/videoscale with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the video scale and format transform library using npm.

```bash
npm install @libmedia/videoscale
```

--------------------------------

### Install @libmedia/avcodec with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video codec library using pnpm.

```bash
pnpm add @libmedia/avcodec
```

--------------------------------

### Install @libmedia/avcodec with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video codec library using yarn.

```bash
yarn add @libmedia/avcodec
```

--------------------------------

### Install @libmedia/avcodec with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the audio and video codec library using npm.

```bash
npm install @libmedia/avcodec
```

--------------------------------

### Install libmedia Dependencies with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/quick-start.en-US.md

Use this command to install all core libmedia packages using yarn.

```bash
yarn add @libmedia/common @libmedia/cheap @libmedia/avutil @libmedia/avformat @libmedia/avcodec @libmedia/avnetwork
```

--------------------------------

### Install @libmedia/avpipeline with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the media task processing pipeline library using yarn.

```bash
yarn add @libmedia/avpipeline
```

--------------------------------

### Install libmedia Dependencies with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/quick-start.en-US.md

Use this command to install all core libmedia packages using npm.

```bash
npm install @libmedia/common @libmedia/cheap @libmedia/avutil @libmedia/avformat @libmedia/avcodec @libmedia/avnetwork
```

--------------------------------

### Install libmedia Dependencies with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/quick-start.en-US.md

Use this command to install all core libmedia packages using pnpm.

```bash
pnpm add @libmedia/common @libmedia/cheap @libmedia/avutil @libmedia/avformat @libmedia/avcodec @libmedia/avnetwork
```

--------------------------------

### Install @libmedia/avnetwork with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the Web Platform network file IO related library using yarn.

```bash
yarn add @libmedia/avnetwork
```

--------------------------------

### Install @libmedia/common with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the common tools and methods package using npm.

```bash
npm install @libmedia/common
```

--------------------------------

### Install @libmedia/common with yarn

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the common tools and methods package using yarn.

```bash
yarn add @libmedia/common
```

--------------------------------

### Install @libmedia/avpipeline with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the media task processing pipeline library using npm.

```bash
npm install @libmedia/avpipeline
```

--------------------------------

### Install @libmedia/avpipeline with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the media task processing pipeline library using pnpm.

```bash
pnpm add @libmedia/avpipeline
```

--------------------------------

### Install @libmedia/common with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the common tools and methods package using pnpm.

```bash
pnpm add @libmedia/common
```

--------------------------------

### Install tslib Dependency

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/quick-start.en-US.md

Install the tslib library, which may be required by vite and rollup when using @rollup/plugin-typescript.

```bash
npm install tslib
```

```bash
pnpm add tslib
```

```bash
yarn add tslib
```

--------------------------------

### Install @libmedia/avnetwork with npm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the Web Platform network file IO related library using npm.

```bash
npm install @libmedia/avnetwork
```

--------------------------------

### Install @libmedia/avnetwork with pnpm

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/package.en-US.md

Use this command to install the Web Platform network file IO related library using pnpm.

```bash
pnpm add @libmedia/avnetwork
```

--------------------------------

### Writing Data with IOWriterSync

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/io.en-US.md

Example of setting up IOWriterSync for synchronous data output. It shows the basic implementation of onFlush and onSeek callbacks.

```typescript
import { IOWriterSync } from '@libmedia/common/io'

const ioWriter = new IOWriterSync()

ioWriter.onFlush = (data: Uint8Array, pos: int64) => {
  return 0
}
ioWriter.onSeek = (pos) => {
  return 0
}
```

--------------------------------

### AVTranscoder Initialization and Task Setup

Source: https://github.com/zhaohappy/libmedia/blob/master/test/avtranscoder.html

Initializes the transcoder, sets log level, and configures a new transcoding task with input, output, and processing parameters.

```javascript
transcoder.setLogLevel(1)
transcoder.on('task-ended', (taskId) => {
console.log('task', taskId, 'transcode ended')
})
await transcoder.ready()
}
const file = document.querySelector('#file').files[0]
transcoder.addTask({
input: {
file,
enableWebCodecs: enableWebcodecComponent.enableWebCodecs,
enableHardware: enableHardwareComponent.enableHardwareAcceleration,
},
start: startComp.start,
duration: durationComp.duration,
copyTs: copyTsComp.copyTs,
startAtZero: startAtZeroComp.startAtZero,
nonnegative: nonnegativeComp.nonnegative,
output: {
file: writeFileHandler,
format: outputFormatComp.radio,
audio: {
disable: audioDisableComp.disable,
codec: outputAudioCodecComp.radio,
bitrate: audioBitrateComp.bitrate,
sampleRate: audioSamplerateComp.samplerate
},
video: {
disable: videoDisableComp.disable,
codec: outputVideoCodecComp.radio,
width: videoWidthComp.width,
height: videoHeightComp.height,
bitrate: videoBitrateComp.bitrate,
framerate: videoFramerateComp.framerate,
enableWebCodecs: enableWebcodecComponent.enableWebCodecs,
enableHardware: enableHardwareComponent.enableHardwareAcceleration,
encoderOptions: {
preset: 'fast'
}
}
}
}).then((taskId) => {
transcoder.startTask(taskId)
})
```

--------------------------------

### Start Local HTTP Service

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/contribution.en-US.md

Start a local HTTP server to access test pages. The default port is 8000, but can be changed.

```shell
# Start local http service
# The default port is 8000. To change the port, execute: npx http-server -p xxx --cors
npm run server

# Browser access http://localhost:8000/test/avplayer.html
# Browser access http://localhost:8000/test/avtranscoder.html
```

--------------------------------

### Start and Stop Mux Process

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/mux.en-US.md

Initiates the mux process by clicking 'Start' and terminates it with 'Stop'. A local file can be selected beforehand; otherwise, a test file is used.

```typescript
import React from 'react';
import {
  Button,
  useMux,
  MuxPlayer,
  MuxPlayerProps,
} from '@mux/mux-player-react';

export default function MuxDemo() {
  const { mux, ref } = useMux({
    // src: 'https://stream.mux.com/vQ0200000000000000000000000000000000000000/high.m3u8',
  });

  return (
    <div className="App">
      <MuxPlayer {...mux} ref={ref} />
      <Button onClick={() => mux.play()}>Play</Button>
      <Button onClick={() => mux.pause()}>Pause</Button>
      <Button onClick={() => mux.mute()}>Mute</Button>
      <Button onClick={() => mux.unmute()}>Unmute</Button>
      <Button onClick={() => mux.seekTo(10)}>
        Seek to 10s
      </Button>
      <Button onClick={() => mux.volume(0.5)}>
        Volume 0.5
      </Button>
      <Button onClick={() => mux.enterFullscreen()}>
        Fullscreen
      </Button>
      <Button onClick={() => mux.exitFullscreen()}>
        Exit Fullscreen
      </Button>
    </div>
  );
}

```

--------------------------------

### AVPlayer Initialization with Options

Source: https://github.com/zhaohappy/libmedia/blob/master/test/avplayer.html

Initializes the AVPlayer with specific options, including hardware acceleration, WebCodecs, WebGPU, and container setup, with conditional handling for media stream mode.

```javascript
else {
  player.options.enableHardware = enableHardwareComponent.enableHardwareAcceleration
  player.options.enableWebCodecs = enableWebCodecsComponent.enableWebCodecs
  player.options.enableWebGPU = enableWebGPUComponent.enableWebGPU
  player.options.container = mediaStreamModeComponent.mediaStreamMode ? new MediaStream() : document.querySelector(id)
  if (mediaStreamModeVideo) {
    document.querySelector(id).removeChild(mediaStreamModeVideo)
    mediaStreamModeVideo = null
  }
  if (mediaStreamModeComponent.mediaStreamMode) {
    mediaStreamModeVideo = document.createElement('video')
    mediaStreamModeVideo.style.cssText = ` width: 100%;
```

--------------------------------

### Example Time Bases

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/timebase.en-US.md

Illustrates different time bases and their interpretation of a timestamp. Common examples include FLV and TS stream time bases.

```json
{
  "num": 1,
  "den": 1000
}
```

```json
{
  "num": 1,
  "den": 90000
}
```

```json
{
  "num": 666,
  "den": 6666
}
```

--------------------------------

### Reading File Data with IOReader

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/io.en-US.md

Example of setting up IOReader to read data from a File object. It demonstrates how to implement onFlush, onSeek, and onSize callbacks for asynchronous file reading.

```typescript
import { IOFlags } from '@libmedia/avutil'
import { IOReader } from '@libmedia/common/io'

const readFile: File

const ioReader = new IOReader()
// set seekable flag
ioReader.flags |= IOFlags.SEEKABLE

let readPos = 0
const readFileLength = readFile.size

ioReader.onFlush = async (buffer) => {
  if (readPos >= readFileLength) {
    return IOError.END
  }
  const len = Math.min(buffer.length, readFileLength - readPos)

  buffer.set(new Uint8Array(await (readFile.slice(readPos, readPos + len).arrayBuffer())), 0)

  readPos += len

  return len
}
ioReader.onSeek = (pos) => {
  readPos = Number(pos)
  return 0
}

ioReader.onSize = () => {
  return BigInt(readFile.size)
}
```

--------------------------------

### Create Thread with Vite

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/threads.en-US.md

Example of creating a thread using DemuxPipeline with Vite. Requires a worker file and the createThreadFromClass helper.

```javascript
import { DemuxPipeline } from '@libmedia/avpipeline'
import DemuxPipelineWorker from './worker?worker'

const pipeline = await createThreadFromClass(
  DemuxPipeline,
  DemuxPipelineWorker
).run()
```

--------------------------------

### Start Statistics Timer

Source: https://github.com/zhaohappy/libmedia/blob/master/test/avplayer.html

Initializes an interval timer to periodically fetch and display player statistics. It calls the `handleStats` function every second.

```javascript
if (statsTimer) {
  clearTimeout(statsTimer)
}
statsTimer = setInterval(() => {
  handleStats(player.getStats())
}, 1000)
```

--------------------------------

### Create Thread with Node.js

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/threads.en-US.md

Example of creating a thread using DemuxPipeline with Node.js. Uses the built-in worker_threads module.

```javascript
import { DemuxPipeline } from '@libmedia/avpipeline'
import { Worker } from 'worker_threads'

const pipeline = await createThreadFromClass(
  DemuxPipeline,
  () => new Worker(require.resolve('./worker'))
).run()
```

--------------------------------

### Create Thread with Webpack

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/threads.en-US.md

Example of creating a thread using DemuxPipeline with Webpack. Uses worker-loader for the worker import.

```javascript
import { DemuxPipeline } from '@libmedia/avpipeline'
import DemuxPipelineWorker from 'worker-loader!./worker'

const pipeline = await createThreadFromClass(
  DemuxPipeline,
  DemuxPipelineWorker
).run()
```

--------------------------------

### Load URL and Playback Logic

Source: https://github.com/zhaohappy/libmedia/blob/master/product/player/player.html

Handles loading a URL into the player, conditionally based on UI folder state. If a folder is present, it listens for 'folderLoaded' event; otherwise, it loads the URL directly and starts playback. Live stream detection is also included.

```javascript
if (player.options.ui.hasFolder) {
  player.on('folderLoaded', () => {
    if (params.url) {
      player.addUrl(params.url, !(!params.isLive || params.isLive === '0' || params.isLive === 'false'), true)
    }
  })
}
if (params.url && !player.options.ui.hasFolder) {
  player.load(params.url, {
    isLive: !(!params.isLive || params.isLive === '0' || params.isLive === 'false')
  }).then(() => {
    player.play()
  })
}
```

--------------------------------

### WebCodecs Decode Render Example

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/video-render.en-US.md

Initiates video playback using WebCodecs for decoding and rendering. Users can select a local file or use the default test file.

```typescript
import React from "react";
import {
  Button,
  Card,
  Col,
  Form,
  Input,
  Row,
  Upload,
} from "antd";
import {
  useWebCodecsDecodeRender,
  WebCodecsDecodeRenderState,
} from "@/hooks/use-webcodecs-decode-render";
import {
  UploadOutlined,
  CaretRightOutlined,
  PauseOutlined,
} from "@ant-design/icons";

const VideoRender = () => {
  const { state, dispatch } = useWebCodecsDecodeRender();

  const onFileChange = (e: any) => {
    const file = e.target.files[0];
    dispatch({
      type: "SET_FILE",
      payload: file,
    });
  };

  const onStart = () => {
    dispatch({
      type: "START",
    });
  };

  const onStop = () => {
    dispatch({
      type: "STOP",
    });
  };

  return (
    <Card title="WebCodecs Decode Render">
      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Form.Item label="File">
            <Input
              type="file"
              accept=".mp4, .mov, .avi, .mkv"
              onChange={onFileChange}
            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Button type="primary" onClick={onStart} disabled={state.playing}>
            <CaretRightOutlined />
            Start
          </Button>
          <Button type="primary" onClick={onStop} disabled={!state.playing}>
            <PauseOutlined />
            Stop
          </Button>
        </Col>
      </Row>
      <video id="video" width="640" height="480" controls></video>
    </Card>
  );
};

export default VideoRender;

```

--------------------------------

### Wasm Decode Render Example

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/video-render.en-US.md

Initiates video playback using Wasm for decoding and rendering. Users can select a local file or use the default test file. Loading the decoder may take time.

```typescript
import React from "react";
import {
  Button,
  Card,
  Col,
  Form,
  Input,
  Row,
  Upload,
} from "antd";
import {
  useWasmDecodeRender,
  WasmDecodeRenderState,
} from "@/hooks/use-wasm-decode-render";
import {
  UploadOutlined,
  CaretRightOutlined,
  PauseOutlined,
} from "@ant-design/icons";

const VideoRender = () => {
  const { state, dispatch } = useWasmDecodeRender();

  const onFileChange = (e: any) => {
    const file = e.target.files[0];
    dispatch({
      type: "SET_FILE",
      payload: file,
    });
  };

  const onStart = () => {
    dispatch({
      type: "START",
    });
  };

  const onStop = () => {
    dispatch({
      type: "STOP",
    });
  };

  return (
    <Card title="Wasm Decode Render">
      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Form.Item label="File">
            <Input
              type="file"
              accept=".mp4, .mov, .avi, .mkv"
              onChange={onFileChange}
            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Button type="primary" onClick={onStart} disabled={state.playing}>
            <CaretRightOutlined />
            Start
          </Button>
          <Button type="primary" onClick={onStop} disabled={!state.playing}>
            <PauseOutlined />
            Stop
          </Button>
        </Col>
      </Row>
      <canvas id="canvas" width="640" height="480"></canvas>
    </Card>
  );
};

export default VideoRender;

```

--------------------------------

### Load and Analyze Stream Information

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/probe.en-US.md

This snippet shows how to load a decoder and analyze stream information from a local file or a default test file. Ensure you select a file before starting execution if you don't want to use the default.

```typescript
import React, { useState } from "react";
import { MediaInfo } from "@libmedia/core";

export default function Probe() {
  const [info, setInfo] = useState<string>("");

  const onClick = async () => {
    const mediaInfo = new MediaInfo();
    await mediaInfo.loadDecoder(
      "https://github.com/Zhaohappy/libmedia/blob/main/test/asset/test.mp4?raw=true"
    );
    const info = await mediaInfo.getInfo();
    setInfo(info);
  };

  return (
    <div className="probe">
      <button onClick={onClick}>Start</button>
      <pre>{info}</pre>
    </div>
  );
}

```

--------------------------------

### Wasm Video Decoder

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/video-decode.en-US.md

Loads and runs a WebAssembly-based video decoder. Select a local file or use the default test file before starting.

```typescript
import {
	VideoDecoder,
	VideoDecoderConfig,
	VideoFrame,
} from "@tensorflow/tfjs-core";
import {
	decode, // WASM decoder
} from "./video-decode-wasm";

const startButton = document.getElementById("start") as HTMLButtonElement;
const stopButton = document.getElementById("stop") as HTMLButtonElement;
const fileInput = document.getElementById("file") as HTMLInputElement;

startButton.onclick = async () => {
	startButton.disabled = true;
	stopButton.disabled = false;

	const file = fileInput.files?.[0];

	await decode(file);
};

stopButton.onclick = async () => {
	startButton.disabled = false;
	stopButton.disabled = true;

	// stop decoding
};

```

--------------------------------

### AVPlayer Media Stream Mode Setup

Source: https://github.com/zhaohappy/libmedia/blob/master/test/avplayer.html

Configures the AVPlayer for media stream mode, creating and appending a video element to the DOM if enabled.

```javascript
if (mediaStreamModeComponent.mediaStreamMode) {
  mediaStreamModeVideo = document.createElement('video')
  mediaStreamModeVideo.style.cssText = ` width: 100%; height: 100%; `
  mediaStreamModeVideo.srcObject = container
  document.querySelector(id).appendChild(mediaStreamModeVideo)
}
```

--------------------------------

### Wasm Audio Decoder

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/audio-decode.en-US.md

Loads and uses a WebAssembly decoder for audio files. Click 'Start' to begin decoding and 'Stop' to end. A local file can be selected, otherwise a test file is used.

```typescript
import {
	AudioDecoder,
	AudioDecoderSupportCallback,
	AudioDecoderConfig,
	VideoFrame,
	AudioData,
} from "@tensorflow/tfjs-core";
import "@tensorflow/tfjs-backend-wasm";
import * as tf from "@tensorflow/tfjs";

const audioDecoder = new AudioDecoder({});

const decoderConfig: AudioDecoderConfig = {
	codec: "opus",
	// sampleRate: 48000,
	// numberOfChannels: 2,
};

audioDecoder.configure(decoderConfig);

audioDecoder.addEventListener("dequeue", () => {
	const audioData = audioDecoder.dequeue();
	console.log(audioData);
});

async function decodeAudio() {
	const file = (document.getElementById("file") as HTMLInputElement).files?.[0];

	let url = "./test.opus";

	if (file) {
		url = URL.createObjectURL(file);
	}

	const response = await fetch(url);
	const buffer = await response.arrayBuffer();

	const audioDecoder = new AudioDecoder({});

	const decoderConfig: AudioDecoderConfig = {
		codec: "opus",
		sampleRate: 48000,
		numberOfChannels: 2,
	};

	audioDecoder.configure(decoderConfig);

	audioDecoder.addEventListener("dequeue", () => {
		const audioData = audioDecoder.dequeue();
		console.log(audioData);
	});

	const packetCount = 10;
	const packetDuration = 1000;

	for (let i = 0; i < packetCount; i++) {
		const frameSize = 1024;
		const frame = new Uint8Array(frameSize);
		const offset = i * frameSize;
		const packet = buffer.slice(offset, offset + frameSize);

		const audioPacket: AudioData = {
			format: "f32",
			data: packet,
			sampleRate: 48000,
			numberOfChannels: 2,
			timestamp: i * packetDuration,
		};

		audioDecoder.receiveInput(audioPacket);
	}
}

function stopDecode() {
	audioDecoder.close();
}

```

--------------------------------

### Seek to Midpoint Playback

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/seek.md

This snippet demonstrates seeking to the midpoint of a video's duration before starting playback. It assumes a video file has been selected or will use a default test file. The decoder is loaded from GitHub, so initial loading may take time.

```typescript
import {
	Media
} from "@libmedia/core";

const media = new Media();

// If no file is selected, a test file will be used.
// media.open("./test.mp4");

// Seek to the middle of the video duration
media.seek(0.5);

// Start playback
media.play();

// Stop playback
// media.stop();
```

--------------------------------

### Player Initialization with UI Options

Source: https://github.com/zhaohappy/libmedia/blob/master/product/player/player.html

Initializes the player with various configuration options, including hardware acceleration, jitter buffer settings, latency, worker enablement, and UI element URLs. It also configures UI features like folder, header, and footer visibility based on URL parameters.

```javascript
enableHardware: !AVPlayer.Util.os.android,
jitterBufferMax: 4,
jitterBufferMin: 1,
lowLatency: true,
enableWorker: true,
indicatorUrl: './img/indicator.svg',
pauseStateUrl: './img/state.svg',
errorStateUrl: './img/error.svg',
fullscreenDom: document.body,
ui: {
  hasFolder: !params.hasFolder || params.hasFolder && params.hasFolder !== '0' && params.hasFolder !== 'false',
  hasHeader: !params.hasHeader || params.hasHeader && params.hasHeader !== '0' && params.hasHeader !== 'false',
  hasFooter: !params.hasFooter || params.hasFooter && params.hasFooter !== '0' && params.hasFooter !== 'false',
  folderFolded: params.foldFolder && params.foldFolder !== '0' && params.foldFolder !== 'false'
}
```

--------------------------------

### Build All Packages

Source: https://github.com/zhaohappy/libmedia/blob/master/publish.readme.md

Compiles all packages within the project, generating distributable files in the 'dist' directory of each subdirectory. This is a prerequisite for publishing.

```bash
tsx scripts/build-package.ts --package=all
```

--------------------------------

### Configure Cheap Webpack Plugin

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/quick-start.en-US.md

Use this snippet to configure the Cheap webpack plugin in your build process. Ensure you have webpack and ts-loader set up.

```javascript
const path = require('path');
const CheapPlugin = require('@libmedia/cheap/build/webpack/CheapPlugin');
module.exports = (env) => {
  return {
    ... // other webpack configurations
    rules: [
      {
        test: /\.ts?$/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ],
    plugins: [
      new CheapPlugin({
        env: 'browser',
        projectPath: __dirname
      })
    ]
  }
}
```

--------------------------------

### WebCodecs Video Encoder

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/video-encode.en-US.md

Re-encodes video from a file using h264 with WebCodecs. Users can select a local file before starting the encoding process.

```typescript
import {
	MediaRecorder
} from "@/components/media-recorder/media-recorder";
import {
	MediaStreamTrackProcessor
} from "@/components/media-stream-track-processor/media-stream-track-processor";
import {
	WebCodecsEncoder
} from "@/components/web-codecs-encoder/web-codecs-encoder";
import {
	useRef,
	useState
} from "react";

export function VideoEncodeWebCodecs() {
	const ref = useRef<MediaRecorder>(null as any);
	const processor = useRef<MediaStreamTrackProcessor>(null as any);
	const encoder = useRef<WebCodecsEncoder>(null as any);
	const [isEncoding, setIsEncoding] = useState(false);

	const onStart = async () => {
		const stream = await navigator.mediaDevices.getUserMedia({
			video: true
		});
		const track = stream.getTracks()[0];
		processor.current = new MediaStreamTrackProcessor(track);
		encoder.current = new WebCodecsEncoder();
		ref.current = new MediaRecorder(processor.current, encoder.current);
		ref.current.start();
		setIsEncoding(true);
	};

	const onStop = () => {
		ref.current.stop();
		setIsEncoding(false);
	};

	return (
		<div className="flex flex-col gap-2">
			<button onClick={onStart} disabled={isEncoding}>
				Start
			</button>
			<button onClick={onStop} disabled={!isEncoding}>
				Stop
			</button>
		</div>
	);
}

```

--------------------------------

### Create Struct Instance with `make` in JavaScript

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/javascript.en-US.md

Instantiate a new struct object using the `make` utility, providing an initial object and the struct type. Use `unmake` to release resources associated with the created struct.

```javascript
import { make, unmake } from '@libmedia/cheap'
import { AVPacket } from '@libmedia/avutil'
let avpacket = make(new AVPacket(), AVPacket)
unmake(avpacket)

```

--------------------------------

### Wasm Video Encoder

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/video-encode.en-US.md

Loads and uses a Wasm encoder for video re-encoding with h264. Select a local file before starting the encoding process.

```typescript
import {
	MediaRecorder
} from "@/components/media-recorder/media-recorder";
import {
	MediaStreamTrackProcessor
} from "@/components/media-stream-track-processor/media-stream-track-processor";
import {
	WebCodecsEncoder
} from "@/components/web-codecs-encoder/web-codecs-encoder";
import {
	WasmEncoder
} from "@/components/wasm-encoder/wasm-encoder";
import {
	useRef,
	useState
} from "react";

export function VideoEncodeWasm() {
	const ref = useRef<MediaRecorder>(null as any);
	const processor = useRef<MediaStreamTrackProcessor>(null as any);
	const encoder = useRef<WasmEncoder>(null as any);
	const [isEncoding, setIsEncoding] = useState(false);

	const onStart = async () => {
		const stream = await navigator.mediaDevices.getUserMedia({
			video: true
		});
		const track = stream.getTracks()[0];
		processor.current = new MediaStreamTrackProcessor(track);
		encoder.current = new WasmEncoder();
		ref.current = new MediaRecorder(processor.current, encoder.current);
		ref.current.start();
		setIsEncoding(true);
	};

	const onStop = () => {
		ref.current.stop();
		setIsEncoding(false);
	};

	return (
		<div className="flex flex-col gap-2">
			<button onClick={onStart} disabled={isEncoding}>
				Start
			</button>
			<button onClick={onStop} disabled={!isEncoding}>
				Stop
			</button>
		</div>
	);
}

```

--------------------------------

### Importing Modules Before v1

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/migrate-to-v1.en-US.md

Illustrates the previous method of importing individual modules using source file paths.

```typescript
import * as demux from '@libmedia/avformat/demux'
import { AVPacketFlags } from '@libmedia/avutil/struct/avpacket'
import { createAVIFormatContext } from '@libmedia/avformat/AVFormatContext'
import { createAVPacket, destroyAVPacket } from '@libmedia/avutil/util/avpacket'
```

--------------------------------

### Configure AVPlayer with rsbuild

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/player.en-US.md

Configure rsbuild to copy AVPlayer dynamic module files to the output directory.

```javascript
import { defineConfig } from "@rsbuild/core"

export default defineConfig({
  output: {
    copy: [
      { from: './node_modules/@libmedia/avplayer/dist/umd/[0-9]*.avplayer.js', to: 'static/js/[name][ext]' },
    ],
  },
  resolve: {
    alias: {
      '@libmedia/avplayer': './node_modules/@libmedia/avplayer/dist/umd/avplayer.js',
    },
  },
})

```

--------------------------------

### Demux Component

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/demo/demux.en-US.md

The main component for controlling the demux process. It includes buttons to start and stop the process and allows for local file selection.

```typescript
import React, { useState, useEffect, useRef } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
} from "@mui/material";
import {
  useMediaRecorder,
  useDemux,
  Demuxer,
  MediaRecorder,
} from "@zhaohappy/libmedia";

const DemuxDemo = () => {
  const [open, setOpen] = useState(false);
  const [file, setFile] = useState<File | null>(null);
  const [demuxer, setDemuxer] = useState<Demuxer | null>(null);
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
  const [isRecording, setIsRecording] = useState(false);
  const [isDemuxing, setIsDemuxing] = useState(false);

  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const demuxerRef = useRef<Demuxer | null>(null);

  const { startRecording, stopRecording, mediaBlob } = useMediaRecorder();
  const { startDemux, stopDemux } = useDemux();

  useEffect(() => {
    const initialize = async () => {
      const recorder = new MediaRecorder();
      const demux = new Demuxer();
      mediaRecorderRef.current = recorder;
      demuxerRef.current = demux;
      setMediaRecorder(recorder);
      setDemuxer(demux);
    };
    initialize();

    return () => {
      mediaRecorderRef.current?.destroy();
      demuxerRef.current?.destroy();
    };
  }, []);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
      setFile(event.target.files[0]);
    }
  };

  const handleStart = async () => {
    if (!mediaRecorder || !demuxer) return;

    if (file) {
      await startDemux(demuxer, file);
    } else {
      // Use test file if no file is selected
      const testFile = await fetch(
        "https://raw.githubusercontent.com/zhaohappy/libmedia/main/test/demux.mp4"
      ).then((res) => res.blob());
      await startDemux(demuxer, testFile);
    }
    setIsDemuxing(true);
  };

  const handleStop = () => {
    if (!demuxer) return;
    stopDemux(demuxer);
    setIsDemuxing(false);
  };

  const handleRecordStart = async () => {
    await startRecording();
    setIsRecording(true);
  };

  const handleRecordStop = () => {
    stopRecording();
    setIsRecording(false);
  };

  useEffect(() => {
    if (mediaBlob) {
      // Process the mediaBlob as needed
      console.log("Media recorded:", mediaBlob);
    }
  }, [mediaBlob]);

  return (
    <div>
      <Button variant="contained" onClick={() => setOpen(true)}>
        Select File
      </Button>
      <Button variant="contained" onClick={handleStart} disabled={isDemuxing}>
        Start
      </Button>
      <Button variant="contained" onClick={handleStop} disabled={!isDemuxing}>
        Stop
      </Button>
      <Button variant="contained" onClick={handleRecordStart} disabled={isRecording}>
        Record
      </Button>
      <Button variant="contained" onClick={handleRecordStop} disabled={!isRecording}>
        Stop Recording
      </Button>

      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Select Local File</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            id="file"
            type="file"
            fullWidth
            variant="standard"
            onChange={handleFileChange}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>Cancel</Button>
          <Button onClick={() => setOpen(false)}>Select</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default DemuxDemo;

```

--------------------------------

### Initialize AVPlayer and Load WASM Decoders

Source: https://github.com/zhaohappy/libmedia/blob/master/test/avplayer.html

Initializes the AVPlayer's audio context and player instance. It dynamically determines the correct WebAssembly decoder module path based on codec ID and build configurations like SIMD and atomic support.

```javascript
function loadPlayer(id) {
  if (!AVPlayer.audioContext) {
    AVPlayer.audioContext = new AudioContext()
    AVPlayer.audioContext.createBufferSource()
  }
  if (!player) {
    const container = mediaStreamModeComponent.mediaStreamMode ? new MediaStream() : document.querySelector(id)
    player = new AVPlayer({
      container,
      getWasm: (type, codecId) => {
        switch (type) {
          case 'decoder': {
            if (codecId >= 65536 && codecId <= 65572) {
              return `../dist/decode/pcm${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
            }
            if (codecId >= 69632 && codecId <= 69683) {
              return `../dist/decode/adpcm${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
            }
            switch (codecId) {
              // mpeg1/2
              case 2: return `../dist/decode/mpeg2video${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // H264
              case 27: return `../dist/decode/h264${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // theora
              case 30: return `../dist/decode/theora${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // AAC
              case 86018: return `../dist/decode/aac${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // ac3
              case 86019: return `../dist/decode/ac3${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // eac3
              case 86056: return `../dist/decode/eac3${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // dts
              case 86020: return `../dist/decode/dca${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // MP3
              case 86017: return `../dist/decode/mp3${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // HEVC
              case 173: return `../dist/decode/hevc${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // VVC
              case 196: return `../dist/decode/vvc${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // Mpeg4
              case 12: return `../dist/decode/mpeg4${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // AV1
              case 225: return `../dist/decode/av1${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // Speex
              case 86051: return `../dist/decode/speex${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // Opus
              case 86076: return `../dist/decode/opus${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // flac
              case 86028: return `../dist/decode/flac${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // vorbis
              case 86021: return `../dist/decode/vorbis${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // vp8
              case 139: return `../dist/decode/vp8${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              // vp9
              case 167: return `../dist/decode/vp9${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`
              case 86022 /* AVCodecID.AV_CODEC_ID_DVAUDIO */: return `../dist/decode/dvaudio${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`;
              case 24 /* AVCodecID.AV_CODEC_ID_DVVIDEO */: return `../dist/decode/dvvideo${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`;
              case 3 /* AVCodecID.AV_CODEC_ID_H261 */: return `../dist/decode/h261${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`;
              case 4 /* AVCodecID.AV_CODEC_ID_H263 */: case 20 /* AVCodecID.AV_CODEC_ID_H263I */: case 19 /* AVCodecID.AV_CODEC_ID_H263P */: return `../dist/decode/h263${(enableSimdComponent.enableSimd) ? '-simd' : (supportAtomic ? defaultVersion : '')}.wasm`;
              case 14 /* AVCodecID.AV_CODEC_ID_MSMPEG4V1 */: case 15 /* AVCodecID.AV_CODEC_ID_MSMPEG4V2 */: case 16 /* AVCodecID.AV_CODEC_ID_MSMPEG4V3 */: return
```

--------------------------------

### Vite Configuration for Libmedia

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/quick-start.en-US.md

Integrate the @libmedia/cheap transformer into Vite's build process using the typescript plugin. Ensure the tsconfig.json 'include' setting correctly targets files for compilation.

```javascript
import { defineConfig } from 'vite';
import typescript from '@rollup/plugin-typescript';
import * as transformer from '@libmedia/cheap/build/transformer';

export default defineConfig({
  ...
  plugins: [
    typescript({
      // configure the tsconfig.json configuration file used
      // setting of "include" must to include the files need to compile
      tsconfig: './tsconfig.json',
      ...
      transformers: {
        before: [
          {
            type: 'program',
            factory: (program) => {
              return transformer.before(program)
            }
          }
        ]
      },
      ...
    })
  ],
});
```

--------------------------------

### Configure vite for AVTranscoder

Source: https://github.com/zhaohappy/libmedia/blob/master/site/docs/guide/transcode.en-US.md

Configure vite to copy AVTranscoder dynamic module files using vite-plugin-static-copy. Ensure you have installed vite-plugin-static-copy as a dev dependency.

```javascript
// vite can use the vite-plugin-static-copy plugin
// npm install vite-plugin-static-copy --save-dev
import { viteStaticCopy } from 'vite-plugin-static-copy'
export default defineConfig((config) => {
  {
    ...
    plugins: [
      viteStaticCopy({
        targets: [
          {
            src: 'node_modules/@libmedia/avtranscoder/dist/esm/[0-9]*.avtranscoder.js',
            dest: config.command === 'serve' ? './node_modules/.vite/deps/' : './assets/',
          },
        ],
      })
    ],
  }
});

```

--------------------------------

### Initialize and Append Video Element

Source: https://github.com/zhaohappy/libmedia/blob/master/test/avplayer.html

Initializes a video element and appends it to the container. This is typically done when setting up the player for media playback.

```javascript
height: 100%; 
mediaStreamModeVideo.srcObject = player.options.container
document.querySelector(id).appendChild(mediaStreamModeVideo)
```

--------------------------------

### Initialize AVPlayer and Feature Detection

Source: https://github.com/zhaohappy/libmedia/blob/master/product/player/player.html

Sets the AVPlayer log level and performs WebAssembly feature detection. This code should be run after the DOM is ready.

```javascript
testSupportWasmAtomic()
testSupportWasmSimd()
AVPlayer.setLogLevel(1)
```
Tokens:
Raw