multicam-player/README.md

Multicam player component for Vue 2 with swiper playlist and eb-player integration.

# multicam-player

A small, fast Vue 2 component that renders a main video and a virtualized Swiper playlist of live previews. Designed for Nuxt 2 / Vue 2 apps. Ships ESM and UMD.

## Install

```bash
yarn add multicam-player vue@^2 vue-awesome-swiper@^3 swiper@^6 eb-player@^1
```

> These are peer deps to avoid duplicates.

## Nuxt usage

Create a plugin (e.g. `plugins/multicam.js`):

```js
import Vue from 'vue'
import Multicam from 'multicam-player'

export default () => {
  Vue.use(Multicam)
}
```

Register in `nuxt.config.js`:

```js
export default {
  plugins: ['~/plugins/multicam.js'],
  build: {
    extend(config, { isClient }) {
      // eb-player alias needed by the package
      config.resolve.alias['~player'] = `eb-player/dist/build/${process.env.PLAYER_CONFIG || 'default'}.js`
    }
  }
}
```

Then use it:

```vue
<template>
  <MulticamPlayer :config="cams" :autoPlaylist="true" />
</template>
```

## Dev / debug

```bash
yarn install
export PLAYER_CONFIG=default   # optional
yarn dev                       # http://localhost:8080
```

The dev playground installs the plugin from `src/` and hot-reloads.

## Build

```bash
yarn build   # outputs dist/multicam-player.{esm,umd}.js
```

## Publish

```bash
npm publish --access public
```

## Props

- `config: Array` — list of cams; takes precedence over `configUrl`
- `configUrl: String` — endpoint returning the same shape as `config`
- `autoPlaylist: Boolean` — auto-hide/show the playlist on activity
- `multicamDebug: Boolean` — show FPS/memory HUD

## Notes

- The package auto-installs `eb-player` via Webpack alias `~player` that points to `eb-player/dist/build/<name>.js`.
- Swiper CSS can be imported in your app if you prefer: `import 'swiper/swiper-bundle.css'`.

## License
MIT