MiniBuca

中文

MiniBuca 是一个纯前端 H5 流媒体播放器库，面向直播和回放场景。它支持 FLV、HLS 和 WebRTC/WHEP 风格的流地址，并通过 WebCodecs、MSE 和 WASM/libde265 组合处理 H.264/H.265 播放兼容性。

功能

• 支持 HTTP-FLV、WS-FLV、HLS/m3u8 和 WebRTC/WHEP。
• 支持 H.264、H.265 视频流，以及 AAC、PCMA、PCMU 音频流。
• 解码模式支持 auto、wcs、mse、wasm。
• H.265 可通过 libde265.wasm 作为 WASM 回退路径。
• 提供播放、暂停、关闭、销毁、截图、全屏、录制、音量、静音和倍速 API。
• 提供基础控制栏和扩展控制栏。

本地开发

yarn
yarn dev

开发服务默认打开 demo/index.html。

WASM 静态资源

如果需要 WASM H.265 回退能力，请确保 public/wasm/libde265.wasm 可被浏览器访问，然后把 URL 传给播放器：

wasmPath: "/wasm/libde265.wasm"

如果应用部署在子路径下，可以基于当前页面地址生成 URL：

const wasmPath = new URL("wasm/libde265.wasm", document.baseURI).toString();

基础用法

import { MiniBuca } from "./src";

const player = new MiniBuca({
  container: "#player",
  url: "ws://127.0.0.1:8080/media/rtp/example.live.flv",
  autoPlay: false,
  decodeMode: "auto",
  useWorker: false,
  hasAudio: false,
  isLive: true,
  wasmPath: "/wasm/libde265.wasm",
  bufferTime: 0,
  dropFrame: true,
  showControls: true,
  pro: true,
  videoScale: "stretch",
  backgroundColor: "#000"
});

await player.play();

常用 API

• play(url?: string): Promise<void>
• pause(): void
• close(): void
• destroy(): void
• setPlaybackRate(rate: number): void
• setToken(token: string): void
• screenshot(): string

常用事件

• stateChange
• metadata
• decodeFallback
• error
• playbackRate
• screenshot

English

MiniBuca is a pure H5 stream player library for live and playback scenarios. It supports FLV, HLS, and WebRTC/WHEP style streams, and combines WebCodecs, MSE, and WASM/libde265 to improve H.264/H.265 playback compatibility in browsers.

Features

• Supports HTTP-FLV, WS-FLV, HLS/m3u8, and WebRTC/WHEP.
• Supports H.264 and H.265 video, plus AAC, PCMA, and PCMU audio.
• Decode modes: auto, wcs, mse, and wasm.
• Uses libde265.wasm as the H.265 WASM fallback path.
• Provides APIs for play, pause, close, destroy, screenshot, fullscreen, recording, volume, mute, and playback rate.
• Includes basic and extended control bars.

Local Development

yarn
yarn dev

The dev server opens demo/index.html by default.

Static WASM Asset

To use WASM H.265 fallback, make sure public/wasm/libde265.wasm is available to the browser, then pass the public URL to the player:

wasmPath: "/wasm/libde265.wasm"

If your app is deployed under a sub path, build the URL from the current document base:

const wasmPath = new URL("wasm/libde265.wasm", document.baseURI).toString();

Basic Usage

import { MiniBuca } from "./src";

const player = new MiniBuca({
  container: "#player",
  url: "ws://127.0.0.1:8080/media/rtp/example.live.flv",
  autoPlay: false,
  decodeMode: "auto",
  useWorker: false,
  hasAudio: false,
  isLive: true,
  wasmPath: "/wasm/libde265.wasm",
  bufferTime: 0,
  dropFrame: true,
  showControls: true,
  pro: true,
  videoScale: "stretch",
  backgroundColor: "#000"
});

await player.play();

API Summary

• play(url?: string): Promise<void>
• pause(): void
• close(): void
• destroy(): void
• setPlaybackRate(rate: number): void
• setToken(token: string): void
• screenshot(): string

Events

• stateChange
• metadata
• decodeFallback
• error
• playbackRate
• screenshot