angular-ziggeo
TypeScript icon, indicating that this package has built-in type declarations

4.0.1 • Public • Published

Angular-Ziggeo SDK for Angular versions 9 and higher

You can find working demo with code example here

Basic usage:

1. Be sure that `ziggeo-client-sdk` installed (you will be informed if it's not installed, as peerDependecy) and Angular core packages are installed.

2. include Ziggeo Assets to your `angular.json` file in you demo project
 "architect": {
   "build": {
       ...
       "styles": [
         ...
         "node_modules/ziggeo-client-sdk/build/ziggeo.css",
         ...
       ],
       "scripts": [
         ...
         "node_modules/ziggeo-client-sdk/build/ziggeo.js"
         ...
       ]
     },
   },
 } 
3. Import Ziggeo Mdule in your root NgModule
    ...
    import { ZiggeoModule } from 'angular-ziggeo';
    ...

    @NgModule({
      declarations: [
    ...
        RecorderComponent,
        PlayerComponent
    ...
      ],
      imports: [
    ...
        ZiggeoModule,
    ...
      ],
    ...
    })
    export class AppModule { }
4. After you can use embedding event inside your Components on this way:
Recorder Component
@Component({
    selector: 'app-recorder',
    templateUrl: './recorder.component.html'
})
export class RecorderComponent implements AfterViewChecked {
    title = 'Home page';
    recorder: any;
    @ViewChild('ziggeorecorder') ziggeorecorder: any;

    ngAfterViewChecked(): void {
        if (!this.recorder && typeof this.ziggeorecorder.recorder.recorderInstance !== 'undefined') {
          this.recorder = this.ziggeorecorder.recorder.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);
        }
    }
}

recorder.component.html :

    <ziggeo-recorder #ziggeorecorder
         [apiKey]="'ZIGGEO_API_KEY'"
         [options]="{height: 220, width: 340, l10n: 'en'}"
    ></ziggeo-recorder>
Player Component
@Component({
    selector: 'app-player',
    templateUrl: './player.component.html'
})
export class PlayerComponent implements AfterViewChecked {
    player: any;
    @ViewChild('ziggeoplayer') ziggeoplayer: any;

    ngAfterViewChecked(): void {
        if (!this.player && typeof this.ziggeoplayer.player.playerInstance !== 'undefined') {
            this.player = this.ziggeoplayer.player.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');
            });
            
            // And more other available Player events
        }
    }
}

player.component.html :

    <ziggeo-player #ziggeoplayer
       [apiKey]="'Ziggeo_API_key'"
       [options]="{video: 'Video Token', theme:'modern', width: 520, l10n: 'de'}"
    ></ziggeo-player>

Changelog:
- v3.0.0 started supporting Angular 9

Package Sidebar

Install

npm i angular-ziggeo

Homepage

ziggeo.com

Weekly Downloads

139

Version

4.0.1

License

Apache-2.0MIT

Unpacked Size

495 kB

Total Files

69

Last publish

Collaborators

  • sambua