dynamsoft / capture-vision-react-native-samples Goto Github PK

import React, { useRef, useState, useEffect } from 'react';
import { RouteProp, useNavigation, useNavigationState, useRoute } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AppStackParamList } from '../../route/routeDef';
import { IFile } from '../../constants/IFile';
import { imgUploadCall } from '../../helper/s3Upload';
import useCustomHeader from '../../hooks/useCustomHeader';
import styled from 'styled-components/native';
import LMText from '../../components/atoms/LMText';
import {
  DCVBarcodeReader,
  DCVCameraView,
  EnumBarcodeFormat,
  EnumTorchState,
} from 'dynamsoft-capture-vision-react-native';
import { BarcodeResult } from '../../node_modules/dynamsoft-capture-vision-react-native/js/BarcodeResult';
import codeMasterStore from '../../stores/codeMasterStore';
import loaderStore from '../../stores/loaderStore';
import Button from '../../components/atoms/button';
import { captureScreen } from 'react-native-view-shot';
import { Platform } from 'react-native';
import { observer } from 'mobx-react';


const Layout = styled.View`
  flex: 1;
  justify-content: space-between;
`;
const NotificationView = styled.View`
  align-items: center;
`;
const NotificationBox = styled.View`
  margin-top: 19px;
  background-color: ${({theme}) => theme.colors.white.base};
  border-radius: ${({theme}) => theme.base.borderRadius}px;
  width: 258px;
  padding: 12px 20px;
  align-items: center;
  justify-content: center;
`;
const NotificationText = styled(LMText)`
  font-size: ${({theme}) => theme.typography.size.s1}px;
  color: ${({theme}) => theme.colors.gray.base};
  text-align: center;
  line-height: 19.56px;
`;
const BottomView = styled.View`
  margin-bottom: 24px;
  padding: 0 ${({theme}) => theme.base.templatePadding}px;
`;
const LicenseText = styled.Text`
  position: absolute;
  top: 25%;
  right: 25%;
  font-size: ${({theme}) => theme.typography.size.l3}px;
  color: ${({theme}) => theme.colors.gray[300]};
`;
const ScanRegion = {
  regionTop: 40,
  regionLeft: 15,
  regionBottom: 60,
  regionRight: 85,
  regionMeasuredByPercentage: true,
};
const Scan = observer(() => {
  const navigation = useNavigation<NativeStackNavigationProp<AppStackParamList>>();
  const router = useRoute<RouteProp<AppStackParamList, '_Scan'>>();
  const routes = useNavigationState(state => state.routes);
  const prevRoute = routes[routes.length - 2];
  const [reader, setReader] = useState<DCVBarcodeReader>();
  // Ref
  const DCVRef = useRef<DCVCameraView>(null);
  const clear = async () => {
    console.log(router.params.key, 'clear start');
    if (reader) {
      reader.removeAllResultListeners();
      await reader.stopScanning();
      setReader(undefined);
    }
    console.log(router.params.key, 'clear end');
  };
  const createReader = async () => {
    console.log(router.params.key, 'createReader start');
    try {
      const _reader = await DCVBarcodeReader.createInstance();
      setReader(_reader);
    } catch (error: any) {
      console.log('create reader error =>', error);
    }
    console.log(router.params.key, 'createReader end');
  };
  const startScanning = async () => {
    console.log(router.params.key, 'const startScanning start');
    try {
      if (!reader) {
        console.log('no reader');
        return;
      }
      await reader.resetRuntimeSettings();
      // Set the expected barcode count to 0 when you are not sure how many barcodes you are scanning.
      // Set the expected barcode count to 1 can maximize the barcode decoding speed.
      let setting = await reader.getRuntimeSettings();
      setting.expectedBarcodesCount = 1;
      // Set the barcode format to read.
      setting.barcodeFormatIds = EnumBarcodeFormat.BF_ALL;
      // Apply the new runtime settings to the barcode reader.
      await reader.updateRuntimeSettings(setting);
      // await reader.startScanning();
    } catch (e) {
      console.log('startScanning');
      console.log(e);
    }
    console.log(router.params.key, 'const startScanning end');
  };
  const regularizeResults = (results: Array<BarcodeResult>) => {
    const resultList = results.map((result) => result.barcodeText);
    const resultBarcodes = removeUnExpectWord(resultList);
    return resultBarcodes;
  };
  const removeUnExpectWord = (barcodes: Array<string>) => {
    const reg = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
    const editedBarcodes = barcodes.map((barcode) => {
      let _barcode = barcode.trim();
      if (_barcode.startsWith('{GS}')) {
        _barcode = _barcode.replace('{GS}', '');
      }
      if (_barcode.endsWith('{GS}')) {
        _barcode = _barcode.replace('{GS}', '');
      }
      return _barcode;
    });
    return editedBarcodes;
  };
  // 사진을 촬영하여 이미지 주소를 생성합니다.
  const handleMakePhotoUrl = async (fileUri: string) => {
    try {
      const file: IFile = {
        uri: fileUri,
        name: codeMasterStore.currentTime.toString(),
        type: 'image/jpeg',
      };
      const url = await imgUploadCall(file);
      return url;
    } catch (e) {
      console.log(e);
      console.log('handleMakePhotoUrl');
    }
  };
  // 화면을 캡쳐하고, 이와 별개로 바코드를 스캔합니다.
  const takeScreenShotAndBarcode = async () => {
    console.log(router.params.key, 'takeScreenShotAndBarcode start');
    try {
      if (!reader) {
        console.log('reader 없음');
        return;
      }
      const capture = await captureScreen({format: 'jpg', quality: 0.3});
      if (!capture) {
        return;
      }
      const url = await handleMakePhotoUrl(capture);
      reader.addResultListener(async (data) => {
        if (data) {
          const regularize = regularizeResults(data);
          if (regularize.length > 0) {
            reader.removeAllResultListeners();
            if (router.params.withImage) {
              await clear();
              // NOTE: react-native-view-shot
              // 해당 라이브러리는 ios 환경을 캡쳐할 수 없는 이슈
              if (Platform.OS === 'ios') {
                goPrevRoute(regularize[0].trim(), false);
              } else {
                goPrevRoute(regularize[0].trim(), true, url);
              }
            } else {
              await clear();
              goPrevRoute(regularize[0].trim(), false);
            }
          }
        }
      });
    } catch (e) {
      console.log('takeScreenShotAndBarcode');
      console.log(e);
    }
    console.log(router.params.key, 'takeScreenShotAndBarcode end');
  };
  const goPrevRoute = (barcode: string, withImage: boolean, imageUrl?: string | null) => {
    console.log(router.params.key, 'goPrevRoute start');
    if (!withImage) {
      // @ts-ignore
      navigation.navigate({
        name: prevRoute.name,
        params: {
          barcode: barcode,
          // @ts-ignore
          key: router.params.key,
        },
        merge: true,
      });
      console.log(router.params.key, 'goPrevRoute end');

      return;
    }
    // @ts-ignore
    navigation.navigate({
      name: prevRoute.name,
      params: {
        barcode: barcode,
        scannedImage: imageUrl,
        // @ts-ignore
        key: router.params.key,
      },
      merge: true,
    });
    console.log(router.params.key, 'goPrevRoute end');
  };
  useCustomHeader({
    title: '바코드 스캔',
  });
  useEffect(() => {
    if (reader) {
      // @ts-ignore
      console.log(router.params.key, 'Scan');
      console.log(reader, 'Scan');
      (async () => {
        try {
          loaderStore.setLoading(true);
          console.log(router.params.key, 'reader.startScanning start');
          await reader.startScanning();
          console.log(router.params.key, 'reader.startScanning end');
          loaderStore.setLoading(false);
        } catch (e) {
          console.log(e);
        }
      })();
    } else {
      (async () => {
        loaderStore.setLoading(true);
        await createReader();
        loaderStore.setLoading(false);
      })();
    }
  }, [reader]);
  return (
    <Layout collapsable={false}>
      <DCVCameraView
        style={{flex: 1, justifyContent: 'space-between'}}
        ref={DCVRef}
        overlayVisible={true}
        // @ts-ignore
        torchButton={{visible: true}}
        torchState={EnumTorchState.OFF}
        scanRegionVisible={true}
        scanRegion={ScanRegion}
      >
        <LicenseText>Powered by Dynamsoft</LicenseText>
        <NotificationView>
          <NotificationBox>
            <NotificationText>{`바코드를 사각형에 위치시키고\n바코드 스캔 버튼을 눌러주세요`}</NotificationText>
          </NotificationBox>
        </NotificationView>
        <BottomView>
          {loaderStore.loading ? null :
            <Button
              title="바코드 스캔"
              size="large"
              onPress={async () => {
                loaderStore.setLoading(true);
                await startScanning();
                await takeScreenShotAndBarcode();
                loaderStore.setLoading(false);
              }}
            />}
        </BottomView>
      </DCVCameraView>
    </Layout>
  );
});
export default Scan;