# bosscheng/jessibuca-vue-demo architecture

> Architecture diagram of the GitHub repository bosscheng/jessibuca-vue-demo, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bosscheng/jessibuca-vue-demo
- Repository: https://github.com/bosscheng/jessibuca-vue-demo

## Overview

This repository is a Vue demo for the Jessibuca browser video player. A user configures playback in the demo, supplies a stream URL, and invokes player actions; the demo constructs the player and listens for its events. The UI also exposes playback options, display controls, performance information, and recording. The player bundle and decoder assets are shipped under `public`. The sampled excerpts do not show the HTML script-loading details or the complete player internals, so those links are not inferred.

Main entry points: [`public/jessibuca.js`](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/public/jessibuca.js) (Jessibuca player), [`src/components/JessibucaDemo.vue`](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/src/components/JessibucaDemo.vue) (Player demo), [`src/App.vue`](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/src/App.vue) (App shell), [`public/decoder.js`](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/public/decoder.js) (WASM decoder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_vue_app["Vue demo"]
  node_app_entry["Vue entry<br/>[main.js]"]
  node_app_shell["App shell<br/>[App.vue]"]
  node_demo_ui["Player demo<br/>[JessibucaDemo.vue]"]
end

subgraph group_player_assets["Player assets"]
  node_player["Jessibuca player<br/>[jessibuca.js]"]
  node_decoder["WASM decoder<br/>[decoder.js]"]
  node_wasm["Decoder binary<br/>[decoder.wasm]"]
end

node_viewer(("Viewer"))
node_stream(("Stream URL"))

node_viewer -->|"configures and controls"| node_demo_ui
node_app_entry -->|"mounts"| node_app_shell
node_app_shell -->|"renders"| node_demo_ui
node_demo_ui -->|"creates and controls"| node_player
node_player -->|"emits events"| node_demo_ui
node_stream -->|"plays URL"| node_player
node_player -.->|"configures decoder"| node_decoder
node_decoder -.->|"loads binary"| node_wasm

click node_app_entry "https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/src/main.js"
click node_app_shell "https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/src/App.vue"
click node_demo_ui "https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/src/components/JessibucaDemo.vue"
click node_player "https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/public/jessibuca.js"
click node_decoder "https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/public/decoder.js"
click node_wasm "https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/public/decoder.wasm"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_entry,node_app_shell,node_demo_ui,node_viewer toneBlue
class node_player,node_decoder,node_wasm toneAmber
class node_stream toneIndigo
```

## Components

### Vue demo

- [Vue entry](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/src/main.js): `src/main.js`
- [App shell](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/src/App.vue): `src/App.vue`
- [Player demo](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/src/components/JessibucaDemo.vue): `src/components/JessibucaDemo.vue`

### Player assets

- [Jessibuca player](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/public/jessibuca.js): `public/jessibuca.js`
- [WASM decoder](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/public/decoder.js): `public/decoder.js`
- [Decoder binary](https://github.com/bosscheng/jessibuca-vue-demo/blob/v3/public/decoder.wasm): `public/decoder.wasm`

### Other components

- **Viewer**
- **Stream URL**

## Connections

- Viewer → Player demo: configures and controls
- Vue entry → App shell: mounts
- App shell → Player demo: renders
- Player demo → Jessibuca player: creates and controls
- Jessibuca player → Player demo: emits events
- Stream URL → Jessibuca player: plays URL
- Jessibuca player → WASM decoder: configures decoder
- WASM decoder → Decoder binary: loads binary