Multicam player component for Vue 2 with swiper playlist and eb-player integration.
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.
``bash`
yarn add multicam-player vue@^2 vue-awesome-swiper@^3 swiper@^6 eb-player@^1
> These are peer deps to avoid duplicates.
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:
`jseb-player/dist/build/${process.env.PLAYER_CONFIG || 'default'}.js
export default {
plugins: ['~/plugins/multicam.js'],
build: {
extend(config, { isClient }) {
// eb-player alias needed by the package
config.resolve.alias['~player'] = `
}
}
}
Then use it:
`vue`
`bash`
yarn install
export PLAYER_CONFIG=default # optional
yarn dev # http://localhost:8080
The dev playground installs the plugin from src/ and hot-reloads.
`bash`
yarn build # outputs dist/multicam-player.{esm,umd}.js
`bash`
npm publish --access public
- config: Array — list of cams; takes precedence over configUrlconfigUrl: String
- — endpoint returning the same shape as configautoPlaylist: Boolean
- — auto-hide/show the playlist on activitymulticamDebug: Boolean
- — show FPS/memory HUD
- The package auto-installs eb-player via Webpack alias ~player that points to eb-player/dist/build/.import 'swiper/swiper-bundle.css'`.
- Swiper CSS can be imported in your app if you prefer: