头图

Discussion on WebRTC API navigator.mediaDevices.getUserMedia return type

JerryWang_汪子熙
中文

As shown in the figure below, I used the BarCode scanner control of the SAP UI5 front-end framework in the project. After clicking the scan button, the following logic was executed:

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

getUserMedia return value is a Promise, and its implementation handler receives a MediaStream object upon successful acquisition of the requested media.

The object is displayed in the debugger as follows:

Execute openBarcodeScannerDialogContains :

Call Dialog.open :

oZXingScannerAPI.decodeFromConstraints

ZXing.js is located at /sap/ndc/thirdparty/ZXing.js, which is Microsoft's Copyright from the comments:

The scan window is implemented with sapNdcRTCDialogOverlayLine :

The loading behavior of ZXing.js can be seen from the Chrome network tab.

ZXing ("Zebra Crossing") is an open source, multi-format 1D/2D barcode image processing library, implemented in Java and portable to other languages.

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

MediaDevices.enumerateDevices()

The MediaDevices method enumerateDevices() requests a list of available media input and output devices, such as microphones, cameras, headphones, and so on. The returned Promise is resolved using an array of MediaDeviceInfo describing the device.

Access to specific devices is controlled by the Permissions API. The returned device list will omit any devices that have not been granted the appropriate permissions, including: microphone, camera, speaker selection (for output devices), etc.

A Promise that receives an array of MediaDeviceInfo objects when the Promise completes. Each object in the array describes an available media input and output device (only the device type granted permission is "available"). The order is important - the default capture device will be listed first.

If the enumeration fails, the Promise is rejected.

The following code is an example that enumerates the ids of all camera devices in the current runtime environment:

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);
});

The above code produces the following output on my computer:

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

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
846 声望
1.6k 粉丝
0 条评论
846 声望
1.6k 粉丝
文章目录
宣传栏