Type:function, Optional, Arguments: (1) video devices matchingfacingMode, (2) all video devices Called when choosing which device to use for scanning. By default chooses the first video device matchingfacingMode, if no devices match the first video device found is choosen. ...
facingMode === 'user' && 'scaleX(-1)' }} /> ); }; export default QrScanner; 58 changes: 58 additions & 0 deletions 58 src/hooks/useQrScanner.ts Original file line numberDiff line numberDiff line change @@ -0,0 +1,58 @@ import { MutableRefObject, useEffect, useRef } from ...
In Firefox a prompt will be shown to the user asking which camera to use, sofacingModewill not affect it. Install npm install --save react-qr-scanner Example importReact,{Component}from'react'importQrReaderfrom'react-qr-scanner'classTestextendsComponent{constructor(props){super(props)this.state=...
Type:function, Optional, Arguments: (1) video devices matchingfacingMode, (2) all video devices Called when choosing which device to use for scanning. By default chooses the first video device matchingfacingMode, if no devices match the first video device found is choosen. ...
facingMode: "environment" | "user"; videoConstraints?: MediaTrackConstraints; }): React.ReactElement => { const webcamRef = React.useRef(null) const codeReader = new BrowserMultiFormatReader() const webcamRef = React.useRef(null);
In Firefox a prompt will be shown to the user asking which camera to use, so facingMode will not affect it.Installnpm install --save react-qr-scannerExampleimport React, { Component } from 'react' import QrReader from 'react-qr-scanner' class Test extends Component { constructor(props){ su...
API PropertiesTypesDefault ValueDescription constraintsMediaTrackConstraints{ facingMode: 'environment' }Specify which camera should be used (if available). containerStyleobjectnoneStyle object for the container element. videoStyleobjectnoneStyle object for the video element. ...
facingMode Type:environmentoruser, Optional, Default:environment useris the user-facing (front) camera, andenvironmentis the rear camera. torch Type:boolean, Optional Turn the camera flashlight on or off. delay Type:number, Optional, Default:500 ...
facingMode Type: environment or user, Optional, Default: environment user is the user-facing (front) camera, and environment is the rear camera. torch Type: boolean, Optional Turn the camera flashlight on or off. delay Type: number, Optional, Default: 500 videoConstraints Type: MediaTrackConstra...
log(mode); } return ( <Scanner className="some-classname" onDecode={handleDecode} onScannerLoad={handleScannerLoad} constraints={{ audio: false, video: { facingMode: "environment" } }} captureSize={{ width: 1280, height: 720 }} /> ); } Props Most of the props are identical to the ...