[mediacapture-image] Pull Request: Update pan, tilt and zoom constraints

eehakkin has just submitted a new pull request for https://github.com/w3c/mediacapture-image:

== Update pan, tilt and zoom constraints ==
In w3ctag/design-reviews#358, TAG wants that there are distinct prompt for camera and pan/tilt/zoom. The idea of this CL is to use a new CameraDevicePermissionDescriptor dictionary introduced in w3c/permissions/pull/204 to differentiate between the two cases and to modify media capture so that using a pan, tilt or zoom constrainable property prompts for a `{name: "camera", panTiltZoom: true}` permission and that it is possible to request elevated permission prompt during `getUserMedia` call in order to avoid double permission prompt (`{name: "camera"}` during `getUserMedia` and `{name: "camera", panTiltZoom: true}` during `applyConstraints`).

This allows the following kind of code:
```
navigator.mediaDevices.getUserMedia({
    video: {
        height: { ideal:  720, min: 240, max: 1080 },
        width:  { ideal: 1280, min: 320, max: 1920 },
        // These empty constraints are to make getUserMedia
        // to request permission to use a permission descriptor
        // {name: "camera", deviceId: deviceId, panTiltZoom: true}
        // instead of normal {name: "camera", deviceId: deviceId}
        // so that subsequent applyConstraints call do not have to
        // prompt for  new permissions.
        pan:    true,  // or {}
        tilt:   {},    // or true
        zoom:   true   // or {}
    }
})
.then(async mediaStream => {
    const video = document.querySelector('video');
    video.srcObject = mediaStream;
    await sleep(1000);  // crbug.com/711524
    const track = mediaStream.getVideoTracks()[0];
    const capabilities = track.getCapabilities();
    const settings = track.getSettings();
    if ('pan' in capabilities) {
        const input = document.getElementById('pan-range');
        input.min = capabilities.pan.min;
        input.max = capabilities.pan.max;
        input.step = capabilities.pan.step;
        input.value = settings.pan;
        input.oninput = function(event) {
            // Applying pan (or tilt or zoom) constraint
            // requests permission to use a permission descriptor
            // {name: "camera", deviceId: deviceId, panTiltZoom: true}
            // which is already granted during successful getUserMedia
            // call above thus this applyConstraints call does not prompt for
            // any new permissions.
            track.applyConstraints({advanced: [{pan: event.target.value}]});
        };
        input.hidden = false;
    }
    if ('tilt' in capabilities) {
        // ditto
    }
    if ('zoom' in capabilities) {
        // ditto
    }
});
```

For API, it would of course be possible to combine `{video: {pan: true, tilt: true, zoom: true}}` to `{video: {panTiltZoom: true}}` but in that case one had to use `navigator.mediaDevices.getUserMedia({video: {panTiltZoom: true, zoom: {min: 2}}})` instead of `navigator.mediaDevices.getUserMedia({video: {zoom: {min: 2}}})` or similar if one wants to use pan, tilt or zoom constraints in getUserMedia. With separate pan, tilt and zoom (instead of a combined panTiltZoom) it is also easier to expand to roll if pan/tilt/roll/zoom cameras ever become more widespread. But please share your opinions.

/cc @riju

See https://github.com/w3c/mediacapture-image/pull/218

Received on Friday, 20 March 2020 15:14:38 UTC