I am facing issue on mobile I am not able to open camera directly there is a text name "start scanning" user needs to click that button to open camera and start ,is there any way to open camera directly without click on start scanning button on mobile , I forcefully did it on web using Dom that's working fine
Want to open camera ditectly without click on text "start scanning"..
This is our current code
import { Html5QrcodeScanner } from "html5-qrcode";
import { useEffect, useState } from "react";
const qrcodeRegionId = "html5qr-code-full-region";
// Creates the configuration object for Html5QrcodeScanner.
const createConfig = (props) => {
let config = {};
if (props.fps) {
config.fps = props.fps;
}
if (props.qrbox) {
config.qrbox = props.qrbox;
}
if (props.aspectRatio) {
config.aspectRatio = props.aspectRatio;
}
if (props.disableFlip !== undefined) {
config.disableFlip = props.disableFlip;
}
return config;
};
const Html5QrcodePlugin = (props) => {
const [text, setText] = useState(false);
// useEffect(() => {
// let inner = document.getElementById("html5-qrcode-anchor-scan-type-change");
// if (inner?.innerHTML == "Scan using camera directly") {
// inner.innerHTML = "";
// }
// });
useEffect(() => {
// when component mounts
const config = createConfig(props);
const verbose = props.verbose === true;
// Suceess callback is required.
if (!props.qrCodeSuccessCallback) {
throw "qrCodeSuccessCallback is required callback.";
}
const html5QrcodeScanner = new Html5QrcodeScanner(
qrcodeRegionId,
config,
verbose
);
html5QrcodeScanner.render(
props.qrCodeSuccessCallback,
props.qrCodeErrorCallback
);
// cleanup function when component will unmount
return () => {
html5QrcodeScanner.clear().catch((error) => {
console.error("Failed to clear html5QrcodeScanner. ", error);
});
};
}, []);
return <div id={qrcodeRegionId} onClick={() => setText(!text)} />;
};
export default Html5QrcodePlugin;