feat(permissions): refactor keeping track of device permissions

Use the W3C Permissions API where possible. At the time of this writing this is
supported in Chrome >= 64.

JitsiMediaDevices.js

@@ -8,32 +8,88 @@ import Statistics from './modules/statistics/statistics';
 
 import * as JitsiMediaDevicesEvents from './JitsiMediaDevicesEvents';
 
-const eventEmitter = new EventEmitter();
-
 /**
- * Gathers data and sends it to statistics.
- * @param deviceID the device id to log
- * @param devices list of devices
+ * Media devices utilities for Jitsi.
  */
-function logOutputDevice(deviceID, devices) {
-    const device
-        = devices.find(
-            d => d.kind === 'audiooutput' && d.deviceId === deviceID);
-
-    if (device) {
-        Statistics.sendActiveDeviceListEvent(
-            RTC.getEventDataForActiveDevice(device));
+class JitsiMediaDevices {
+    /**
+     * Initializes a {@code JitsiMediaDevices} object. There will be a single
+     * instance of this class.
+     */
+    constructor() {
+        this._eventEmitter = new EventEmitter();
+        this._grantedPermissions = {};
+
+        RTC.addListener(
+            RTCEvents.DEVICE_LIST_CHANGED,
+            devices =>
+                this._eventEmitter.emit(
+                    JitsiMediaDevicesEvents.DEVICE_LIST_CHANGED,
+                    devices));
+        RTC.addListener(
+            RTCEvents.DEVICE_LIST_AVAILABLE,
+            devices =>
+                this._logOutputDevice(
+                    this.getAudioOutputDevice(),
+                    devices));
+        RTC.addListener(
+            RTCEvents.GRANTED_PERMISSIONS,
+            grantedPermissions =>
+                this._handleGrantedPermissions(grantedPermissions));
+
+        // Test if the W3C Permissions API is implemented and the 'camera' and
+        // 'microphone' permissions are implemented. (Testing for at least one
+        // of them seems sufficient).
+        this._permissionsApiSupported = new Promise(resolve => {
+            if (!navigator.permissions) {
+                resolve(false);
+
+                return;
+            }
+
+            navigator.permissions.query({ name: 'camera ' })
+                .then(() => resolve(true), () => resolve(false));
+        });
+    }
+
+    /**
+     * Updated the local granted permissions cache. A permissions might be
+     * granted, denied, or undefined. This is represented by having its media
+     * type key set to {@code true} or {@code false} respectively.
+     *
+     * @param {Object} grantedPermissions - Array with the permissions
+     * which were granted.
+     */
+    _handleGrantedPermissions(grantedPermissions) {
+        this._grantedPermissions = {
+            ...this._grantedPermissions,
+            ...grantedPermissions
+        };
+    }
+
+    /**
+     * Gathers data and sends it to statistics.
+     * @param deviceID the device id to log
+     * @param devices list of devices
+     */
+    _logOutputDevice(deviceID, devices) {
+        const device
+            = devices.find(
+                d => d.kind === 'audiooutput' && d.deviceId === deviceID);
+
+        if (device) {
+            Statistics.sendActiveDeviceListEvent(
+                RTC.getEventDataForActiveDevice(device));
+        }
     }
-}
 
-const JitsiMediaDevices = {
     /**
      * Executes callback with list of media devices connected.
      * @param {function} callback
      */
     enumerateDevices(callback) {
         RTC.enumerateDevices(callback);
-    },
+    }
 
     /**
      * Checks if its possible to enumerate available cameras/micropones.
@@ -43,7 +99,7 @@ const JitsiMediaDevices = {
      */
     isDeviceListAvailable() {
         return RTC.isDeviceListAvailable();
-    },
+    }
 
     /**
      * Returns true if changing the input (camera / microphone) or output
@@ -54,26 +110,58 @@ const JitsiMediaDevices = {
      */
     isDeviceChangeAvailable(deviceType) {
         return RTC.isDeviceChangeAvailable(deviceType);
-    },
+    }
 
     /**
-     * Returns true if user granted permission to media devices.
+     * Checks if the permission for the given device was granted.
+     *
      * @param {'audio'|'video'} [type] - type of devices to check,
      *      undefined stands for both 'audio' and 'video' together
-     * @returns {boolean}
+     * @returns {Promise<boolean>}
      */
     isDevicePermissionGranted(type) {
-        const permissions = RTC.getDeviceAvailability();
-
-        switch (type) {
-        case MediaType.VIDEO:
-            return permissions.video === true;
-        case MediaType.AUDIO:
-            return permissions.audio === true;
-        default:
-            return permissions.video === true && permissions.audio === true;
-        }
-    },
+        return new Promise(resolve => {
+            // Shortcut: first check if we already know the permission was
+            // granted.
+            if (type in this._grantedPermissions) {
+                resolve(this._grantedPermissions[type]);
+
+                return;
+            }
+
+            // Check using the Permissions API.
+            this._permissionsApiSupported.then(supported => {
+                if (!supported) {
+                    resolve(false);
+
+                    return;
+                }
+
+                const promises = [];
+
+                switch (type) {
+                case MediaType.VIDEO:
+                    promises.push(
+                        navigator.permissions.query({ name: 'camera' }));
+                    break;
+                case MediaType.AUDIO:
+                    promises.push(
+                        navigator.permissions.query({ name: 'microphone' }));
+                    break;
+                default:
+                    promises.push(
+                        navigator.permissions.query({ name: 'camera' }));
+                    promises.push(
+                        navigator.permissions.query({ name: 'microphone' }));
+                }
+
+                Promise.all(promises).then(
+                    r => resolve(r.every(Boolean)),
+                    () => resolve(false)
+                );
+            });
+        });
+    }
 
     /**
      * Returns true if it is possible to be simultaneously capturing audio
@@ -83,7 +171,7 @@ const JitsiMediaDevices = {
      */
     isMultipleAudioInputSupported() {
         return !browser.isFirefox();
-    },
+    }
 
     /**
      * Returns currently used audio output device id, 'default' stands
@@ -92,7 +180,7 @@ const JitsiMediaDevices = {
      */
     getAudioOutputDevice() {
         return RTC.getAudioOutputDevice();
-    },
+    }
 
     /**
      * Sets current audio output device.
@@ -103,18 +191,18 @@ const JitsiMediaDevices = {
      *      otherwise
      */
     setAudioOutputDevice(deviceId) {
-
         const availableDevices = RTC.getCurrentlyAvailableMediaDevices();
 
         if (availableDevices && availableDevices.length > 0) {
             // if we have devices info report device to stats
             // normally this will not happen on startup as this method is called
             // too early. This will happen only on user selection of new device
-            logOutputDevice(deviceId, RTC.getCurrentlyAvailableMediaDevices());
+            this._logOutputDevice(
+                deviceId, RTC.getCurrentlyAvailableMediaDevices());
         }
 
         return RTC.setAudioOutputDevice(deviceId);
-    },
+    }
 
     /**
      * Adds an event handler.
@@ -122,8 +210,8 @@ const JitsiMediaDevices = {
      * @param {function} handler - event handler
      */
     addEventListener(event, handler) {
-        eventEmitter.addListener(event, handler);
-    },
+        this._eventEmitter.addListener(event, handler);
+    }
 
     /**
      * Removes event handler.
@@ -131,16 +219,16 @@ const JitsiMediaDevices = {
      * @param {function} handler - event handler
      */
     removeEventListener(event, handler) {
-        eventEmitter.removeListener(event, handler);
-    },
+        this._eventEmitter.removeListener(event, handler);
+    }
 
     /**
      * Emits an event.
      * @param {string} event - event name
      */
     emitEvent(event, ...args) {
-        eventEmitter.emit(event, ...args);
-    },
+        this._eventEmitter.emit(event, ...args);
+    }
 
     /**
      * Returns whether or not the current browser can support capturing video,
@@ -154,20 +242,6 @@ const JitsiMediaDevices = {
         // JitsiMediaDevices.
         return browser.supportsVideo();
     }
-};
-
-
-RTC.addListener(
-    RTCEvents.DEVICE_LIST_CHANGED,
-    devices =>
-        eventEmitter.emit(
-            JitsiMediaDevicesEvents.DEVICE_LIST_CHANGED,
-            devices));
-RTC.addListener(
-    RTCEvents.DEVICE_LIST_AVAILABLE,
-    devices =>
-        logOutputDevice(
-            JitsiMediaDevices.getAudioOutputDevice(),
-            devices));
-
-export default JitsiMediaDevices;
+}
+
+export default new JitsiMediaDevices();

doc/API.md

@@ -88,7 +88,7 @@ JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.ERROR);
         - groupId - group identifier, two devices have the same group identifier if they belong to the same physical device; for example a monitor with both a built-in camera and microphone
     - ```setAudioOutputDevice(deviceId)``` - sets current audio output device. ```deviceId``` - id of 'audiooutput' device from ```JitsiMeetJS.enumerateDevices()```, '' is for default device.
     - ```getAudioOutputDevice()``` - returns currently used audio output device id, '' stands for default device.
-    - ```isDevicePermissionGranted(type)``` - returns true if user granted permission to media devices. ```type``` - 'audio', 'video' or ```undefined```. In case of ```undefined``` will check if both audio and video permissions were granted.
+    - ```isDevicePermissionGranted(type)``` - returns a Promise which resolves to true if user granted permission to media devices. ```type``` - 'audio', 'video' or ```undefined```. In case of ```undefined``` will check if both audio and video permissions were granted.
     - ```addEventListener(event, handler)``` - attaches an event handler.
     - ```removeEventListener(event, handler)``` - removes an event handler.
 

modules/RTC/RTC.js

@@ -416,13 +416,6 @@ export default class RTC extends Listenable {
         return RTCUtils.init(this.options);
     }
 
-    /**
-     *
-     */
-    static getDeviceAvailability() {
-        return RTCUtils.getDeviceAvailability();
-    }
-
     /* eslint-disable max-params */
 
     /**

modules/RTC/RTCUtils.js

@@ -65,14 +65,6 @@ const DEFAULT_CONSTRAINTS = {
     }
 };
 
-
-// TODO (brian): Move this devices hash, maybe to a model, so RTCUtils remains
-// stateless.
-const devices = {
-    audio: false,
-    video: false
-};
-
 /**
  * The default frame rate for Screen Sharing.
  */
@@ -496,21 +488,24 @@ function getTrackSSConstraints(options = {}) {
 }
 
 /**
- * Sets the availbale devices based on the options we requested and the
+ * Updates the granted permissions based on the options we requested and the
  * streams we received.
  * @param um the options we requested to getUserMedia.
  * @param stream the stream we received from calling getUserMedia.
  */
-function setAvailableDevices(um, stream) {
+function updateGrantedPermissions(um, stream) {
     const audioTracksReceived = stream && stream.getAudioTracks().length > 0;
     const videoTracksReceived = stream && stream.getVideoTracks().length > 0;
+    const grantedPermissions = {};
 
     if (um.indexOf('video') !== -1) {
-        devices.video = videoTracksReceived;
+        grantedPermissions.video = videoTracksReceived;
     }
     if (um.indexOf('audio') !== -1) {
-        devices.audio = audioTracksReceived;
+        grantedPermissions.audio = audioTracksReceived;
     }
+
+    eventEmitter.emit(RTCEvents.GRANTED_PERMISSIONS, grantedPermissions);
 }
 
 /**
@@ -594,27 +589,6 @@ function onMediaDevicesListChanged(devicesReceived) {
 
     sendDeviceListToAnalytics(availableDevices);
 
-    const videoInputDevices
-        = availableDevices.filter(d => d.kind === 'videoinput');
-    const audioInputDevices
-        = availableDevices.filter(d => d.kind === 'audioinput');
-    const videoInputDevicesWithEmptyLabels
-        = videoInputDevices.filter(d => d.label === '');
-    const audioInputDevicesWithEmptyLabels
-        = audioInputDevices.filter(d => d.label === '');
-
-    if (videoInputDevices.length
-            && videoInputDevices.length
-                === videoInputDevicesWithEmptyLabels.length) {
-        devices.video = false;
-    }
-
-    if (audioInputDevices.length
-            && audioInputDevices.length
-                === audioInputDevicesWithEmptyLabels.length) {
-        devices.audio = false;
-    }
-
     eventEmitter.emit(RTCEvents.DEVICE_LIST_CHANGED, devicesReceived);
 }
 
@@ -1009,13 +983,13 @@ class RTCUtils extends Listenable {
             navigator.mediaDevices.getUserMedia(constraints)
                 .then(stream => {
                     logger.log('onUserMediaSuccess');
-                    setAvailableDevices(um, stream);
+                    updateGrantedPermissions(um, stream);
                     resolve(stream);
                 })
                 .catch(error => {
                     logger.warn('Failed to get access to local media. '
                         + ` ${error} ${constraints} `);
-                    setAvailableDevices(um, undefined);
+                    updateGrantedPermissions(um, undefined);
                     reject(new JitsiTrackError(error, constraints, um));
                 });
         });
@@ -1034,13 +1008,13 @@ class RTCUtils extends Listenable {
             navigator.mediaDevices.getUserMedia(constraints)
                 .then(stream => {
                     logger.log('onUserMediaSuccess');
-                    setAvailableDevices(umDevices, stream);
+                    updateGrantedPermissions(umDevices, stream);
                     resolve(stream);
                 })
                 .catch(error => {
                     logger.warn('Failed to get access to local media. '
                         + ` ${error} ${constraints} `);
-                    setAvailableDevices(umDevices, undefined);
+                    updateGrantedPermissions(umDevices, undefined);
                     reject(new JitsiTrackError(error, constraints, umDevices));
                 });
         });
@@ -1426,13 +1400,6 @@ class RTCUtils extends Listenable {
             .then(() => mediaStreamsMetaData);
     }
 
-    /**
-     *
-     */
-    getDeviceAvailability() {
-        return devices;
-    }
-
     /**
      * Checks whether it is possible to enumerate available cameras/microphones.
      *

service/RTC/RTCEvents.js

@@ -13,6 +13,13 @@ const RTCEvents = {
     DOMINANT_SPEAKER_CHANGED: 'rtc.dominant_speaker_changed',
     LASTN_ENDPOINT_CHANGED: 'rtc.lastn_endpoint_changed',
 
+    /**
+     * Event emitted when the user granted a permission for the camera / mic.
+     * Used to keep track of the granted permissions on browsers which don't
+     * support the Permissions API.
+     */
+    GRANTED_PERMISSIONS: 'rtc.granted_permissions',
+
     IS_SELECTED_CHANGED: 'rtc.is_selected_change',
 
     /**