Skip to content
Angular Ziggeo Demo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
src
.angular-cli.json
.editorconfig
.gitignore
README.md
karma.conf.js
package.json
protractor.conf.js
tsconfig.json
tslint.json
yarn.lock

README.md

Angular 5 example use of integration Ziggeo ready application

Installation demo project

  • Install all dependencies npm install
  • ng build
  • 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 ng serve also ready for production --prod and AOT --aot

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

.angular-cli.json

      "styles": [
        "../node_modules/ziggeo-client-sdk/build/ziggeo.css"
      ],
      "scripts": [
        "../node_modules/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 application level options:
- Screen recorder options:
```
[options]="{ ...,
    allowscreen: true,
    chrome_extension_id: 'Your chrome extension ID',
    chrome_extension_install_link: 'Your link to chrome extension installation',
    opera_extension_id: 'Your opera extension ID',
    opera_extension_install_link: 'Your link to opera extension installation'
...}"
```

Screen Capture is currently supported by Firefox, Chrome and Opera. <br/>
- Firefox: Direct support -- no extensions or plugins required <br/>
- Chrome + Opera: use extension builder located in your application manager <br/>

Note: By default Ziggeo Chrome/Opera extension will be set to `Ziggeo screen recorder` extension which will be available only in `localhost`. <br/>
[For more info](https://ziggeo.com/features/screen-recording), in this url you also can find how to set your own extensions <br/>

- Locale setting : `[options]="{ ..., l10n: 'de', ...}"` <br/>
- Set WebRTC streaming option `webrtc_streaming` to `true` : `[options]="{ ..., webrtc_streaming: true, ...}"`

Additional Parameters

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

You can’t perform that action at this time.