关于 WebRTC API navigator.mediaDevices.getUserMedia 返回类型的讨论

简介: 关于 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=


相关文章
|
1月前
|
安全 前端开发 物联网
现代 API 的类型划分
【2月更文挑战第28天】
|
1月前
|
前端开发 JavaScript API
TS 中的类型验算,高级通用 API 实现
这篇文章介绍了一些常用的类型通用API封装,包括TS内置类型和关键字的使用,以及TS compiler内部实现的类型。文章截取了一些常用的类型定义和API示例,如Partial、Required、Readonly、NonNullable、Parameters等。还介绍了一些常用的TS关键字,如extends、infer、keyof、typeof、in等。此外,文章还提供了一些实现示例,如Optional API、GetOptional API和UnionToIntersection API。该文章会不断更新。
|
1月前
|
XML API 网络架构
API 常用的接口类型都有哪些?
在软件开发的宏大舞台上,接口充当着不可或缺的角色,确保了不同的软件模块能够高效、无缝地沟通和协作。
|
1月前
|
JSON 关系型数据库 MySQL
这个问题是由于Flink的Table API在处理MySQL数据时,将MULTISET类型的字段转换为了JSON格式
【1月更文挑战第17天】【1月更文挑战第84篇】这个问题是由于Flink的Table API在处理MySQL数据时,将MULTISET类型的字段转换为了JSON格式
46 1
|
1月前
|
XML API 网络架构
API的类型及其区别是什么?
API的类型及其区别是什么?
148 0
|
8月前
|
Web App开发 Linux API
SAP UI5 设备类型检测 Device API 的工作原理
SAP UI5 设备类型检测 Device API 的工作原理
SAP UI5 设备类型检测 Device API 的工作原理
|
7月前
|
XML JSON API
API类型和集成规范指南
API类型和集成规范指南
122 0
|
9月前
|
XML API 网络架构
什么是API接口?API接口的类型,如何调用API接口?
当今互联网技术的发展越来越快,越来越多的网站和应用程序需要获取外部数据来提供更好的服务和用户体验,这就需要使用API接口。本文将会对API接口的概念、类型以及如何调用API接口进行简要介绍。 一、什么是API接口? API(Application Programming Interface)是应用程序开发接口的缩写,意思是一些预设好的函数或方法,这些预设好的函数或方法允许第三方程序通过网络来调用数据或提供基于数据的服务。 API分为很多类别,比如:操作系统API、Web API、平台API等等。对于Web API,它是一种通过网络访问后端系统的电子接口,其中可以包含一些众所周知的Web标
|
API 数据格式 JSON
Serverless-devs怎么设置mock 类型的api 呢?mock 类型的的返回,Api gateway。
Serverless-devs怎么设置mock 类型的api 呢?mock 类型的的返回,Api gateway。
Serverless-devs怎么设置mock 类型的api 呢?mock 类型的的返回,Api gateway。
|
XML Java 测试技术
淘宝API开放平台申请两种类型
淘宝API开放平台申请两种类型