This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@trully/true-deepfake-detection-next12

TrueDeepfakeDetection Next.js 12

TrueDeepfakeDetection is a liveness validator especially equip to detect deepfake fraud. This version was created to provide support for Next.js Page Router System. Please, go to [TrueDeepfakeDetection package](https://www.npmjs.com/package/@trully/true-deepfake-detection) for full documentation and Next.js App Router System integration.

Install

npm i @trully/true-deepfake-detection-next12

How to use

TrueDeepfakeDetection receives the "configuration" prop. This prop should be an object containing the keys that will let you adapt it to your needs. There are the only five required keys: "isDev", "apiKey", "user_id", "handleData" and "handleError".
This is a client-side component, which means it needs to run on the client. By default, every component created in Next.js is executed on the server. You need to make sure our component runs only on the client.

Add styles

To import the styles, go to your _app.js file and add the following import

import "../node_modules/@trully/true-deepfake-detection-next12/dist/styles.css";

Example

"use client";
import "../styles/globals.css";
import "../node_modules/@trully/true-deepfake-detection-next12/dist/styles.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Creating a component

First, create a new component so you can configure TrueDeepfakeDetection component

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection-next12";

const Trully = () => {
  return (
    <TrueDeepfakeDetection
      configuration={{
        isDev: true,
        apiKey: "YOUR_API_KEY",
        handleData: (data) => {
          //What should be done with the obtained data?
        },
        handleError: (error) => {
          //What should be done if there is an error retrieving the data?
        },
      }}
    />
  );
};
export default Trully;

Required keys definition

Key	Description
isDev	Set it to true when your working in development
apiKey	Your cliente API Key
handleData	Should be a callback function receiving a parameter. This parameter will hold the process result.
handleError	Should be a callback function receiving a parameter. This parameter will hold an error object.
user_id	String. Will match the response you get with the user completing the process

Dynamically import the component

Then, to ensure the component runs only on the client, make a dynamic import with ssr: false.

Example

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() => import("@/components/Trully"), {
  ssr: false,
});

export default function Home() {
  return <DynamicComponent />;
}