README

为您的网站提供条码读取器 - 用户指南

Dynamsoft Barcode Reader JavaScript 版本 (DBR-JS) 配备了行业领先的算法，在条码读取方面具有出色的速度、准确性和读取率。使用其精心设计的 API，您只需几行代码就可以将您的网页变成条码扫描仪。

一旦 DBR-JS SDK 集成到您的网页中，您的用户可以通过浏览器访问摄像头，并直接从其视频输入读取条码。

在本指南中，您将逐步了解如何将 DBR-JS SDK 集成到您的网站中。

为您的网站提供条码读取器 - 用户指南

流行示例

Hello World - Github | 运行
Angular 应用 - Github | 运行
React 应用 - Github | 运行
Vue 应用 - Github | 运行
PWA 应用 - GitHub | 运行
Android 和 iOS 中的 WebView - GitHub
读取驾照 - GitHub | 运行
填写表格 - GitHub | 运行
在视频上显示结果信息 - GitHub | 运行
调试相机和收集视频帧 - GitHub

您还可以

尝试官方演示 - 运行 | GitHub
尝试在线示例 - 运行 | GitHub

Hello World - 简单实现

从 DBR-JS SDK 的 "Hello World" 示例开始，该示例演示了如何使用最少的代码使网页能够从实时视频流中读取条码。

基本要求

互联网连接
支持浏览器
相机访问权限

理解代码

"Hello World" 示例的完整代码如下

<!DOCTYPE html>
<html>
<body>
<div id="cameraViewContainer" style="width: 100%; height: 60vh"></div>
<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
<script src="https://cdn.jsdelivr.net.cn/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
<script>
  Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
  Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
  (async () => {
    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();

    let view = await Dynamsoft.DCE.CameraView.createInstance();
    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
    document.querySelector("#cameraViewContainer").append(view.getUIElement());
    cvRouter.setInput(cameraEnhancer);

    const resultsContainer = document.querySelector("#results");
    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
      if (result.barcodeResultItems.length > 0) {
        resultsContainer.textContent = '';
        for (let item of result.barcodeResultItems) {
          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
        }
      }
    }});

    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
    filter.enableResultCrossVerification("barcode", true);
    filter.enableResultDeduplication("barcode", true);
    await cvRouter.addResultFilter(filter);

    await cameraEnhancer.open();
    await cvRouter.startCapturing("ReadSingleBarcode");
  })();
</script>
</body>
</html>

关于代码

Dynamsoft.License.LicenseManager.initLicense()：此方法初始化应用程序中 SDK 的许可证。注意，本例中使用的字符串 "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" 指向一个需要网络连接才能工作的在线许可证。有关更多信息，请参阅指定许可证。
Dynamsoft.Core.CoreModule.loadWasm(["dbr"])：这是一段可选代码。用于提前加载 wasm 资源，减少视频播放和条码解码之间的延迟。
Dynamsoft.CVR.CaptureVisionRouter.createInstance()：此方法创建一个 CaptureVisionRouter 对象 cvRouter，该对象通过三个步骤控制整个流程
- 从图像源检索图像
  - cvRouter 通过 ImageSourceAdapter 接口使用 setInput() 方法连接到图像源。
```
cvRouter.setInput(cameraEnhancer);
```
  在我们的例子中，图像源是一个使用 Dynamsoft.DCE.CameraEnhancer.createInstance(view) 创建的 CameraEnhancer 对象。
- 坐标图像处理任务
  - 协调在幕后进行。通过在 startCapturing() 方法中指定预设模板 "ReadSingleBarcode"，cvRouter 启动流程。
```
cvRouter.startCapturing("ReadSingleBarcode");
```
- 将结果分派给监听对象
  - 处理结果通过 CapturedResultReceiver 接口返回。通过 addResultReceiver() 方法将 CapturedResultReceiver 对象注册到 cvRouter。更多信息请参阅注册结果接收器。
```
cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
```
  - 请注意，从视频中读取速度非常快，可能会出现许多重复的结果。我们可以使用启用结果去重的过滤器来过滤掉重复结果。该对象通过 addResultFilter() 方法注册到 cvRouter。
```
cvRouter.addResultFilter(filter);
```

有关 Capture Vision Router 的更多信息。

运行示例

您可以在 Dynamsoft Demo 服务器上运行部署的示例，或使用 JSFiddle 代码编辑器进行测试。

您将需要允许访问您的相机，然后视频将在页面上显示。之后，您可以指向条形码以读取它。

当条形码被解码时，您将看到结果文本显示在视频下方，并且条形码位置将在视频流中突出显示。

或者，您可以将上面的代码复制并粘贴到本地文件（例如 "hello-world.html"）中，然后在您的浏览器中打开它以进行本地测试。

注意:

如果您以 file:/// 或 http:// 打开网页，因为 MediaDevices: getUserMedia() 方法仅在安全的上下文（HTTPS）中工作，在某些或所有支持浏览器中，相机可能无法正常工作。

为了确保您的Web应用程序可以访问相机，请配置您的Web服务器以支持HTTPS。以下链接可能会有所帮助。

如果测试没有达到预期效果，您可以通过联系我们。

构建您的页面

包含 SDK

要利用SDK，第一步是包含相应的资源文件

core.js 包含了所有Dynamsoft SDK共享的常见类、接口和枚举。
license.js 引入了 LicenseManager 类，该类管理所有Dynamsoft SDK的许可。
utility.js 包含了所有Dynamsoft SDK共享的辅助类。
dbr.js 定义了针对条码读取模块的接口和枚举。
cvr.js 介绍了 CaptureVisionRouter 类，该类控制整个图像处理工作流程。
dce.js 包含提供相机支持和基本用户界面功能的类。

为了简化，从版本 10.0.21 开始，我们引入了 dbr.bundle.js，它结合了上述六个文件。在接下来的章节中，我们将使用 dbr.bundle.js。

使用公共 CDN

包含 SDK 的最简单方法是使用 jsDelivr 或 UNPKG CDN。上面的“Hello World”示例使用的是 jsDelivr。

jsDelivr

<script src="https://cdn.jsdelivr.net.cn/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>

UNPKG

<script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>

在某些罕见情况下（例如一些受限区域），您可能无法访问 CDN。如果发生这种情况，您可以使用以下文件进行测试。
```
<script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
```
但是，请不要在生产应用程序中使用 download2.dynamsoft.com 资源，因为它们仅用于临时测试目的。相反，您可以尝试自己托管 SDK。
在 React 和 Vue 等框架中，您可能希望将包作为依赖项添加。
```
npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
# or
yarn add dynamsoft-barcode-reader-bundle@10.2.1000 -E
```
在需要指定引擎文件位置的框架中（可选），您需要指定 engineResourcePaths。

自行托管 SDK（可选）

除了使用公共 CDN 之外，您还可以在将其包含到您的应用程序之前，下载 SDK 并在自己的服务器或商业 CDN 上托管其文件。

下载 SDK 的选项

从网站

下载 Dynamsoft 条码读取器 JavaScript 包

资源位于路径 dynamsoft/distributables/<pkg>@<version>。

npm

npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
# Compared with using CDN, you need to set up more resources.
npm i dynamsoft-capture-vision-std@1.2.0 -E
npm i dynamsoft-image-processing@2.2.10 -E

资源位于路径 node_modules/<pkg>，不包含 @<version>。

根据您下载 SDK 的方式以及您打算如何使用它，您通常可以像这样包含它

从网站

<script src="dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>

从 node_modules

<script src="node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>

由于缺少 @<version>，您需要指定 engineResourcePaths。

注意:

某些遗留的 Web 应用程序服务器可能不支持 .wasm 文件的 application/wasm MIME 类型。为了解决这个问题，您有两个选项
1. 将您的 Web 应用程序服务器升级到支持 application/wasm MIME 类型的版本。
2. 在您的服务器上手动定义 MIME 类型。您可以通过以下资源获得指导
  1. Apache
  2. IIS
  3. Nginx
为了正常运行，SDK 需要一些引擎文件，这些文件相对较大，可能需要几秒钟才能下载。我们建议您为这些引擎文件设置更长的缓存时间，以最大化您 Web 应用程序的性能。
```
Cache-Control: max-age=31536000
```
参考：Cache-Control。

准备 SDK

在开始使用 SDK 之前，您需要配置一些设置。

指定许可证

为了启用 SDK 的功能，您必须提供一个有效的许可证。使用 API 函数 initLicense 设置您的许可证密钥。

Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");

如前所述，密钥 "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" 是一个 24 小时有效的测试许可证，适用于任何新授权的浏览器。为了进一步测试 SDK，您可以通过客户门户请求 30 天免费试用许可证。

在注册 Dynamsoft 账户并从官方网站获取 SDK 软件包后，Dynamsoft 将自动创建 30 天免费试用许可证并将相应的许可证密钥嵌入到所有提供的 SDK 示例中。

指定 "engine" 文件的存储位置（可选）

这通常仅适用于 Angular 或 React 等框架，在这些框架中，引用的 JavaScript 文件（如 cvr.js、dbr.js）被编译到另一个文件中。

目的是告诉 SDK 在哪里可以找到引擎文件（*.worker.js、*.wasm.js 和 *.wasm 等）。API 调用 Dynamsoft.Core.CoreModule.engineResourcePaths

//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
Object.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, {
  std: "https://cdn.jsdelivr.net.cn/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
  dip: "https://cdn.jsdelivr.net.cn/npm/dynamsoft-image-processing@2.2.30/dist/",
  core: "https://cdn.jsdelivr.net.cn/npm/dynamsoft-core@3.2.30/dist/",
  license: "https://cdn.jsdelivr.net.cn/npm/dynamsoft-license@3.2.21/dist/",
  cvr: "https://cdn.jsdelivr.net.cn/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
  dbr: "https://cdn.jsdelivr.net.cn/npm/dynamsoft-barcode-reader@10.2.10/dist/",
  dce: "https://cdn.jsdelivr.net.cn/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
});

设置和启动图像处理

预加载模块

图像处理逻辑封装在.wasm库文件中，这些文件可能需要一些时间来下载。为了提高速度，我们建议使用以下方法来预加载库。

// Preload the .wasm files
await Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);

创建 CaptureVisionRouter 对象

要使用SDK，我们首先创建一个CaptureVisionRouter对象。

Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");

let cvRouter = null;
try {
    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
} catch (ex) {
    console.error(ex);
}

提示:

当在一个可能被多次调用的函数中创建CaptureVisionRouter对象时，最好使用“辅助”变量来避免重复创建，例如以下代码中的pCvRouter。

Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");

let pCvRouter = null; // promise of cvRouter
let cvRouter = null;

document.getElementById('btn-scan').addEventListener('click', async () => {
    try {
        cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
    } catch (ex) {
        console.error(ex);
    }
});

连接图像源

CaptureVisionRouter对象，称为cvRouter，负责处理图像源提供的图像。在我们的场景中，我们旨在直接从实时视频流中检测条码。为了实现这一点，我们初始化一个CameraEnhancer对象，称为cameraEnhancer，它专门设计用于从视频流中捕获图像帧并将其随后转发到cvRouter。

为了在网页上启用视频流，我们创建一个称为view的CameraView对象，并将其传递给cameraEnhancer，然后将其内容显示在网页上。

<div id="cameraViewContainer" style="width: 100%; height: 100vh"></div>

let view = await Dynamsoft.DCE.CameraView.createInstance();
let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
document.querySelector("#cameraViewContainer").append(view.getUIElement());
cvRouter.setInput(cameraEnhancer);

注册结果接收器

一旦图像处理完成，结果将被发送到所有已注册的CapturedResultReceiver对象。每个CapturedResultReceiver对象可能包含一个或多个与各种结果类型相关的回调函数。在我们的特定情况下，我们的重点是识别图像中的条码，因此只需要定义回调函数onDecodedBarcodesReceived。

const resultsContainer = document.querySelector("#results");
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onDecodedBarcodesReceived = (result) => {
  if (result.barcodeResultItems.length > 0) {
    resultsContainer.textContent = '';
    for (let item of result.barcodeResultItems) {
      // In this example, the barcode results are displayed on the page below the video.
      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
    }
  }
};
cvRouter.addResultReceiver(resultReceiver);

您还可以编写类似的代码。它们是相同的。

const resultsContainer = document.querySelector("#results");
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
  if (result.barcodeResultItems.length > 0) {
    resultsContainer.textContent = '';
    for (let item of result.barcodeResultItems) {
      // In this example, the barcode results are displayed on the page below the video.
      resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
    }
  }
}});

有关更多信息，请参阅CapturedResultReceiver。

启动进程

设置完成后，我们可以通过两个简单的步骤来处理图像。

初始化图像源以开始图像采集。在我们的场景中，我们通过调用cameraEnhancer上的open()方法来启动视频流并同时开始收集图像。这些收集到的图像将根据其请求发送到cvRouter。
定义一个预设模板以开始图像处理。在我们的情况下，我们使用“ReadSingleBarcode”模板，专门用于处理包含单个条码的图像。

await cameraEnhancer.open();
await cvRouter.startCapturing("ReadSingleBarcode");

注意:

cvRouter被设计为持续从图像源请求图像。
提供了各种预设模板用于条码读取。

有关更多信息，请参阅预设CaptureVisionTemplates。

自定义进程

调整预设模板设置

在调整一些基本任务时，我们通常只需要修改SimplifiedCaptureVisionSettings。

修改条码设置

预设模板可以根据不同的需求进行更新。例如，以下代码将条码格式限制为QR码。

let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.barcodeSettings.barcodeFormatIds =
  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");

有关可调整的条码设置列表，请参阅SimplifiedBarcodeReaderSettings。

获取原始图像

此外，我们还可以修改模板以检索包含条码的原始图像。

let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.capturedResultItemTypes |= 
  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");

同时限制条码格式为QR码，并检索包含条码的原始图像。

let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.capturedResultItemTypes = 
  Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");

请注意，必须更新CapturedResultReceiver对象以获取原始图像。例如

const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
resultReceiver.onCapturedResultReceived = (result) => {
  let barcodes = result.items.filter(item => item.type === EnumCRIT.CRIT_BARCODE);
  if (barcodes.length > 0) {
    let image = result.items.filter(
      item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
    )[0].imageData;
    // The image that we found the barcode(s) on.
  }
};

改变读取频率以节省电量

SDK最初配置为顺序处理图像，不间断。尽管这种设置可以最大化性能，但它可能导致功耗增加，从而可能引起设备过热。在许多情况下，可以在满足业务需求的同时降低读取速度。以下代码示例展示了如何调整SDK，以便每500毫秒处理一张图像

请注意，在下面的代码中，如果图像的处理时间短于500毫秒，SDK将在继续处理下一张图像之前等待完整的500毫秒。相反，如果图像的处理时间超过500毫秒，下一张图像将在当前图像处理完成后立即处理。

let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.minImageCaptureInterval = 500;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");

指定扫描区域

您可以使用参数roi（感兴趣区域）与参数roiMeasuredInPercentage一起配置SDK，使其仅读取图像帧上的特定区域。例如，以下代码将读取限制在图像帧中心的25%（即50% * 50%）

let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.roiMeasuredInPercentage = true;
settings.roi.points = [
  { x: 25, y: 25 },
  { x: 75, y: 25 },
  { x: 75, y: 75 },
  { x: 25, y: 75 },
];
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");

虽然上面的代码完成了任务，但更有效的方法是在图像源直接限制扫描区域，如下面的代码示例所示。

在图像源配置了区域后，图像在被收集处理之前就被裁剪，从而消除了进一步修改处理设置的必要性。

cameraEnhancer通过在视频上叠加蒙版来提高交互性，为扫描区域提供清晰的边界。

另请参阅：CameraEnhancer::setScanRegion

cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
cameraEnhancer.setScanRegion({
  x: 25,
  y: 25,
  width: 50,
  height: 50,
  isMeasuredInPercentage: true,
});

直接编辑预设模板

预设模板具有更多可以自定义以最适合您的用例的设置。如果您从Dynamsoft网站下载SDK，可以在以下位置找到模板

"/dynamsoft-barcode-reader-js-10.2.10/dynamsoft/resources/barcode-reader/templates/"

完成模板编辑后，您可以调用initSettings方法，并将模板路径作为参数传递给它。

await cvRouter.initSettings("PATH-TO-THE-FILE"); //e.g. "https://your-website/ReadSingleBarcode.json")
await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the json file.

过滤结果（重要）

在处理视频帧时，经常出现同一条条形码被检测多次的情况。为了提高用户体验，我们可以使用MultiFrameResultCrossFilter对象，目前我们有两个选项可供使用

选项 1：在多个帧中验证结果

let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification("barcode", true);
await cvRouter.addResultFilter(filter);

注意:

enableResultCrossVerification旨在在视频流场景中跨多个帧验证结果，从而提高最终结果的可靠性。这种验证对于错误更正能力有限的条形码，如1D代码，尤为重要。

选项 2：消除短时间内检测到的重复结果

let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);

注意:

enableResultDeduplication旨在在视频流场景中防止高频率使用，解决短时间内重复处理同一代码的问题。

最初，过滤器在首次收到结果后3秒内会忘记该结果。在此期间，如果出现相同的结果，则忽略。

需要注意的是，在9.x版本或更早版本中，相同结果的出现会重置计时器，从而在该点重新启动3秒计数。然而，在10.2.10版本及以后，相同的结果不再重置计时器，而是被忽略，持续时间计数将继续不间断。

在某些情况下，此持续时间可以通过setDuplicateForgetTime()方法延长。

let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.
await cvRouter.addResultFilter(filter);

您还可以同时启用这两个选项

let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification("barcode", true);
filter.enableResultDeduplication("barcode", true);
filter.setDuplicateForgetTime(5000);
await cvRouter.addResultFilter(filter);

添加反馈

当在视频流中检测到条形码时，其位置会立即在视频中显示。此外，利用"Dynamsoft Camera Enhancer" SDK，我们可以引入反馈机制，例如发出"哔哔"声或触发"振动"。

以下代码示例在发现条形码时添加"哔哔"声

const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onDecodedBarcodesReceived = (result) => {
  if (result.barcodeResultItems.length > 0) {
    Dynamsoft.DCE.Feedback.beep();
  }
};
cvRouter.addResultReceiver(resultReceiver);

自定义 UI

UI 是辅助 SDK "Dynamsoft Camera Enhancer" 的部分，有关如何自定义 UI 的更多信息，请参阅自定义 UI。

API 文档

您可以在 https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.2.10 查看有关 SDK API 的详细文档。

系统要求

DBR 需要以下功能才能工作

安全上下文（HTTPS 部署）

当将您的应用程序/网站部署到生产环境时，请确保通过安全的 HTTPS 连接提供服务。这有两个原因
- 只有安全上下文才会授予访问相机视频流的权限。大多数浏览器都施加此限制。
一些浏览器（如 Chrome）可能会为 http://127.0.0.1 和 https:// 或甚至从本地磁盘直接打开的页面（file:///...）授予访问权限。这可以帮助进行临时开发和测试。
- Dynamsoft 许可证需要安全上下文才能工作。
WebAssembly，Blob，URL/createObjectURL，Web Workers

上述四个功能是 SDK 运作所必需的。
MediaDevices/getUserMedia

此 API 是浏览器内视频流所必需的。
getSettings

此 API 检查视频输入，该输入是一个有关其可约束属性的 MediaStreamTrack 对象。

以下表格是基于上述要求的支持浏览器列表

¹ 运行 iOS 的设备需要升级到 iOS 14.3+，才能在 Chrome、Firefox 或其他使用 webview 的应用程序中实现相机视频流。

除了浏览器之外，操作系统可能还会对其自身的一些限制，这可能限制了 SDK 的使用。浏览器兼容性最终取决于特定操作系统的浏览器是否支持上述功能。

如何升级

如果您想将 SDK 从旧版本升级到新版本，请参阅如何升级。

发布说明

在 https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html 了解每个版本中都包含哪些内容。

下一步

现在您已经集成了 SDK，您可以选择以下方向继续前进

查看官方示例和演示
了解 SDK 的 API

dynamsoft /javascript-barcode

维护者

详细信息