Opening front camera on Google Chrome in Android even with facingMode set to "environment".

[salil09]

Hi, I am trying to integrate this, it's opening the rear camera in safari on iOS but it's opening the front camera on chrome in android. Below is the code snippet of what we are trying, there's nothing much to do except setting the facingMode to "environment" but still it's not working, we even tried removing the facingMode, as "environment" is by default according to the documentation but that didn't work either. The demo is working perfectly fine on google chrome in android. Please check and let me know what are we doing here. Thanks and sorry about the formatting.

import React, { Component } from 'react'; import QrReader from 'react-qr-reader' import { withRouter } from 'react-router-dom'; let Instascan = require('instascan'); import { Modal } from "react-bootstrap";

class ScanCode extends Component { constructor(props) { super(props); this.state = { result: 'No result', } }

handleScan = data => {
}

handleError = err => {
}

render() {
    return (
        <div>
            {<QrReader
                delay={300}
                facingMode='environment'
                onError={this.handleError}
                onScan={this.handleScan}
                style={{ width: '100%' }}
            />
            }
        </div>
    )
}

}

export default withRouter(ScanCode);

[jlarteagap]

I have had the same problem with Safari on iOs. The only thing I could do was add a button to change the camera by pressing on it.

1 . Add a state: facingMode: "user"

2. Add a method

camareButton = () =>{
        if(this.state.facingMode === "environment"){
            this.setState({
                facingMode: "user"
            })
        } else {
            this.setState({
                facingMode: "environment"
            })
        }
      }

3. Add button <input type="button" value="Camera..." onClick={this.cameraButton} />

4. Edit Facingmode into < QrReader >

facingMode = {this.state.facingMode}

[carrawao]

Maybe this fixes the problem? I had a problem with it not opening the back camera on newer android devices with multiple front and rear cameras, as you have to specify which camera.

I created the following pull request with changes that fix it for me:

https://github.com/JodusNodus/react-qr-reader/pull/164

[charleskoehl]

There is a possibly-related issue noted in the README: "In Firefox a prompt will be shown to the user asking which camera to use, so facingMode will not affect it."

[avichovatiya67]

Try this...

<QrReader
      onResult={handleScan}
      constraints={{
        facingMode: "environment",
      }}
/>