Multicamera-video-player-component NPM

Multicamera Video Player Component

Multicamera Video Player Component for Vue.

This component uses Plyr as video player and hls.js for playing HLS videos.

Created by Čupka Matej as part of diploma thesis.

Screenshot

Example

Example Vue file:

<template>
  <div id="app">
    <multicamera-video-player width="640px"
                             :autoplay="true"
                             :muted="true"
                             :cameras="cameras"/>
  </div>
</template>

<script>
    import MulticameraVideoPlayer from 'multicamera-video-player-component';

    export default {
        name: 'app',
        components: {
            MulticameraVideoPlayer
        },
        data() {
            return {
                cameras: {
                    Apple_2010: {
                        src: 'http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/sl.m3u8',
                        cameraPositions: {
                            Apple_2019_09: [20, 80],
                            Apple_2019_06: [30, 80]
                        }
                    },
                    Apple_2019_06: {
                        src: 'https://p-events-delivery.akamaized.net/3004qzusahnbjppuwydgjzsdyzsippar/m3u8/hls_vod_mvp.m3u8',
                        cameraPositions: {
                            Apple_2010: [20, 20],
                            Apple_2019_09: [50, 40]
                        }
                    },
                    Apple_2019_09: {
                        src: 'https://p-events-delivery.akamaized.net/0208bkzcptukmgbpuqyfyqjhkxxtzwaw/m3u8/hls_vod_mvp.m3u8',
                        cameraPositions: {
                            Apple_2010: [80, 20],
                            Apple_2019_06: [70, 20]
                        }
                    }
                }
            };
        },
    }
</script>

Installation

Installation via npm

Install the package by entering this command in your project's root directory:

$ npm install multicamera-video-player-component

Add import to your Vue file:

import MulticameraVideoPlayer from 'multicamera-video-player-component';

Add reference of MulticameraVideoPlayer to components object:

components: {
    ...
    MulticameraVideoPlayer
}

Add the multicamera video player component to your HTML:

<multicamera-video-player width="640px"
                          :autoplay="true"
                          :muted="true"
                          :cameras="CAMERAS_OBJECT"/>

Installation via CDN

Add these script tags to your <head> element:

<script src="https://unpkg.com/uuid@7.0.2/dist/umd/uuid.min.js"></script>
<script src="https://unpkg.com/plyr@3.5.10/dist/plyr.min.js"></script>
<script src="https://unpkg.com/hls.js@0.13.2/dist/hls.min.js"></script>
<script src="https://unpkg.com/multicamera-video-player-component@0.1.7/dist/multicamera-video-player.min.js"></script>

Add the multicamera video player component to your HTML:

<multicamera-video-player width="640px"
                          :autoplay="true"
                          :muted="true"
                          :cameras="CAMERAS_OBJECT"/>