@otterscan/react-qr-reader/dist-node/index.js

A React Component for reading QR codes from the webcam

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var browser = require('@zxing/browser');

const isMediaDevicesSupported = () => {
  const isMediaDevicesSupported = typeof navigator !== 'undefined' && !!navigator.mediaDevices;

  if (!isMediaDevicesSupported) {
    console.warn(`[ReactQrReader]: MediaDevices API has no support for your browser. You can fix this by running "npm i webrtc-adapter"`);
  }

  return isMediaDevicesSupported;
};
const isValidType = (value, name, type) => {
  const isValid = typeof value === type;

  if (!isValid) {
    console.warn(`[ReactQrReader]: Expected "${name}" to be a of type "${type}".`);
  }

  return isValid;
};

const useQrReader = ({
  scanDelay: delayBetweenScanAttempts,
  constraints: video,
  onResult,
  videoId
}) => {
  const controlsRef = React.useRef(null);
  React.useEffect(() => {
    const codeReader = new browser.BrowserQRCodeReader(null, {
      delayBetweenScanAttempts
    });

    if (!isMediaDevicesSupported() && isValidType(onResult, 'onResult', 'function')) {
      const message = 'MediaDevices API has no support for your browser. You can fix this by running "npm i webrtc-adapter"';
      onResult(null, new Error(message), codeReader);
    }

    if (isValidType(video, 'constraints', 'object')) {
      codeReader.decodeFromConstraints({
        video
      }, videoId, (result, error) => {
        if (isValidType(onResult, 'onResult', 'function')) {
          onResult(result, error, codeReader);
        }
      }).then(controls => controlsRef.current = controls).catch(error => {
        if (isValidType(onResult, 'onResult', 'function')) {
          onResult(null, error, codeReader);
        }
      });
    }

    return () => {
      var _controlsRef$current;

      (_controlsRef$current = controlsRef.current) === null || _controlsRef$current === void 0 ? void 0 : _controlsRef$current.stop();
    };
  }, []);
};

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    enumerableOnly && (symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    })), keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = null != arguments[i] ? arguments[i] : {};
    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
      _defineProperty(target, key, source[key]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
    });
  }

  return target;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

const styles = {
  container: {
    width: '100%',
    paddingTop: '100%',
    overflow: 'hidden',
    position: 'relative'
  },
  video: {
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    display: 'block',
    overflow: 'hidden',
    position: 'absolute',
    transform: undefined
  }
};

const QrReader = ({
  videoContainerStyle,
  containerStyle,
  videoStyle,
  constraints,
  ViewFinder,
  scanDelay,
  className,
  onResult,
  videoId
}) => {
  useQrReader({
    constraints,
    scanDelay,
    onResult,
    videoId
  });
  return /*#__PURE__*/React.createElement("section", {
    className: className,
    style: containerStyle
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread2(_objectSpread2({}, styles.container), videoContainerStyle)
  }, !!ViewFinder && /*#__PURE__*/React.createElement(ViewFinder, null), /*#__PURE__*/React.createElement("video", {
    muted: true,
    id: videoId,
    style: _objectSpread2(_objectSpread2(_objectSpread2({}, styles.video), videoStyle), {}, {
      transform: (constraints === null || constraints === void 0 ? void 0 : constraints.facingMode) === 'user' && 'scaleX(-1)'
    })
  })));
};
QrReader.displayName = 'QrReader';
QrReader.defaultProps = {
  constraints: {
    facingMode: 'user'
  },
  videoId: 'video',
  scanDelay: 500
};

exports.QrReader = QrReader;
exports.useQrReader = useQrReader;
//# sourceMappingURL=index.js.map