关于 WebRTC API navigator.mediaDevices.getUserMedia 返回类型的讨论
如下图所示,我在项目中使用了 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/library
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=
相关文章
- Android API之java.lang.String
- thinkphp6: 给接口api做签名验证(php 8.1.1 / thinkphp v6.0.10LTS )
- Android2.2 API 中文文档系列(5) —— View
- uni-app api:获取网络类型(hbuilderx 3.6.18)
- uni-app:发布为h5站点时服务端的api配置
- 使用RestTemplate消费Hybris User API获取指定用户的信息
- Atitit 并发锁机制 艾提拉总结 目录 1. 2. 用的比较频繁锁2 1.1. 语法锁sync api锁2 1.2. 数据库标志位锁2 1.3. 文件锁2 2. 锁得类型32 2.
- Atitit.跨平台预定义函数 魔术方法 魔术函数 钩子函数 api兼容性草案 v2 q216 java c# php js.docx
- Atitit.论图片类型 垃圾文件的识别与清理 流程与设计原则 与api概要设计 v2 pbj
- 如何在 Web 应用里消费 SAP Leonardo 的机器学习 API
- iOS swift 网络请求框架(AFN/Moya/Alamofire)和原生API
- .NET MVC第八章、Web Api 跨域接口
- 蓝牙4.0 传统蓝牙 低功耗 API接口 BLE系统架构 GPA 和 GATT
- Windows API一日一练(1)第一个应用程序
- 如何找到适合自己的开源API测试工具?
- AVPacket相关api内存管理
- ELK专栏之Java API操作-02
- 初学者不会写接口怎么办?微软Visual Studio 2022无脑式API接口创建——Swagger一键导入APIKit快速测试
- Java JDK 各版本更新信息API文档(帮助文档下载)