Video mediaDevices.getUserMedia zoom is not working in iOS

Question

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!

Answer 1

Unfortunately, this is a known limitation on iOS as iOS Safari does not currently support the zoom capability in mediaDevices.getUserMedia(). The WebKit implementation for iOS doesn't expose advanced camera controls like zoom, focus, or exposure through the standard MediaStreamTrack APIs.

You mentioned that when checking track.getCapabilities() on iOS, zoom isn't present — that confirms this limitation. iOS simply doesn't expose that feature at this time.

You can do these steps:

1. Fallback / UI notice

You could check for support and gracefully degrade your UI:

js

CopyEdit

if (!('zoom' in capabilities)) {

console.log('Zoom is not supported on this device/browser.');

// Optionally show a UI message or hide zoom controls

input.hidden = true;

return;

}

2. Use native app features (if possible)

If you need zoom functionality for a production use case on iOS, consider implementing it in a native wrapper (like via a PWA + native code or using Capacitor/Cordova + a camera plugin).

3. Track WebKit progress

The best we can do for now is follow progress from the WebKit team:

1. https://webkit.org/status/ or raise visibility with a feature request on WebKit’s Bugzilla