Nomnom Pumpernickle Muffins

    react-ziggeo

    4.5.0 • 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](https://github.com/Ziggeo/react-ziggeo#upgrade-ziggeo-sdk) 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.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
                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
            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.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 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

    Install

    npm i react-ziggeo

    Homepage

    ziggeo.com

    DownloadsWeekly Downloads

    1,217

    Version

    4.5.0

    License

    Apache-2.0

    Unpacked Size

    16.6 MB

    Total Files

    10

    Last publish

    Collaborators

    • oliverfriedmann
    • sambua