本文講解使用 SAP UI5 barcode scanner 呼叫本機攝像頭時，在 PC 端瀏覽器測試時，同樣是 Cordova API 不可用，進入 else 分支的執行邏輯：
![](https://img-blog.csdnimg.cn/img_convert/bbf32611308b4cba208bdea8cca6f33b.png)

如果 `Cordova` API 不可用，但是 `isUserMediaAccessSupported` 仍然返回 true，則仍然可以開啟 scan 對話方塊：

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

```javascript
/**
	 * Used to detect browsers which does not have access to html5 user media api and cant use device camera
	 * @private
	 * @returns {boolean} true is user media access supported by html5 compatible browser
	 */
	function isUserMediaAccessSupported() {
		return !!(window && window.navigator && window.navigator.mediaDevices && window.navigator.mediaDevices.getUserMedia);
	}
```
這裡 `window.navigator.mediaDevices.getUserMedia` 的[含義](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)：

MediaDevices.getUserMedia() 方法提示使用者允許使用媒體輸入，該輸入生成一個 MediaStream，其軌道包含所請求的媒體型別。

例如，該流可以包括影片軌道（由硬體或虛擬影片源（如相機、影片記錄裝置、螢幕共享服務等）產生）、音訊軌道（類似地，由物理或 虛擬音訊源（如麥克風、A/D 轉換器等），以及可能的其他軌道型別。

它返回一個解析為 MediaStream 物件的 Promise。 如果使用者拒絕許可，或者匹配的媒體不可用，則分別以 NotAllowedError 或 NotFoundError DOMException 拒絕承諾。

其中 getUserMedia 為瀏覽器原生實現。

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

```javascript
async function getMedia(constraints) {
  let stream = null;

try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}
```

傳入 `getUserMedia` 的 `constraints` 引數：

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

`constraints` 是一個物件，指定要請求的媒體型別，以及每種型別的任何要求。

約束引數是一個具有兩個成員的物件：影片和音訊，描述請求的媒體型別。 必須指定其中之一或兩者。 如果瀏覽器無法找到符合給定約束的指定型別的所有媒體軌道，則返回的 Promise 會被 `NotFoundError DOMException` 拒絕。

如果為媒體型別指定了 true，則結果流中需要包含該型別的軌道。 如果由於任何原因不能返回一個，對 getUserMedia() 的呼叫將導致錯誤。

雖然出於隱私原因無法訪問有關使用者相機和麥克風的資訊，但應用程式可以使用額外的約束來請求它需要和想要的相機和麥克風功能。 以下表示對 1280x720 相機解析度的偏好：

```json
{
  audio: true,
  video: { width: 1280, height: 720 }
}
```

如果不存在此解析度或更高解析度的相機，則返回的 Promise 將被 OverconstrainedError 拒絕，並且不會提示使用者。

關於 navigator.mediaDevices.getUserMedia 的輸入引數說明

相關文章