如下圖所示，我在專案中使用了 SAP UI5 前端框架的 `BarCode scanner` 控制元件，點選 scan 按鈕後，執行如下的邏輯：

![](https://img-blog.csdnimg.cn/img_convert/da385ae9f973f88c27c9b3d0361d6dac.png)

```javascript
navigator.mediaDevices
				.getUserMedia(defaultConstraints)
				.then(
					function(stream) {
						if (oZXingScannerAPI) {
							openBarcodeScannerDialogContains();
						} else {
							oScanDialog.getModel().setProperty("/isNoScanner", true);
							openBarcodeInputDialog();
						}
					}
				)
```

`getUserMedia` 返回值是一個 Promise，它的實現處理程式在成功獲取請求的媒體時接收一個 MediaStream 物件。

該物件在偵錯程式裡顯示如下：
![](https://img-blog.csdnimg.cn/img_convert/4c54478da444ffeffff15a51d199947e.png)

執行 `openBarcodeScannerDialogContains`：

![](https://img-blog.csdnimg.cn/img_convert/3725d9b83c46c67570bf9c94e65c5e98.png)

呼叫 `Dialog.open`：
![](https://img-blog.csdnimg.cn/img_convert/b899c27545fc92cbd12e7de21a9ceaa2.png)

`oZXingScannerAPI.decodeFromConstraints`：

![](https://img-blog.csdnimg.cn/img_convert/f052e7339ed1a0004530cbce66ed499f.png)

ZXing.js 位於 /sap/ndc/thirdparty/ZXing.js，從註釋看是微軟的 Copyright：
![](https://img-blog.csdnimg.cn/img_convert/8785331d1acd52b3eda35b02324cd160.png)

![](https://img-blog.csdnimg.cn/img_convert/af47c5bcde53c6c8e9170de271b144ca.png)

![](https://img-blog.csdnimg.cn/img_convert/4ec8710c5116aa471c2364986d78479c.png)

掃描視窗透過 `sapNdcRTCDialogOverlayLine` 實現：

![](https://img-blog.csdnimg.cn/img_convert/66784f853fd6542b0aeaf97c0ff849cb.png)

可以從 Chrome network 標籤頁看到 `ZXing.js` 的載入行為。
![](https://img-blog.csdnimg.cn/img_convert/0b713b3a7bc3522022d61e4689c1d2ec.png)

ZXing（“斑馬線”）是一個開源的、多格式的一維/二維條碼影像處理庫，用 Java 實現，可移植到其他語言。

https://github.com/zxing-js/library

# MediaDevices.enumerateDevices()

MediaDevices 方法 enumerateDevices() 請求可用媒體輸入和輸出裝置的列表，例如麥克風、相機、耳機等。 返回的 Promise 使用描述裝置的 MediaDeviceInfo 陣列解析。

對特定裝置的訪問由 Permissions API 控制。 返回的裝置列表將省略任何未授予相應許可權的裝置，包括：麥克風、攝像頭、揚聲器選擇（用於輸出裝置）等。

一個 Promise，當 Promise 完成時接收 MediaDeviceInfo 物件陣列。 陣列中的每個物件都描述了一個可用的媒體輸入和輸出裝置（只有被授予許可權的裝置型別是“可用的”）。 順序很重要 - 預設捕獲裝置將首先列出。

如果列舉失敗，則 Promise 被拒絕。

下面的程式碼是一個例子，列舉當前執行環境裡所有攝像頭裝置的 id：

```javascript
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

// List cameras and microphones.

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label +
                " id = " + device.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});
```
上述程式碼在我電腦上產生如下輸出：

> videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=

關於 WebRTC API navigator.mediaDevices.getUserMedia 返回型別的討論

相關文章