Documentation

Ziggeo's VueJS SDK is the ultimate video recording/playback SDK out there for VueJS.

Ziggeo's VueJS JavaScript SDK is managed publicly on GitHub here.

You can find a demo application on Github as well.

Fork me on GitHub

Setup

Install vue-ziggeo via npm and include below files in your root main.js file

import Ziggeo from 'vue-ziggeo';
Vue.use(Ziggeo);

Recorder

Replace ZIGGEO_API_KEY with your own by Ziggeo API key

<template>
    <ziggeo-recorder
        :apiKey="'ZIGGEO_API_KEY'"
        :width="110"
        :height="80"
        @camera_unresponsive="recorderCameraUnresponsive"
        @access_forbidden="recorderAccessForbidden"
        @upload_selected="recorderUploadSelected"
    ></ziggeo-recorder>
</template>
<script>
    export default {
        ...
        methods: {

            recorderCameraUnresponsive: function() {
                console.log('camera unresponsive');
            },

            recorderAccessForbidden: function () {
                console.log('access forbidden');
            },

            recorderUploadSelected: (file) => {
                console.log('upload selected', file);
            }
            ...
        }
        ...
    }
</script>

Player

Replace ZIGGEO_API_KEY and VIDEO_TOKEN provided by Ziggeo App

<template>
      <ziggeo-player
          :apiKey="'ZIGGEO_API_KEY'"
          :video="'VIDEO_TOKEN'"
          :width="330"
          :height="210"
          @attached="playerAttached"
          @playing="playerPlaying"
          ...
      ></ziggeo-player>
</template>
<script>
    export default {
        ...
        methods: {

            playerAttached: function (data) {
                console.log('player attached', data)
            },

            playerPlaying: () => {
                console.log('player playing');
            },

            ...
        }
        ...
    }
</script>

Additional Parameters

You can add all available Ziggeo-related options here:

Demo

A demo is located in the root demo folder.