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:

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":

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"