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

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):

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

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

Register in nuxt.config.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:

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

Dev / debug

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

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

Build

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

Publish

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