react-zoom-sdk-plugin

    1.0.6 • Public • Published

    react-zoom-sdk-plugin

    This plugin offers a demo of the ZoOm liveness checker.

    Limited Support Notice:

    This plugin is meant for example purposes only. This example is not officially supported by Facetec. This project is intended to be reference code for developers integrating ZoOm as a plugin into their React.js apps.

    Watch Demo:

    IMAGE ALT TEXT HERE

    Development Tutorial:

    1) Make a folder for your demo code --- "mkdir demo"

    Note: make sure your folder title uses lower case characters because the script in instruction #3 will not execute 
    if the folder title contains upper case characters.
    

    2) Navigate into the demo folder --- "cd demo"

    3) Run create react app in the demo folder --- "npx create-react-app ."

    4) While create-react-app installs, download the ZoOm SDK for "Browser/Web/JS" at the following link:

    https://dev.zoomlogin.com/zoomsdk/#/downloads

    Note: this plugin uses version 7.1.2 of the ZoOm SDK for "Browser/Web/JS":
    

    5) Once the .zip file has downloaded, unzip it.

    This demo uses two folders from version 7.1.2. of the ZoOm SDK:
    Required folders: "/ZoomAuthentication.js" and "/sample-shared-files/images".
    

    6) Once create-react-app has finished installing, your "/demo" folder should contain two folders we will change: "/public" & "/src".

    i) Place the "/ZoomAuthentication.js" folder from the ZoOm SDK in the "/demo/public" folder.
    ii) Place the "/images" folder from the ZoOm SDK's "/sample-shared-files" into 
    

    7) "/demo/public" should contain a file titled "index.html". Open "/demo/public/index.html" in your code editor.

    8) Underneath the closing body tag in "index.html", add the following code:

    <script> var exports = {}; </script>
    <script src="./ZoomAuthentication.js/ZoomAuthentication.js"></script>
    

    9) After the ZoOm SDK folders and these scripts have been added, our "/demo/public" directory is now ready to be used with the plugin.

    10) Navigate to the "/demo" folder and install the react-zoom-sdk-plugin --- "npm install react-zoom-sdk-plugin"

    11) Install react: "npm install react"

    12) Before we add any code to "/demo/src", lets clean it up.

    i) Navigate into "/demo/src" and delete the following files:
    
        "logo.svg"
        "index.css"
        "App.css"
    
    ii) Open "index.js" and remove the following line of code:
    
        import './index.css';
    
    iii) Open "App.js" in your code editor and remove the following lines of code:
    
        import logo from './logo.svg';
        import './App.css';
    

    13) Add the following lines of code where you just removed the "./logo.svg" and "./App.css" imports:

    import ZoOmDemo from "react-zoom-sdk-plugin";
    import "react-zoom-sdk-plugin/src/style.css";
    

    14) Also in App.js, remove the JSX returned by the App component and replace it with the following code:

    <ZoOmDemo licenseKey="Replace this string with your App Token/License Key" />
    

    15) The react-zoom-sdk-plugin is now ready to be used. Navigate into "/demo" and start the app --- "npm start"

    Development Tutorial with Pictures:

    1) Make a folder for your demo code --- "mkdir demo"

    Note: make sure your folder title uses lower case characters because the script in instruction #3 will not execute 
    if the folder title contains upper case characters.
    

    2) Navigate into the demo folder --- "cd demo"

    3) Run create react app in the demo folder --- "npx create-react-app ."

    4) While create-react-app installs, download the ZoOm SDK for "Browser/Web/JS" at the following link:

    https://dev.zoomlogin.com/zoomsdk/#/downloads

    Note: this plugin uses version 7.1.2 of the ZoOm SDK for "Browser/Web/JS":
    

    alt text

    5) Once the .zip file has downloaded, unzip it.

    This demo uses two folders from version 7.1.2. of the ZoOm SDK:
    Required folders: "/ZoomAuthentication.js" and "/sample-shared-files/images".
    

    alt text

    6) Once create-react-app has finished installing, your "/demo" folder should contain two folders we will change: "/public" & "/src".

    alt text

    i) Place the "/ZoomAuthentication.js" folder from the ZoOm SDK in the "/demo/public" folder.
    ii) Place the "/images" folder from the ZoOm SDK's "/sample-shared-files" into 
    

    alt text

    7) "/demo/public" should contain a file titled "index.html". Open "/demo/public/index.html" in your code editor.

    8) Underneath the closing body tag in "index.html", add the following code:

    <script> var exports = {}; </script>
    <script src="./ZoomAuthentication.js/ZoomAuthentication.js"></script>
    

    alt text

    9) After the ZoOm SDK folders and these scripts have been added, our "/demo/public" directory is now ready to be used with the plugin.

    alt text

    10) Navigate to the "/demo" folder and install the react-zoom-sdk-plugin --- "npm install react-zoom-sdk-plugin"

    11) Install react: "npm install react"

    12) Before we add any code to "/demo/src", lets clean it up.

    i) Navigate into "/demo/src" and delete the following files:
    
        "logo.svg"
        "index.css"
        "App.css"
    

    alt text

    ii) Open "index.js" and remove the following line of code:
    
        import './index.css';
    

    alt text

    iii) Open "App.js" in your code editor and remove the following lines of code:
    
        import logo from './logo.svg';
        import './App.css';
    

    13) Add the following lines of code where you just removed the "./logo.svg" and "./App.css" imports:

    import ZoOmDemo from "react-zoom-sdk-plugin";
    import "react-zoom-sdk-plugin/src/style.css";
    

    14) Also in App.js, remove the JSX returned by the App component and replace it with the following code:

    <ZoOmDemo licenseKey="Replace this string with your App Token/License Key" />
    

    alt text

    15) The react-zoom-sdk-plugin is now ready to be used. Navigate into "/demo" and start the app --- "npm start"

    Install

    npm i react-zoom-sdk-plugin

    DownloadsWeekly Downloads

    9

    Version

    1.0.6

    License

    ISC

    Unpacked Size

    674 kB

    Total Files

    18

    Last publish

    Collaborators

    • jelmished