react-zxing
Advanced tools
Comparing version 1.0.7 to 1.1.0
"use strict"; | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
var __generator = (this && this.__generator) || function (thisArg, body) { | ||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
function verb(n) { return function (v) { return step([n, v]); }; } | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (_) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
case 0: case 1: t = op; break; | ||
case 4: _.label++; return { value: op[1], done: false }; | ||
case 5: _.label++; y = op[1]; op = [0]; continue; | ||
case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
default: | ||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); continue; | ||
} | ||
op = body.call(thisArg, _); | ||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
} | ||
}; | ||
var __rest = (this && this.__rest) || function (s, e) { | ||
var t = {}; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
t[p] = s[p]; | ||
if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
t[p[i]] = s[p[i]]; | ||
} | ||
return t; | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
@@ -7,2 +54,3 @@ exports.useZxing = void 0; | ||
var useBrowserMultiFormatReader_1 = require("./useBrowserMultiFormatReader"); | ||
var useTorch_1 = require("./useTorch"); | ||
var utils_1 = require("./utils"); | ||
@@ -26,2 +74,16 @@ function isUseZxingOptionsWithDeviceId(options) { | ||
}); | ||
var _e = (0, useTorch_1.useTorch)({ | ||
resetStream: function () { return __awaiter(void 0, void 0, void 0, function () { | ||
return __generator(this, function (_a) { | ||
switch (_a.label) { | ||
case 0: | ||
stopDecoding(); | ||
return [4 /*yield*/, startDecoding()]; | ||
case 1: | ||
_a.sent(); | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); }, | ||
}), torchInit = _e.init, torch = __rest(_e, ["init"]); | ||
var decodeCallback = (0, react_1.useCallback)(function (result, error) { | ||
@@ -33,14 +95,29 @@ if (result) | ||
}, []); | ||
var startDecoding = (0, react_1.useCallback)(function () { | ||
if (!ref.current) | ||
return; | ||
if (paused) | ||
return; | ||
if (deviceId) { | ||
reader.decodeFromVideoDevice(deviceId, ref.current, decodeCallback); | ||
} | ||
else { | ||
reader.decodeFromConstraints(constraints !== null && constraints !== void 0 ? constraints : constants_1.DEFAULT_CONSTRAINTS, ref.current, decodeCallback); | ||
} | ||
}, [reader, deviceId, constraints, paused, decodeCallback]); | ||
var startDecoding = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () { | ||
var mediaStream, videoTrack; | ||
return __generator(this, function (_a) { | ||
switch (_a.label) { | ||
case 0: | ||
if (!ref.current) | ||
return [2 /*return*/]; | ||
if (paused) | ||
return [2 /*return*/]; | ||
if (!deviceId) return [3 /*break*/, 2]; | ||
return [4 /*yield*/, reader.decodeFromVideoDevice(deviceId, ref.current, decodeCallback)]; | ||
case 1: | ||
_a.sent(); | ||
return [3 /*break*/, 4]; | ||
case 2: return [4 /*yield*/, reader.decodeFromConstraints(constraints !== null && constraints !== void 0 ? constraints : constants_1.DEFAULT_CONSTRAINTS, ref.current, decodeCallback)]; | ||
case 3: | ||
_a.sent(); | ||
_a.label = 4; | ||
case 4: | ||
mediaStream = ref.current.srcObject; | ||
videoTrack = mediaStream.getVideoTracks()[0]; | ||
if (videoTrack) | ||
torchInit(videoTrack); | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); }, [reader, deviceId, constraints, paused, decodeCallback, torchInit]); | ||
var stopDecoding = (0, react_1.useCallback)(function () { | ||
@@ -60,3 +137,3 @@ reader.reset(); | ||
} | ||
}, [constraints, options, setConstraints]); | ||
}, [constraints, options]); | ||
(0, react_1.useEffect)(function () { | ||
@@ -68,4 +145,7 @@ startDecoding(); | ||
}, [startDecoding, stopDecoding]); | ||
return { ref: ref, start: startDecoding, stop: stopDecoding }; | ||
return { | ||
ref: ref, | ||
torch: torch, | ||
}; | ||
}; | ||
exports.useZxing = useZxing; |
@@ -0,4 +1,52 @@ | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
var __generator = (this && this.__generator) || function (thisArg, body) { | ||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
function verb(n) { return function (v) { return step([n, v]); }; } | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (_) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
case 0: case 1: t = op; break; | ||
case 4: _.label++; return { value: op[1], done: false }; | ||
case 5: _.label++; y = op[1]; op = [0]; continue; | ||
case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
default: | ||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); continue; | ||
} | ||
op = body.call(thisArg, _); | ||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
} | ||
}; | ||
var __rest = (this && this.__rest) || function (s, e) { | ||
var t = {}; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
t[p] = s[p]; | ||
if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
t[p[i]] = s[p[i]]; | ||
} | ||
return t; | ||
}; | ||
import { useCallback, useEffect, useRef, useState } from "react"; | ||
import { DEFAULT_CONSTRAINTS } from "./constants"; | ||
import { useBrowserMultiFormatReader } from "./useBrowserMultiFormatReader"; | ||
import { useTorch } from "./useTorch"; | ||
import { deepCompareObjects } from "./utils"; | ||
@@ -22,2 +70,16 @@ function isUseZxingOptionsWithDeviceId(options) { | ||
}); | ||
var _e = useTorch({ | ||
resetStream: function () { return __awaiter(void 0, void 0, void 0, function () { | ||
return __generator(this, function (_a) { | ||
switch (_a.label) { | ||
case 0: | ||
stopDecoding(); | ||
return [4 /*yield*/, startDecoding()]; | ||
case 1: | ||
_a.sent(); | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); }, | ||
}), torchInit = _e.init, torch = __rest(_e, ["init"]); | ||
var decodeCallback = useCallback(function (result, error) { | ||
@@ -29,14 +91,29 @@ if (result) | ||
}, []); | ||
var startDecoding = useCallback(function () { | ||
if (!ref.current) | ||
return; | ||
if (paused) | ||
return; | ||
if (deviceId) { | ||
reader.decodeFromVideoDevice(deviceId, ref.current, decodeCallback); | ||
} | ||
else { | ||
reader.decodeFromConstraints(constraints !== null && constraints !== void 0 ? constraints : DEFAULT_CONSTRAINTS, ref.current, decodeCallback); | ||
} | ||
}, [reader, deviceId, constraints, paused, decodeCallback]); | ||
var startDecoding = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { | ||
var mediaStream, videoTrack; | ||
return __generator(this, function (_a) { | ||
switch (_a.label) { | ||
case 0: | ||
if (!ref.current) | ||
return [2 /*return*/]; | ||
if (paused) | ||
return [2 /*return*/]; | ||
if (!deviceId) return [3 /*break*/, 2]; | ||
return [4 /*yield*/, reader.decodeFromVideoDevice(deviceId, ref.current, decodeCallback)]; | ||
case 1: | ||
_a.sent(); | ||
return [3 /*break*/, 4]; | ||
case 2: return [4 /*yield*/, reader.decodeFromConstraints(constraints !== null && constraints !== void 0 ? constraints : DEFAULT_CONSTRAINTS, ref.current, decodeCallback)]; | ||
case 3: | ||
_a.sent(); | ||
_a.label = 4; | ||
case 4: | ||
mediaStream = ref.current.srcObject; | ||
videoTrack = mediaStream.getVideoTracks()[0]; | ||
if (videoTrack) | ||
torchInit(videoTrack); | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); }, [reader, deviceId, constraints, paused, decodeCallback, torchInit]); | ||
var stopDecoding = useCallback(function () { | ||
@@ -56,3 +133,3 @@ reader.reset(); | ||
} | ||
}, [constraints, options, setConstraints]); | ||
}, [constraints, options]); | ||
useEffect(function () { | ||
@@ -64,3 +141,6 @@ startDecoding(); | ||
}, [startDecoding, stopDecoding]); | ||
return { ref: ref, start: startDecoding, stop: stopDecoding }; | ||
return { | ||
ref: ref, | ||
torch: torch, | ||
}; | ||
}; |
@@ -18,4 +18,8 @@ /// <reference types="react" /> | ||
ref: import("react").RefObject<HTMLVideoElement>; | ||
start: () => void; | ||
stop: () => void; | ||
torch: { | ||
isOn: boolean; | ||
isAvailable: boolean | null; | ||
on: () => Promise<void>; | ||
off: () => Promise<void>; | ||
}; | ||
}; |
{ | ||
"name": "react-zxing", | ||
"version": "1.0.7", | ||
"version": "1.1.0", | ||
"description": "Integrate zxing to your React application using a custom hook", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -69,2 +69,36 @@ <div align="center"> | ||
## Advanced Usage | ||
### Torch | ||
> ⚠️ Torch support is not available for iOS devices. See [this issue](https://github.com/zxing-js/browser/issues/12). | ||
You can control the torch by accessing the `torch` property of the `useZxing` return value: | ||
```tsx | ||
import { useZxing } from "react-zxing"; | ||
export const BarcodeScanner = () => { | ||
const { | ||
ref, | ||
torch: { on, off, isOn, isAvailable }, | ||
} = useZxing(); | ||
return ( | ||
<> | ||
<video ref={ref} /> | ||
{isAvailable ? ( | ||
<button onClick={() => (isOn ? off() : on())}> | ||
{isOn ? "Turn off" : "Turn on"} torch | ||
</button> | ||
) : ( | ||
<strong>Unfortunately, torch is not available on this device.</strong> | ||
)} | ||
</> | ||
); | ||
}; | ||
``` | ||
Torch support is limited to devices that support the `torch` constraint. You can check if torch is available by checking the `isAvailable` property. | ||
## Options | ||
@@ -71,0 +105,0 @@ |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
35589
21
572
177
1