Where is the demo ?

[MGMehdi]

Your demo link don't work...

[pthacker]

yes , and after importing it isnt working ie camera is not opening

[MGMehdi]

@pthacker I use zxing now

[pthacker]

i am trying to implement Zxing in react PWA, can't wrap my head around it..any suggestions?

[MGMehdi]

I didn't see that the link not working I change it

I don't know what is PWA but here is how I make it work in my reactjs app

import { BrowserBarcodeReader } from '@zxing/library';
import React, { Component } from 'react';
import './App.css';

const codeReader = new BrowserBarcodeReader();

export class App extends Component {

    constructor(props) {
        super(props)

        this.state = {
            result: '',
        }
    }

    handleStart = () => {
        if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
            navigator.mediaDevices.getUserMedia({ video: true })
            codeReader
                .listVideoInputDevices()
                .then(videoInputDevices => {
                    const firstDeviceId = videoInputDevices[0].deviceId;

                    codeReader
                        .decodeOnceFromVideoDevice(videoInputDevices[0].deviceId, 'video')
                        .then(result => this.setState({ result: result.text }))
                        .catch(err => console.error(err));
                })
                .catch(err => console.error(err));
        } else {
            alert("Votre navigateur ne supporte pas l'utilisation de la caméra")
        }
    }

    handleStop = () => {
        codeReader.reset();
    }

    render() {
        return (
            <div className="App">
                <div>
                    <input type="button" value="Start" onClick={this.handleStart} />
                    <input type="button" value="Stop" onClick={this.handleStop} />
                </div>

                <video
                    id="video"
                    width="400"
                    height="300"
                    style={{ "border": "1px solid gray" }}
                ></video>
                <div>
                    <p>{this.state.result}</p>
                </div>
                <div id="result"></div>
            </div>
        )
    }
}

export default App

[stamahto]

Works! Thank you so much for sharing your work. It helps a lot @MGMehdi

[pthacker]

thanks @MGMehdi