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

`

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/.js.
- Swiper CSS can be imported in your app if you prefer: import 'swiper/swiper-bundle.css'`.

License

MIT