Ziggeo Angular v2 & v4 implementation

Currently this demo based on v4 but you can also use the same code with Angular >=2.2.0. You can rename angular2-dev-package.json to package.json and set correct route config in root module.

Installation demo project

• Install all dependencies npm install
• For UMD use you can include ZiggeoModule from ziggeo-angular package directly.
  Example: import {ZiggeoModule} from 'angular-ziggeo'
• For AOT ready need to include directly from path
  import { ZiggeoModule } from 'root_path/node_modules/angular-ziggeo/build/ziggeo/index';
  
• and start server with npm start
• open in browser: http://localhost:3000/

Just for note

It has been already included in this project, but if you need to implement similar in your own project you have to include below packages

src/vendor.ts

    import 'ziggeo-client-sdk/build/ziggeo.css';
    import 'ziggeo-client-sdk/build/ziggeo.js';

Setup Main Model:

...
import { ZiggeoModule } from 'angular-ziggeo';

@NgModule({
    ...
    imports: [
        ...
        ZiggeoModule
    ],
    ...
})

...

Recorder Component

import {
    Component,
    ViewChild,
    AfterViewInit
} from '@angular/core';
import { ZiggeoModel } from 'angular-ziggeo';

@Component({
    selector: 'app-recorder',
    template: `
       <ziggeo-recorder #ziggeorecorder
            [apiKey]="'your_api_key'"
            [options]="{height: 200, width: 300}"
       ></ziggeo-recorder>
    `
})
export class RecorderComponent implements AfterViewInit {
    recorder: any;
    @ViewChild('ziggeorecorder') ziggeorecorder: ZiggeoModel;

    ngAfterViewInit () {
        this.recorder = this.ziggeorecorder.recorderInstance;

        this.recorder.on('recording', () => {
            console.log('Recorder in progress');
        }, this);

        this.recorder.on('access_granted', () => {
            console.log('Recorder has camera access');
        }, this);

        this.recorder.on('verified', () => {
            console.log('playing your action here');
        }, this);

        // Below you can find other event listeners to use in your app with ziggeo recorder
    }
}

After you can use app-recorder in your app

Available event listeners for recorder:

   - attached
   - loaded
   - playing
   - paused
   - ended
   - error
   - manually_submitted
   - uploaded
   - upload_selected
   - recording
   - uploading
   - seek
   - rerecord
   - countdown
   - recording_progress
   - upload_progress
   - processing
   - processed
   - access_forbidden
   - access_granted
   - camera_unresponsive
   - verified
   - no_camera
   - no_microphone

Player:

Ziggeo player:

import {
    Component,
    AfterViewInit,
    ViewChild
} from '@angular/core';
import { ZiggeoModel } from 'angular-ziggeo';

@Component({
    selector: 'app-player',
    template: `
    <h5>{{ title }}</h5>
    <ziggeo-player #ziggeoplayer
       [apiKey]="'your_api_key'"
       [options]="{video: 'video_token', width: 520, height: 380}"
    ></ziggeo-player>

    `
})
export class PlayerComponent implements AfterViewInit {
    player: any;
    @ViewChild('ziggeoplayer') ziggeoplayer: ZiggeoModel;

    constructor () {}

    ngAfterViewInit () {
        this.player = this.ziggeoplayer.playerInstance;

        this.player.on('attached', () => {
            console.log('Attached');
        });

        this.player.on('playing', () => {
            console.log('Playing your action here');
        });

        this.player.on('paused', () => {
            console.log('Paused, your action here');
        });
    }
}

After you can use `app-recorder` in your app

Available events listeners for player:

   - attached
   - loaded
   - playing
   - paused
   - ended
   - error
   - seek

Additional Parameters

You can add all available all Ziggeo related options from below link:

• Ziggeo Available Parameters
• Ziggeo Available Embedding Events

Working Demo:

• react-live-demo
• react-ziggeo demo for local install