valterbarros · March 28, 2023 18:24
diff --git a/caf-implementation.html b/caf-implementation.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DocumentDetector</title>
    <script src="https://repo.combateafraude.com/javascript/release/document-detector/5.4.0.umd.js"></script>
    <script>
      const getCafToken = async () => {
        const cafTokenUrl = 'link para endpoint com o token token';

        try {
          const response = await fetch(cafTokenUrl);
          const data = await response.json();

          return data;
        } catch (err) {
          console.error(err);
        }
      };

      const buildDocumentDetector = (options) => {
        const { DocumentDetectorSdk } = window['@combateafraude/document-detector'];

        return new DocumentDetectorSdk(options);
      };

      const defaultOptions = {
        appearenceSettings: {
          hideCameraSwitchButton: true,
          hideCaptureMask: false,
        }
      };

      let sdk;

      const initSdk = async () => {
        const tokenData = await getCafToken();

        console.log(tokenData);

        const sdkWrapper = buildDocumentDetector({
          ...defaultOptions,
          token: tokenData.token,
          environment: tokenData.environment,
          textSettings: {
            messages: {
              processMessage: 'imagem carregando',
            },
          },
        });

        await sdkWrapper.initialize();

        return sdkWrapper;
      };

      const capture = async (container, documentSide, mode, documentType) => {
        const stages = [{ mode, attempts: 0, duration: 0 }];
        // div or another element on DOM
        const sdkContainer = document.getElementById(container);
        const captureConfigs = { documentType, documentSide, totalAttempts: 0 };
        const result = await sdk.capture(sdkContainer, stages, captureConfigs);

        return result;
      }

      window.addEventListener('load', async () => {
        sdk = await initSdk();
        
        document.getElementById('loading').remove();


        console.log(sdk)

        const { blob } = await capture('camera-container', 'front', 'manual', 'cnh');

        sdk.close();
        sdk.dispose();

        const url = URL.createObjectURL(blob)
        document.getElementById('preview').src = url;
      });
    </script>
    <style>
      .captureContainer {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      #preview {
        width: 90vw;
      }
      .wrapper {
        position: relative;
        z-index: 1;
        width: 90vw;
        height: 90vw;
        border-radius: 8px;
        transform: translateZ(0);
        overflow: hidden;
        background-color: var(--color-black);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
      @media screen and (min-width: 800px) {
        .wrapper {
          width: 40vw;
          height: min(60vh, 40vw);
          max-width: 600px;
          max-height: 60vh;
        }
      }
      #loading {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="captureContainer">
      <div id="loading">
        <p>Carregando CAF...</p>
      </div>
      <div class="wrapper">
        <div id="camera-container">
        </div>
        <img id="preview">
      </div>
    </div>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DocumentDetector</title>
	<script src="https://repo.combateafraude.com/javascript/release/document-detector/5.4.0.umd.js"></script>
	<script>
	const getCafToken = async () => {
	const cafTokenUrl = 'link para endpoint com o token token';

	try {
	const response = await fetch(cafTokenUrl);
	const data = await response.json();

	return data;
	} catch (err) {
	console.error(err);
	}
	};

	const buildDocumentDetector = (options) => {
	const { DocumentDetectorSdk } = window['@combateafraude/document-detector'];

	return new DocumentDetectorSdk(options);
	};

	const defaultOptions = {
	appearenceSettings: {
	hideCameraSwitchButton: true,
	hideCaptureMask: false,
	}
	};

	let sdk;

	const initSdk = async () => {
	const tokenData = await getCafToken();

	console.log(tokenData);

	const sdkWrapper = buildDocumentDetector({
	...defaultOptions,
	token: tokenData.token,
	environment: tokenData.environment,
	textSettings: {
	messages: {
	processMessage: 'imagem carregando',
	},
	},
	});

	await sdkWrapper.initialize();

	return sdkWrapper;
	};

	const capture = async (container, documentSide, mode, documentType) => {
	const stages = [{ mode, attempts: 0, duration: 0 }];
	// div or another element on DOM
	const sdkContainer = document.getElementById(container);
	const captureConfigs = { documentType, documentSide, totalAttempts: 0 };
	const result = await sdk.capture(sdkContainer, stages, captureConfigs);

	return result;
	}

	window.addEventListener('load', async () => {
	sdk = await initSdk();

	document.getElementById('loading').remove();


	console.log(sdk)

	const { blob } = await capture('camera-container', 'front', 'manual', 'cnh');

	sdk.close();
	sdk.dispose();

	const url = URL.createObjectURL(blob)
	document.getElementById('preview').src = url;
	});
	</script>
	<style>
	.captureContainer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	}
	#preview {
	width: 90vw;
	}
	.wrapper {
	position: relative;
	z-index: 1;
	width: 90vw;
	height: 90vw;
	border-radius: 8px;
	transform: translateZ(0);
	overflow: hidden;
	background-color: var(--color-black);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	}
	@media screen and (min-width: 800px) {
	.wrapper {
	width: 40vw;
	height: min(60vh, 40vw);
	max-width: 600px;
	max-height: 60vh;
	}
	}
	#loading {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	</style>
	</head>
	<body>
	<div class="captureContainer">
	<div id="loading">
	<p>Carregando CAF...</p>
	</div>
	<div class="wrapper">
	<div id="camera-container">
	</div>
	<img id="preview">
	</div>
	</div>
	</body>
	</html>