`}
>
- Pass Copy Icon here
+ Pass clickable(button, anchor, icon etc) element here to bind onClick event
```
@@ -50,7 +50,9 @@ const successCb = ({ msgType, msg, data }) => {
successCb={successCb}
successMsg="Copied Successfully"
elementToBeCopy={`Fe-pilot library offers component like scanner, voice search, autofill otp, phonebook, share`}
-/>
+>
+ Click here to copy (Element, String, etc)
+
```
> [!Note]
> **successCb** will get an object contains the property ```msgType```, ```msg```, ```data```
diff --git a/__app/component/CopyToClipboard/index.js b/__app/component/CopyToClipboard/index.js
new file mode 100644
index 0000000..00802d5
--- /dev/null
+++ b/__app/component/CopyToClipboard/index.js
@@ -0,0 +1,5 @@
+import CopyToClipboard from './CopyToClipboard';
+
+export { CopyToClipboard };
+
+export default CopyToClipboard;
diff --git a/__app/component/FaceDetector/FaceDetector.js b/__app/component/FaceDetector/FaceDetector.js
index 4521552..3962517 100644
--- a/__app/component/FaceDetector/FaceDetector.js
+++ b/__app/component/FaceDetector/FaceDetector.js
@@ -1,18 +1,224 @@
-import FaceDetectorInit from './FaceDetectorInit';
-import FaceDetectorFlash from './FaceDetectorFlash';
-import FaceDetectorClose from './FaceDetectorClose';
-import FaceDetectorFacing from './FaceDetectorFacing';
-
-export {
- FaceDetectorInit,
- FaceDetectorFlash,
- FaceDetectorClose,
- FaceDetectorFacing,
+/* eslint-disable no-inner-declarations */
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { handleError, handleLoading } from '../services/handlerService';
+import Wrapper from '../Wrapper/Wrapper';
+
+let mediaStream = null;
+let videoUnmount = null;
+let unmoutRenderLoop = null;
+const failureMsgDefault = {
+ unSupported: 'Face Detector is not supporting in your device',
+ streamingFailed: 'Camera streaming failed',
+ barCodeDetectionFailed: 'Bar code detection failed',
+ flashUnsupported: 'Flash is not supporting in your device',
+};
+
+function FaceDetector({
+ // successCb,
+ failureCb,
+ loadingCb,
+ // successMsg,
+ failureMsg: failureMsgProps,
+ cameraType,
+ zIndex,
+ children,
+}) {
+ const failureMsg = { ...failureMsgDefault, ...failureMsgProps };
+ let list = null;
+ let video = null;
+ let facingMode;
+
+ const [flash, setFlash] = useState(false);
+ const [isBrowser, setIsBrowser] = useState(false);
+ const [faces, setFaces] = useState([]);
+
+ const stopStreaming = () => {
+ if (mediaStream) {
+ mediaStream.getTracks().forEach((track) => {
+ track.stop();
+ });
+ }
+ };
+
+ const allClear = () => {
+ cancelAnimationFrame(videoUnmount);
+ stopStreaming();
+ clearTimeout(unmoutRenderLoop);
+ };
+
+ const detectCodes = async () => {
+ const WindowFaceDetector = globalThis.FaceDetector;
+ const faceDetector = new WindowFaceDetector();
+
+ // eslint-disable-next-line consistent-return
+ async function render() {
+ try {
+ const getFaces = await faceDetector.detect(video);
+
+ if (getFaces[0]) {
+ setFaces(getFaces);
+ // cancelAnimationFrame(videoUnmount);
+ // stopStreaming();
+ // clearTimeout(unmoutRenderLoop);
+ }
+ } catch (error) {
+ return handleError({ msgType: 'BAR_CODE_DETECTION_FAILED', msg: failureMsg.barCodeDetectionFailed || JSON.stringify(error), failureCb });
+ }
+ }
+
+ unmoutRenderLoop = setTimeout(() => {
+ (function renderLoop() {
+ videoUnmount = requestAnimationFrame(() => {
+ setTimeout(renderLoop, 1500);
+ });
+ render();
+ }());
+ }, 100);
+ };
+
+ const createVideo = async (id) => {
+ document.getElementById('streaming-video')?.remove();
+
+ video = document.createElement('video');
+
+ video.id = 'streaming-video';
+ video.srcObject = mediaStream;
+ video.autoplay = true;
+ video.play();
+ // video.style.width = '100vh';
+ // video.style.height = '100%';
+ video.style.position = 'absolute';
+ // video.style.overflow = 'hidden';
+ // video.style.display = 'block';
+ video.style.zIndex = zIndex;
+ video.style.top = '0';
+ video.style.left = '0';
+ video.style.objectFit = 'fill';
+ list = document.getElementById(id);
+ list.before(video);
+ };
+
+ const startStreaming = async () => {
+ try {
+ mediaStream = await navigator.mediaDevices.getUserMedia({
+ video: {
+ // deviceId: camera.deviceId,
+ facingMode,
+ zoom: true,
+ resizeMode: true,
+ focusDistance: true,
+ focusMode: true,
+ },
+ });
+ } catch (error) {
+ return handleError({ msgType: 'STREAMING_FAILED', msg: failureMsg.streamingFailed || JSON.stringify(error), failureCb });
+ }
+ return mediaStream;
+ };
+
+ const startVideo = async (id = 'camera') => {
+ mediaStream = await startStreaming();
+ createVideo(id);
+ detectCodes();
+ };
+
+ const toggleFlash = async () => {
+ const track = mediaStream.getVideoTracks()[0];
+ try {
+ await track.applyConstraints({
+ advanced: [{ torch: !flash }],
+ });
+ setFlash((s) => !s);
+ } catch (error) {
+ return handleError({ msgType: 'FLASH_UPSUPPORTED', msg: failureMsg.flashUnsupported, failureCb });
+ }
+ return true;
+ };
+
+ const toggleCamera = () => {
+ facingMode = facingMode === 'user' ? 'environment' : 'user';
+
+ stopStreaming();
+ cancelAnimationFrame(videoUnmount);
+ clearTimeout(unmoutRenderLoop);
+ startVideo();
+ };
+
+ const handleBrowserSupport = () => {
+ if (FaceDetector.isBrowserSupport()) {
+ facingMode = cameraType === 'back' ? 'environment' : 'user';
+ handleLoading({ loadingCb });
+
+ startVideo();
+ } else {
+ return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb });
+ }
+
+ return true;
+ };
+
+ useEffect(() => {
+ setIsBrowser(true);
+ handleBrowserSupport();
+
+ return () => {
+ allClear();
+ };
+ }, []);
+
+ return isBrowser && FaceDetector.isBrowserSupport() && (
+
+
+ {
+ React.Children.map(children, (child) => React.cloneElement(child, {
+ zIndex,
+ allClear,
+ toggleCamera,
+ toggleFlash,
+ }))
+ }
+ {
+ faces.map((face) => (
+
+ ))
+ }
+
-
- {
- React.Children.map(children, (child) => React.cloneElement(child, {
- zIndex,
- allClear,
- toggleCamera,
- toggleFlash,
- }))
- }
- {
- faces.map((face) => (
-
- ))
- }
-
+
+ {
+ React.Children.map(children, (child) => React.cloneElement(child, {
+ zIndex,
+ allClear,
+ toggleCamera,
+ toggleFlash,
+ successCb,
+ successMsg,
+ failureCb,
+ failureMsg,
+ }))
+ }
+
-
- {
- React.Children.map(children, (child) => React.cloneElement(child, {
- zIndex,
- allClear,
- toggleCamera,
- toggleFlash,
- successCb,
- successMsg,
- failureCb,
- failureMsg,
- }))
- }
-
- 
+