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

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

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

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

            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.

Changelog

v0.1.0 upgraded to ziggeo 0.0.30 version and added screen recorder option

Documentation