Documentation

Overview SDKs API Reference Dashboard Integrations How To's
SDKs > JavaScript SDK > Integrations > React SDK

JavaScript React SDK

Integrations of Ziggeo's Video JavaScript SDK with React

Ziggeo's React JS SDK is the ultimate video recording/playback SDK out there for React.

Ziggeo's React JavaScript SDK is managed publicly on GitHub here.

You can find a demo application on Github as well.

Fork me on GitHub

Documentation

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"

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.get("attribute_name");
        }
    }, [recorder]);
   
    // Embedding (player/recorder instance) will be the first argument
    const handleRecorderRecording = (embedding) => {
        console.log('Recorder onRecording');
    };

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

    ...
 
    <ZiggeoRecorder
        apiKey={API_KEY}
        video={VIDEO_TOKEN}
        height={180}
        width={320}
        onRecording={handleRecorderRecording}
        onUploading={handleRecorderUploading}
        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
  - 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

    <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
        
        // starting from version 3.6.1 extensions no more required
        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

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');
    };
 
...
    <ZiggeoPlayer
      apiKey={'your api key provided by ziggeo'}
      video={'Video Token'}
      theme={'modern'}
      themecolor={'red'}
      skipinitial={false}
      onPlaying={handlePlaying}
      onPaused={handlePaused}
      onRef={ref => (setPlayer(ref))}
      ...
    />
...

All Built-in Player Events

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

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)}
        // 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.

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

Adding Localization

locale={'locale_short_code'}
Or you can change any text with your locale:

    mediaLocales={[
        {
            register: {"ba-videorecorder-chooser.record-video": "Rec"}, // Any object you want to touch
            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
        setUpdateInstance(false);
    }
}, [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
      setUpdateInstance(true);
    }
}

//.....
<ZiggeoRecorder
 {/* Your other settings */}
  updateInstance={updateInstance}
  onRef={e => setRecorder(e)}
  onVerified={handleSomeAction}
/>

More info about localization

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}
    />

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:

Changelog:

  • 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 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