JavaScript VueJS SDK

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.

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

            // starting vue-ziggeo@2.0.0 version embedding argument also accessible
            recorderCameraUnresponsive: function(embedding /* only starting from vue-ziggeo@2.0.0 */) {
                console.log('camera unresponsive');
            },

            recorderAccessForbidden: function (embedding /* only starting from vue-ziggeo@2.0.0 */) {
                console.log('access forbidden');
            },

            recorderUploadSelected: (embedding /* only starting from vue-ziggeo@2.0.0 */, file) => {
                console.log('upload selected', file);
            }
            ...
        }
        ...
    }
</script>

Screen Recorder

Using Ziggeo you can also record your screen.
In development mode with localhost you can test it with Ziggeo chrome/opera extensions which will be set automatically, FireFox support it by default.
For production environment you have to generate your own extensions. For more details

Setup Vue recorder:

    :allowscreen=true
    :screenOptions="{
      chrome_extension_id: 'your_chrome_extension_id',
      chrome_extension_install_link: 'your_chrome_extension_install_link',
      opera_extension_id: 'your_opera_extension_id',
      opera_extension_install_link: 'your_opera_extension_install_link'
    }"

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

            // starting vue-ziggeo@2.0.0 version embedding argument also accessible
            playerAttached: function (embedding /* only starting from vue-ziggeo@2.0.0 */, data) {
                console.log('player attached', data)
            },

            playerPlaying: (embedding /* only starting from vue-ziggeo@2.0.0 */) => {
                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.

Changing versions

Our Vue SDK is updated as new revisions of our client JS SDK come out, however you might want to grab a specific one, even before it is added or afterwards. If that is the case you can do that by modifying your package.json file to specify the version you want to use.

In your package.json file you will have a section called "devDependencies": {} in it just add the specific details you want to be used like so (an example only):

"devDependencies": {
  ...
  "ziggeo-client-sdk": "2.32.1"
}

This would make your own repository use our 2.32.1 version of our system. In case our Vue SDK requires higher version that you have set up you would be alerted when you do npm install.

Changelog

v0.1.0 upgraded to ziggeo 0.0.30 version and added screen recorder option
v0.2.0 Fixed countdown related conflict
v1.0.1 Upgraded ziggeo-client-sdk SDK to 2.31.* pre-release version.
v1.1.0 Upgraded ziggeo-client-sdk SDK to 2.32.* version. Fixed try/catch variable name conflict
v2.0.1 Added embedding argument for each method, read more...

Documentation