/ Miscellaneous

Ziggeo's react component for easy react application deployment

Ziggeo's react component for easy react application deployment

Ziggeo's React component v2

Ziggeo's react component for easy react application deployment.

Video Recorder

import React from 'react'
import {ZiggeoRecorder} from 'react-ziggeo'
...
 
    recorderRecording = () => {
        console.log('Recorder onRecording');
    };

    recorderUploading = () => {
        console.log('Recorder uploading');
    };
 
...
 
    <ZiggeoRecorder
        apiKey={API_KEY}
        video={VIDEO_TOKEN}
        height={180}
        width={320}
        onRecording={this.recorderRecording}
        onUploading={this.recorderUploading}
    />
 
...

All Built-in Recorder Events

Available event listeners for Recorder
   
   - onPlaying
   - onPaused
   - onAttached
   - onLoaded
   - onEnded
   - onSeek 
   - onError
   - onManuallySubmitted
   - onUploaded
   - onUploadSelected
   - onRecording
   - onUploading
   - onRerecord,
   - onCountdown,
   - onRecordingProgress,
   - onUploadProgress,
   - onAccessForbidden,
   - onAccessGranted,
   - onCameraUnresponsive,
   - onVerified,
   - onNoCamera,
   - onNoMicrophone

Recorder option Screen Recorder

Screen Capture is currently supported by Firefox, Chrome and Opera.

  • Firefox: Direct support -- no extensions or plugins required
  • Chrome + Opera: use extension builder located in your application manager

Note: By default Ziggeo Chrome/Opera extension will be set.
For more info, in this url you also can find how to set your own extensions

    <ZiggeoRecorder
        apiKey={API_KEY}
        allowscreen={true}
        allowrecord={false} // Optional you can even set it to true
        allowupload={false} // Optional you can even set it to true
        chrome_extension_id={YOUR_CHROME_EXTENSION_ID}
        chrome_extension_install_link={YOUR_CHROME_EXTENSION_INSTALLATION_LINK}
        opera_extension_id={YOUR_OPERA_EXTENSION_ID}
        opera_extension_install_link={YOUR_OPERA_EXTENSION_INSTALLATION_LINK}
        ...
    />

## Video Player

```$xslt
import React from 'react'
import {ZiggeoPlayer} from 'react-ziggeo'
 
...
 
playing = () => {
    console.log('it\'s playing, your action here');
};
 
paused = () => {
    console.log('it\'s paused, your action when pause');
};
 
...
    <ZiggeoPlayer
      apiKey={'your api key provided by ziggeo'}
      video={'Video Token'}
      theme={'modern'}
      themecolor={'red'}
      skipinitial={false}
      onPlaying={this.playing}
      onPaused={this.paused}
      ...
    />
...

All Built-in Player Events

Available events listeners for Player
   
   - onPlaying
   - onPaused
   - onAttached
   - onLoaded
   - onEnded
   - onError
   - onSeek 

Extensions

Get Recorder Instance and invoke methods

Add attribute onRef={ref => (this.child = ref)} to obtain access to recorder instances and their methods.

    <ZiggeoRecorder
        apiKey={apiToken}
        onRef={ref => (this.child = ref)}
    />

Now you can call built-in methods:

    this.child.get(args);
    this.child.play();
    this.child.record();
    this.child.upload();
    this.child.rerecord();
    this.child.stop();
    this.child.hidePopup();
    this.child.reset();

Also you can also obtain an instance:

    let recorderInstance = this.child.recorderInstance();
    // e.g. call: playerInstance.play();
    let properties = this.playerInstance.get('propertyName');
Get Player Instance and invoke methods

Add attribute onRef={ref => (this.child = ref)} to obtain access to player instances and their methods.

    <ZiggeoPlayer
        apiKey={apiToken}
        video={videoToken}
        onRef={ref => (this.child = ref)}
    />

Now you can call built-in methods:

    this.child.play();
    this.child.pause();
    this.child.stop();
    this.child.seek(seconds);
    this.child.set_volume(volume_level_1_to_100);

Also you can also obtain an instance:

    let playerInstance = this.child.playerInstance();
    // e.g. call: playerInstance.play();
    let properties = this.playerInstance.get('propertyName');

Component Options

    preventReRenderOnUpdate={boolean} // default is true

Notes

By default, components prevent re-rendering the UI with the option preventReRenderOnUpdate, to overwrite this.

    <ZiggeoRecorder
        preventReRenderOnUpdate={false}
    />

There are some issues with when being called right after initialization.

GitHub