React Js İle Barkod Okutma Programında Aşağıdaki Hatayı Alıyorum Yardımcı Olabilir misiniz?

medenibarlas 402 gün önce

295 defa görüntülendi ve 1 kişi tarafından değerlendirildi

TypeError: window.BarcodeDetector is not a constructor

Kodlar Bu Şekilde

import { useRef,useEffect, useState } from "react";

function App() {

const video = useRef(null);
const canvas = useRef(null);
const [barcode, setBarcode] = useState(null);

const openCam = () =>{

navigator.mediaDevices.getUserMedia({ video:{ width:1280,height:720 } })
.then(stream => {
  video.current.srcObject = stream;
  video.current.play();

  const ctx = canvas.current.getContext('2d');
  => Burda Hata Alıyorum const barcode =  new window.BarcodeDetector({formats: ['qr_code', 'ean_13']});

react

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (4)

gokcin

105 gün önce

Hatanın kaynağı, tarayıcınızın BarcodeDetector API'sini desteklememesi olabilir. Bu durumda, bir polyfill kullanmanız gerekebilir.

import { useRef, useEffect, useState } from "react";

function App() {
  const video = useRef(null);
  const canvas = useRef(null);
  const [barcode, setBarcode] = useState(null);

  const openCam = () => {
    navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 } })
      .then(stream => {
        video.current.srcObject = stream;
        video.current.play();

        const ctx = canvas.current.getContext('2d');

        // BarcodeDetector API'nin tarayıcıda desteklenip desteklenmediğini kontrol et
        if ('BarcodeDetector' in window) {
          const barcodeDetector = new window.BarcodeDetector({ formats: ['qr_code', 'ean_13'] });

          // Daha fazla işlem yapabilir veya tanıma başarılı olduğunda setBarcode ile state'i güncelleyebilirsiniz
          barcodeDetector.detect(video.current)
            .then(barcodes => {
              console.log('Barcodes detected:', barcodes);
              // setBarcode(barcodes);
            })
            .catch(error => {
              console.error('Barcode detection error:', error);
            });
        } else {
          console.error('Tarayıcınız BarcodeDetector API\'yi desteklemiyor.');
        }
      })
      .catch(error => {
        console.error('Kamera açma hatası:', error);
      });
  };

  useEffect(() => {
    openCam();
  }, []); // Sadece bir kere çağrılması için boş bağımlılık dizisi

  return (
    <div>
      <video ref={video} width="640" height="480"></video>
      <canvas ref={canvas} width="640" height="480"></canvas>
    </div>
  );
}

export default App;

Bu kod, BarcodeDetector API'sini kontrol eder ve destekleniyorsa tanıma işlemini gerçekleştirir. Ayrıca, hata durumlarını da kontrol eder ve konsola bilgi yazdırır.

#013147

database

115 gün önce

Barcode okuma işlemlerini sadece mobil browserler destekliyor, PC üzerinde destekleyen bir browser mevcut değil. İsterseniz bir de mobil üzerinden deneyin, sorun hala devam ediyor ise çözüm aramaya başlayabiliriz.

#013089

ebykdrms

122 gün önce

const barcode = new window.BarcodeDetector({formats: ['qr_code', 'ean_13']});
yerine
const barcode = new BarcodeDetector({formats: ["qr_code","ean_13"]});
kullanılıp denenebilir. Yani window kullanmadan...

#013070

ahmet28

122 gün önce

Aynı sorunu bende yaşıyorum inşAllah bilen birisi çıkarda yanıtlar

#013069