4.6.2 • Public • Published

Ziggeo's React component v2

(For documentation on v1, see here)

For older versions which are not supporting hooks (react version < 16.8.0) please use versions react-ziggeo older versions 4.0.0.

We have a demo project here for you to clone.

Upgrade Ziggeo SDK

This package build based only on stable version of Ziggeo-JS-SDK, but you can easily upgrade to the latest Ziggeo SDK version. Steps require to do:

  • Edit root package.json file by upgrading to the latest version of ziggeo-client-sdk (Ziggeo JS SDK Github Url);
  • Run npm install or npm update (yarn install if you're using Yarn) to install/update packages;
  • Run npm run build command to re-build package;
  • Optional step. To install package in your own local project, after you complete steps above you can run npm pack which will generate a new package in the root folder with the .tgz extension. Then in your own project you can replace react-ziggeo package number with path to the generated pack. For example instead of react-ziggeo: "4.x.x" you can use react-ziggeo: "path_to_the/package/react-ziggeo-version_number.tgz"

NOTE: ZiggeoAudioRecorder/ZiggeoAudioPlayer could be work only after [upgrading]( to the higer or equal `ziggeo-client-sdk@2.39`

Video Recorder

import React from 'react'
import {ZiggeoRecorder} from 'react-ziggeo'
    // after react-ziggeo 4.0.0 version hooks are applied, but class Component also supportis
    // Correct way to access to recorder/player instance is:
    const [recorder, setRecorder] = useState(null);

    useEffect(() => {
        if (recorder) {
            // DO stuff here
            recorder.on("any_event", function (rec) { ... }, recorder);
    }, [recorder]);
    // Embedding (player/recorder instance) will be the first argument
    const handleRecorderRecording = (embedding) => {
        console.log('Recorder onRecording');

    const handleRecorderUploading = (embedding) => {
        console.log('Recorder uploading');

        onRef={ref => (setRecorder(ref))}

All Built-in Recorder Events

Available event listeners for Recorder
  - onPlaying
  - onPaused
  - onAttached
  - onLoaded
  - onEnded
  - onSeek 
  - onError
  - onManuallySubmitted
  - onUploaded
  - onUploadSelected
  - onRecording
  - onUploading
  - onRerecord
  - onCountdown
  - onProcessing
  - onProcessed
  - onRecordingProgress
  - onUploadProgress
  - onAccessForbidden
  - onAccessGranted
  - onCameraUnresponsive
  - onVerified
  - onNoCamera
  - onNoMicrophone
  - onMicrophonehealth
  - onCamerahealth
  - onCameraSignal
  - onBound
  - onHasCamera
  - onHasMicrophone
  - onRecordingStopped
  - onStopped
  - onReadyToRecord
  - onRef

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

        allowrecord={false} // Optional you can even set it to true
        allowupload={false} // Optional you can even set it to true
        // starting from version 3.6.1 extensions no more required

Video Player

import React from 'react'
import {ZiggeoPlayer} from 'react-ziggeo'

    const [player, setPlayer] = useState(null);

    useEffect(() => {
        if (player) {
            // DO stuff here
            player.on("attached", function (embedding) {}, player);
    }, [player]);
    const phandlePlaying = (embedding) => {
        console.log('it\'s playing, your action here');
    const phandlePaused = (embedding) => {
        console.log('it\'s paused, your action when pause');
      apiKey={'your api key provided by ziggeo'}
      video={'Video Token'}
      onRef={ref => (setPlayer(ref))}

All Built-in Player Events

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


Get Recorder Instance and invoke methods

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

        onRef={ref => (this.child = ref)}
        // With Hooks: onRef={ref => (setRecorder(ref))}
Get Player Instance and invoke methods

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

        onRef={ref => (this.child = ref)}
        // With Hooks: onRef={ref => (setPlayer(ref))}

Adding Localization

Or you can change any text with your locale:

            register: {"ba-videorecorder-chooser.record-video": "Rec"}, // Any object you want to touch
            languages: ['de', 'it'], // Optional, any languages where changes are required to be affected
            priority: 10 // Optional, default is 10.

Trigger Instance Update

below example use the recorder, but the same is true also for the player

const [recorder, setRecorder] = useState(null);
const [updateInstance, setUpdateInstance] = useState(false);

// Whenever you want to get a new instance of Ziggeo recorder, after any changes you made
// Use as a loading approach when complete with getting new instanse set updateInstance as false, setUpdateInstance(false)
useEffect(() => {
    if (recorder) {
        // Should be a new instance
}, [recorder]);

// You can handle getting with new instance
const handleSomeAction = () => {
    if (recorder) { 
      // Whenever we will set as true, we will get a new recorder instance

 {/* Your other settings */}
  onRef={e => setRecorder(e)}

More info about localization

Component Options

    preventReRenderOnUpdate={boolean} // default is true


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


Fix Safari Flash Player

In case is you have error with launching recorder in Safari please add settings below: webrtc_streaming_if_necessary={true}

Additional Parameters

React SDK supports all of the following events and parameters:


  • v4.6.1 Added several missing video recorder embedding events (onMicrophonehealth, onCamerahealth etc.).
  • v4.6.0 Was upgraded to the stable r-39 with new features and improvements, where ZiggeoAudioRecorder and ZiggeoAudioPlayer components will support by default.
  • v4.5.0 Added new ZiggeoAudioRecorder and ZiggeoAudioPlayer components, could be used only with the lates ziggeo-js-sdk. Upgrade Instruction
  • v4.3.3 Downgraded to Ziggeo stable revision~2.35.22, nothing very serious changes are made on the latest version.
  • v4.3.1 added _key support; Upgraded ziggeo-client SDK to ~2.36.5 fixed bugs.
  • v4.3.0 Upgraded ziggeo-client SDK to ~2.36.3 fixed bugs.
  • v4.2.0 Upgraded ziggeo-client SDK to ~2.35.20 fixed bugs, added new Ziggeo features selectfirstcovershotonskip, picksnapshotmandatory and updateInstance prop. Use Example
  • v4.1.0 Upgraded ziggeo-client SDK to ~2.35.18 fixed bugs, added mediaLocales prop type to set any locale. New fittodimensions & fullscreenmandatory features included.
  • v4.0.0 Upgraded ziggeo-client SDK to ~2.35.4 fixed bugs, added more new features multistream with options drag-and-drop and resize. In player now settings are manageable via methods.
  • v3.6.0 Upgraded ziggeo-client SDK to ~2.35.0 fixed bugs, added more new features multistream with options drag-and-drop and resize. In player now settings are manageable via methods.
  • v3.5.2 Upgraded ziggeo-client SDK to ~2.34.8 fixed bugs.
  • v3.5.1 Upgraded ziggeo-client SDK to ~2.34.5 with new features. Stream Merge ( Like: Screen + Camera), Pausable WebRTC Recorder, Thumbnail generation.
  • v3.4.0 Upgraded ziggeo-client SDK to ~2.33.0 version, to fix only-audio bug
  • v3.3.0 Added embedding argument for each event Application-wide Embedding Events
  • v3.2.0 Upgraded ziggeo-client SDK to 2.32.7 pre-release version, to fix FF >62 TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL
  • v3.1.0 Added ready_to_play embedding event to Player and made minor structure changes
  • v3.1.1 Fixed webpack/babel polyfill issue, 'Also fixed Identifier 'e' has already been declared' related bug
  • v3.0.0 Upgraded to a Ziggeo R31 stable version -- Added locale support. Example: locale={'de'} -- Added auth support auth={true} -- Added possibility to set out flashUrl={'flash-url'}
  • v2.5.1 babel was upgraded to version 7.*
  • v2.4.1 added application option manageability webrtc_on_mobile & webrtc_streaming_if_necessary, by default both are false
  • v2.4.0 added application option manageability webrtc_streaming, by default false

Package Sidebar


npm i react-ziggeo


Weekly Downloads






Unpacked Size

17.3 MB

Total Files


Last publish


  • oliverfriedmann
  • sambua