4

I'm implementing zxing-js to scan QR Code. My task is to enable zoom while using the camera. It works well in Chrome on Android devices, but when I try to use it on iOS it doesn't work.

Below is my code:

navigator.mediaDevices.getUserMedia(environment).then(async mediaStream => {
    document.querySelector('video').srcObject = mediaStream;

    await sleep(1000);

    const track = mediaStream.getVideoTracks()[0];
    const capabilities = track.getCapabilities();
    const settings = track.getSettings();

    const input = document.querySelector('input[type="range"]');

    // Check whether zoom is supported or not.
    if (!('zoom' in capabilities)) {
        return $(log).html('Zoom is not supported by ' + track.label);
    }

    // Map zoom to a slider element.
    input.min = capabilities.zoom.min;
    input.max = capabilities.zoom.max;
    input.step = capabilities.zoom.step;
    input.value = settings.zoom;
    input.oninput = function(event) {
        track.applyConstraints({advanced: [ {zoom: event.target.value} ]});
    }
    input.hidden = false;
});

When I check inside the capabilities using iOS device, the zoom attribute is not on the list. Any ideas on how can I solve this problem?

Thank you so much!

guyneedhelp
  • 41
  • 1
  • 2
  • I dont believe zoom is supported on iOS with getUserMedia with a MediaStream. Google have a polyfil but the github issues show not working on iOS https://github.com/GoogleChromeLabs/imagecapture-polyfill – Marcus Jun 26 '20 at 17:10
  • Also a duplicate of: https://stackoverflow.com/questions/55625473/how-to-achieve-open-camera-and-zoom-in-out-facility-for-ios-safari-browser-using – Marcus Jun 26 '20 at 17:11
  • @Marcus Thank you for your explanation. I really hope iOS will support this getUserMedia zoom feature in the next update. – guyneedhelp Jun 29 '20 at 12:48

0 Answers0