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.
Documentation
We have a demo project here for you to clone.
Video Recorder
import React from 'react'
import {ZiggeoRecorder} from 'react-ziggeo'
...
// after react-ziggeo 3.3.0 version embedding argument also accessible
recorderRecording = (embedding /* only starting from react-ziggeo 3.3.0 */) => {
console.log('Recorder onRecording');
};
recorderUploading = (embedding /* only starting from react-ziggeo 3.3.0 */) => {
console.log('Recorder uploading');
};
...
<ZiggeoRecorder
apiKey={API_KEY}
video={VIDEO_TOKEN}
height={180}
width={320}
onRecording={this.recorderRecording}
onUploading={this.recorderUploading}
/>
...
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
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'
...
// after react-ziggeo 3.3.0 version embedding argument also accessible
playing = (embedding /* only starting from react-ziggeo 3.3.0 */) => {
console.log('it\'s playing, your action here');
};
paused = (embedding /* only starting from react-ziggeo 3.3.0 */) => {
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}
...
/>
...
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)}
/>
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_0.00_to_1.00);
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.
Additional Parameters
React SDK supports all of the following events and parameters:
Changelog:
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 arefalse
v2.4.0 added application option manageability
webrtc_streaming
, by defaultfalse
v3.0.0 Upgraded to Ziggeo R31 stable version -- Added locale support. Example:
locale={'de'}
-- Added auth supportauth={true}
-- Added possibility to set outflashUrl={'flash-url'}
v3.1.0 Added
ready_to_play
embedding event to Player and made minor structure changesv3.1.1 Fixed webpack/babel polyfill issue, 'Also fixed Identifier 'e' has already been declared' related bug
v3.2.0 Upgraded ziggeo-client SDK to
2.32.7
pre-release version, to fixFF >62
TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL
v3.3.0 Added
embedding
argument for each event Application-wide Embedding Eventsv3.4.0 Upgraded ziggeo-client SDK to
~2.33.0
version, to fix only-audio bugv3.5.1 Upgraded ziggeo-client SDK to
~2.34.5
with new features. Stream Merge ( Like: Screen + Camera), Pausable WebRTC Recorder, Thumbnail generation.v3.5.2 Upgraded ziggeo-client SDK to
~2.34.8
fixed bugs.