Discussion on WebRTC API navigator.mediaDevices.getUserMedia return type

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=