共计 1668 个字符,预计需要花费 5 分钟才能阅读完成。
如下图所示,我在我的项目中应用了 SAP UI5 前端框架的 BarCode scanner
控件,点击 scan 按钮后,执行如下的逻辑:
navigator.mediaDevices
.getUserMedia(defaultConstraints)
.then(function(stream) {if (oZXingScannerAPI) {openBarcodeScannerDialogContains();
} else {oScanDialog.getModel().setProperty("/isNoScanner", true);
openBarcodeInputDialog();}
}
)
getUserMedia
返回值是一个 Promise,它的实现处理程序在胜利获取申请的媒体时接管一个 MediaStream 对象。
该对象在调试器里显示如下:
执行 openBarcodeScannerDialogContains
:
调用 Dialog.open
:
oZXingScannerAPI.decodeFromConstraints
:
ZXing.js 位于 /sap/ndc/thirdparty/ZXing.js,从正文看是微软的 Copyright:
扫描窗口通过 sapNdcRTCDialogOverlayLine
实现:
能够从 Chrome network 标签页看到 ZXing.js
的加载行为。
ZXing(“斑马线”)是一个开源的、多格局的一维 / 二维条码图像处理库,用 Java 实现,可移植到其余语言。
https://github.com/zxing-js/l…
MediaDevices.enumerateDevices()
MediaDevices 办法 enumerateDevices() 申请可用媒体输出和输出设备的列表,例如麦克风、相机、耳机等。返回的 Promise 应用形容设施的 MediaDeviceInfo 数组解析。
对特定设施的拜访由 Permissions API 管制。返回的设施列表将省略任何未授予相应权限的设施,包含:麦克风、摄像头、扬声器抉择(用于输出设备)等。
一个 Promise,当 Promise 实现时接管 MediaDeviceInfo 对象数组。数组中的每个对象都形容了一个可用的媒体输出和输出设备(只有被授予权限的设施类型是“可用的”)。程序很重要 – 默认捕捉设施将首先列出。
如果枚举失败,则 Promise 被回绝。
上面的代码是一个例子,枚举以后运行环境里所有摄像头设施的 id:
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=