import React, { Component } from "react"; import Navbar from "../Home/Navbar/index"; import Footer from "../Home/Footer/index"; import Scanner from "./Scanner/index"; import LastQr from "./LastQr/index"; import Modal from "./Modal/index"; import ReplayIcon from "@material-ui/icons/Replay"; import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; import { connect } from "react-redux"; import { qr } from "~/Redux/actions"; import sciense_6 from "../../assets/images/sciense-6.png"; import "./index.scss"; const maxDesktopSize = 1250; const fontSize = { desktop: { h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, }, }; class QRScan extends Component { state = { value: null, facingMode: 0, tail: null, cameraIds: [], cameraId: "rare", }; componentDidMount() { navigator.mediaDevices.enumerateDevices().then((devices) => { console.log({ devices }); var cameraIds = devices .filter(function (device) { return device.kind === "videoinput"; }) .map((e) => [e.label, e.deviceId]); var environmentPattern = /rear|back|environment/gi; var userPattern = /front|user|face/gi; var backs = cameraIds.filter((label) => environmentPattern.test(label)); var notFronts = cameraIds.filter((label) => !userPattern.test(label)); let cameraId = backs[0] || notFronts[0] || cameraIds[0]; let cameraIdx = cameraIds.findIndex((cam) => cam[1] === cameraId[1]); console.log({ cameraIds, cameraId: cameraId[0], cameraIdx, }); this.setState({ cameraIds, cameraId, cameraIdx, }); }); } async componentDidUpdate() { if (this.state.value) { let tail = this.state.value.slice( this.state.value.lastIndexOf("/") + 1, this.state.value.length ); this.props.info({ tail: tail }); this.setState({ value: null, tail: tail }); } } render() { const { data } = this.props; return ( <> {window.innerWidth > 100 ? ( <>

{window.t("نکته")}

لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار دهید تا اسکن دوربین انجام شود

{this.state.cameraIds.length > 1 ? (
) : null}
this.setState({ facingMode: (this.state.facingMode + 1) % 2, }) } /> {this.state.value !== null ? (
this.setState({ value: null })} >
) : ( )}
{this.state.tail === null ? null : ( )}