Not able to scan code on IOS 12 (Safari and chrome)

[arthurmmedeiros]

I can't get it working on my Iphone 6 nor in my IPad.

On safari it opens the camera full screen but freezes the whole app. On Chrome it won't even open because 'getUserMedia' is not supported.

This example here also does not work on my Iphone 6.
https://zxing-js.github.io/library/examples/multi-camera/

I've tried different components, this one has this Legacy Mode that works on my phone, however it only scans Qrcode, and I need also BarCode. Is there a workaround for this issue using this lib?

Here's my code:

import React, { useEffect, useState } from 'react';
import { BrowserMultiFormatReader } from '@zxing/library';
import '../index.scss';
import CustomTicket from '../../../components/CustomTicket';
import Modal from '../../../components/Modal';


const constraints = {
  video: true,
};

interface IOwnProps{
    handleInputStudentId: () => void;
    title: string;
    description: string;
}

const KioskCameraMode: React.FC<IOwnProps> = ({
  handleInputStudentId, title, description,
}: IOwnProps) => {
  const [video, setVideo] = useState(document.querySelector('video'));
  const [myDevice, setDevice] = useState('');
  const [scannedResult, setScannedResult] = useState('');
  const [isOpen, setModal] = useState(false);

  useEffect(() => {
    console.log('deveria ser component did mount');
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // Good to go!
    } else {
      alert('getUserMedia() is not supported by your browser');
      // window.location = '/';
    }
    setVideo(document.querySelector('video'));
  }, []);

  const multiReader = new BrowserMultiFormatReader();

  function streamVideo() {
    console.log('stream only once');
    if (video) {
      navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        video.srcObject = stream;
      });
    }
  }

  function setFirstAvailableDevice() {
    console.log('set only once');
    multiReader
      .listVideoInputDevices()
      .then((videoInputDevices) => {
        videoInputDevices.forEach((device) => {
          console.log(device);
          console.log(`${device.label}, ${device.deviceId}`);
          const firstDeviceId = device && device.deviceId;
          if (firstDeviceId) { setDevice(firstDeviceId); }
        });
      })
      .catch((err) => console.error(err));
  }

  useEffect(streamVideo);
  useEffect(setFirstAvailableDevice);

  function callbackResult(result: any, err: any) {
    console.log(result);
    // console.log(err);

    if (result !== null) {
      multiReader.reset();
      handleCheckIn();
    }
  }

  function decodeNow() {
    if (myDevice && !isOpen) {
      multiReader.decodeFromInputVideoDeviceContinuously(myDevice, 'video', callbackResult)
        .then((res: any) => {
          console.log('called then');
        })
        .catch((err: any) => console.error(err));
    }
  }

  useEffect(decodeNow);

  function handleCheckIn() {
    setModal(!isOpen);
  }

  return (
    <>
      <h1 className="uni-title-h1 uni-blue">{title}</h1>
      <h2 className=" uni-title-h2">{description}</h2>
      <div className="kiosk-camera">
        <div className="camera">
          <CustomTicket color="#0B5D90" classNameCustom="custom-ticket-camera-box" />
          <section>
            <section className="camera-section">
              <video
                autoPlay
                id="video"
                width="300"
                height="200"
                muted
                style={{
                  top: '0px',
                  objectFit: 'cover',
                  width: '100%',
                  height: '100%',
                  position: 'absolute',
                  left: '0px',
                }}
              />
            </section>
          </section>

        </div>
        <button
          type="button"
          onClick={handleInputStudentId}
          className="btn btn-primary btn-block btn-lg"
        >
          Enter your Student ID or Username
        </button>
      </div>
      <Modal
        isOpen={isOpen}
        setModal={handleCheckIn}
        description={scannedResult}
        handleClosedModal={decodeNow}
      />
    </>
  );
};
export default KioskCameraMode;

[odahcam]

What version of the library are you using?

Please be aware that in version v0.16 we started using BigInt to support PDF417 decoding, which is not supported on Safari #288, so please, if you must support Safari and iOS use version v0.15.2 or some polyfill on web. That's all for now.

Also, please search before opening new issues, spam only make things harder for me here. Please head to #274 to stay informed or contribute. Thanks.

[arthurmmedeiros]

You're right, I should have posted it there. By the way, I changed the version and it worked.