fix: Add GUM timeout & improve device permissions

conference.js

 
         let tryCreateLocalTracks;
 
+        const timeout = browser.isElectron() ? 15000 : 60000;
+
         // FIXME is there any simpler way to rewrite this spaghetti below ?
         if (options.startScreenSharing) {
             tryCreateLocalTracks = this._createDesktopTrack()
                         return [ desktopStream ];
                     }
 
-                    return createLocalTracksF({ devices: [ 'audio' ] }, true)
+                    return createLocalTracksF({
+                        devices: [ 'audio' ],
+                        timeout
+                    }, true)
                         .then(([ audioStream ]) =>
                             [ desktopStream, audioStream ])
                         .catch(error => {
                     errors.screenSharingError = error;
 
                     return requestedAudio
-                        ? createLocalTracksF({ devices: [ 'audio' ] }, true)
+                        ? createLocalTracksF({
+                            devices: [ 'audio' ],
+                            timeout
+                        }, true)
                         : [];
                 })
                 .catch(error => {
             // Resolve with no tracks
             tryCreateLocalTracks = Promise.resolve([]);
         } else {
-            tryCreateLocalTracks = createLocalTracksF({ devices: initialDevices }, true)
+            tryCreateLocalTracks = createLocalTracksF({
+                devices: initialDevices,
+                timeout
+            }, true)
                 .catch(err => {
                     if (requestedAudio && requestedVideo) {
 
                         // Try audio only...
                         errors.audioAndVideoError = err;
 
+                        if (err.name === JitsiTrackErrors.TIMEOUT && !browser.isElectron()) {
+                            // In this case we expect that the permission prompt is still visible. There is no point of
+                            // executing GUM with different source. Also at the time of writting the following
+                            // inconsistency have been noticed in some browsers - if the permissions prompt is visible
+                            // and another GUM is executed the prompt does not change its content but if the user
+                            // clicks allow the user action isassociated with the latest GUM call.
+                            errors.audioOnlyError = err;
+                            errors.videoOnlyError = err;
+
+                            return [];
+                        }
+
                         return (
-                            createLocalTracksF({ devices: [ 'audio' ] }, true));
+                            createLocalTracksF({
+                                devices: [ 'audio' ],
+                                timeout
+                            }, true));
                     } else if (requestedAudio && !requestedVideo) {
                         errors.audioOnlyError = err;
 
 
                     // Try video only...
                     return requestedVideo
-                        ? createLocalTracksF({ devices: [ 'video' ] }, true)
+                        ? createLocalTracksF({
+                            devices: [ 'video' ],
+                            timeout
+                        }, true)
                         : [];
                 })
                 .catch(err => {

lang/main.json

         "cameraNotSendingData": "We are unable to access your camera. Please check if another application is using this device, select another device from the settings menu or try to reload the application.",
         "cameraNotSendingDataTitle": "Unable to access camera",
         "cameraPermissionDeniedError": "You have not granted permission to use your camera. You can still join the conference but others won't see you. Use the camera button in the address bar to fix this.",
+        "cameraTimeoutError": "Could not start video source. Timeout occured!",
         "cameraUnknownError": "Cannot use camera for an unknown reason.",
         "cameraUnsupportedResolutionError": "Your camera does not support required video resolution.",
         "Cancel": "Cancel",
         "micNotSendingData": "Go to your computer's settings to unmute your mic and adjust its level",
         "micNotSendingDataTitle": "Your mic is muted by your system settings",
         "micPermissionDeniedError": "You have not granted permission to use your microphone. You can still join the conference but others won't hear you. Use the camera button in the address bar to fix this.",
+        "micTimeoutError": "Could not start audio source. Timeout occured!",
         "micUnknownError": "Cannot use microphone for an unknown reason.",
         "muteEveryoneElseDialog": "Once muted, you won't be able to unmute them, but they can unmute themselves at any time.",
         "muteEveryoneElseTitle": "Mute everyone except {{whom}}?",
         "androidGrantPermissions": "Select <b><i>Allow</i></b> when your browser asks for permissions.",
         "chromeGrantPermissions": "Select <b><i>Allow</i></b> when your browser asks for permissions.",
         "edgeGrantPermissions": "Select <b><i>Yes</i></b> when your browser asks for permissions.",
-        "electronGrantPermissions": "Please grant permissions to use your camera and microphone",
+        "electronGrantPermissions": "Trying to access your camera and microphone",
         "firefoxGrantPermissions": "Select <b><i>Share Selected Device</i></b> when your browser asks for permissions.",
         "iexplorerGrantPermissions": "Select <b><i>OK</i></b> when your browser asks for permissions.",
         "nwjsGrantPermissions": "Please grant permissions to use your camera and microphone",

react/features/base/devices/actionTypes.js

  * }
  */
 export const CHECK_AND_NOTIFY_FOR_NEW_DEVICE = 'CHECK_AND_NOTIFY_FOR_NEW_DEVICE';
+
+/**
+ * The type of Redux action which signals that the device permissions have changed.
+ *
+ * {
+ *     type: CHECK_AND_NOTIFY_FOR_NEW_DEVICE
+ *     permissions: Object
+ * }
+ */
+export const DEVICE_PERMISSIONS_CHANGED = 'DEVICE_PERMISSIONS_CHANGED';

react/features/base/devices/actions.js

 import {
     ADD_PENDING_DEVICE_REQUEST,
     CHECK_AND_NOTIFY_FOR_NEW_DEVICE,
+    DEVICE_PERMISSIONS_CHANGED,
     NOTIFY_CAMERA_ERROR,
     NOTIFY_MIC_ERROR,
     REMOVE_PENDING_DEVICE_REQUESTS,
         oldDevices
     };
 }
+
+/**
+ * Signals that the device permissions have changed.
+ *
+ * @param {Object} permissions - Object with the permissions.
+ * @returns {{
+ *      type: DEVICE_PERMISSIONS_CHANGED,
+ *      permissions: Object
+ * }}
+ */
+export function devicePermissionsChanged(permissions) {
+    return {
+        type: DEVICE_PERMISSIONS_CHANGED,
+        permissions
+    };
+}

react/features/base/devices/middleware.js

 import { showNotification, showWarningNotification } from '../../notifications';
 import { replaceAudioTrackById, replaceVideoTrackById, setDeviceStatusWarning } from '../../prejoin/actions';
 import { isPrejoinPageVisible } from '../../prejoin/functions';
-import { JitsiTrackErrors } from '../lib-jitsi-meet';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app';
+import JitsiMeetJS, { JitsiMediaDevicesEvents, JitsiTrackErrors } from '../lib-jitsi-meet';
 import { MiddlewareRegistry } from '../redux';
 import { updateSettings } from '../settings';
 
     UPDATE_DEVICE_LIST
 } from './actionTypes';
 import {
+    devicePermissionsChanged,
     removePendingDeviceRequests,
     setAudioInputDevice,
     setVideoInputDevice
         [JitsiTrackErrors.CONSTRAINT_FAILED]: 'dialog.micConstraintFailedError',
         [JitsiTrackErrors.GENERAL]: 'dialog.micUnknownError',
         [JitsiTrackErrors.NOT_FOUND]: 'dialog.micNotFoundError',
-        [JitsiTrackErrors.PERMISSION_DENIED]: 'dialog.micPermissionDeniedError'
+        [JitsiTrackErrors.PERMISSION_DENIED]: 'dialog.micPermissionDeniedError',
+        [JitsiTrackErrors.TIMEOUT]: 'dialog.micTimeoutError'
     },
     camera: {
         [JitsiTrackErrors.CONSTRAINT_FAILED]: 'dialog.cameraConstraintFailedError',
         [JitsiTrackErrors.GENERAL]: 'dialog.cameraUnknownError',
         [JitsiTrackErrors.NOT_FOUND]: 'dialog.cameraNotFoundError',
         [JitsiTrackErrors.PERMISSION_DENIED]: 'dialog.cameraPermissionDeniedError',
-        [JitsiTrackErrors.UNSUPPORTED_RESOLUTION]: 'dialog.cameraUnsupportedResolutionError'
+        [JitsiTrackErrors.UNSUPPORTED_RESOLUTION]: 'dialog.cameraUnsupportedResolutionError',
+        [JitsiTrackErrors.TIMEOUT]: 'dialog.cameraTimeoutError'
     }
 };
 
+
+/**
+ * A listener for device permissions changed reported from lib-jitsi-meet.
+ */
+let permissionsListener;
+
 /**
  * Logs the current device list.
  *
 // eslint-disable-next-line no-unused-vars
 MiddlewareRegistry.register(store => next => action => {
     switch (action.type) {
+    case APP_WILL_MOUNT: {
+        const _permissionsListener = permissions => {
+            store.dispatch(devicePermissionsChanged(permissions));
+        };
+        const { mediaDevices } = JitsiMeetJS;
+
+        permissionsListener = _permissionsListener;
+        mediaDevices.addEventListener(JitsiMediaDevicesEvents.PERMISSIONS_CHANGED, permissionsListener);
+        Promise.all([
+            mediaDevices.isDevicePermissionGranted('audio'),
+            mediaDevices.isDevicePermissionGranted('video')
+        ])
+        .then(results => {
+            _permissionsListener({
+                audio: results[0],
+                video: results[1]
+            });
+        })
+        .catch(() => {
+            // Ignore errors.
+        });
+        break;
+    }
+    case APP_WILL_UNMOUNT:
+        if (typeof permissionsListener === 'function') {
+            JitsiMeetJS.mediaDevices.removeEventListener(
+                JitsiMediaDevicesEvents.PERMISSIONS_CHANGED, permissionsListener);
+            permissionsListener = undefined;
+        }
+        break;
     case NOTIFY_CAMERA_ERROR: {
         if (typeof APP !== 'object' || !action.error) {
             break;

react/features/base/devices/reducer.js

 
 import {
     ADD_PENDING_DEVICE_REQUEST,
+    DEVICE_PERMISSIONS_CHANGED,
     REMOVE_PENDING_DEVICE_REQUESTS,
     SET_AUDIO_INPUT_DEVICE,
     SET_VIDEO_INPUT_DEVICE,
         audioOutput: [],
         videoInput: []
     },
-    pendingRequests: []
+    pendingRequests: [],
+    permissions: {
+        audio: false,
+        video: false
+    }
 };
 
 /**
 
             return state;
         }
+        case DEVICE_PERMISSIONS_CHANGED: {
+            return {
+                ...state,
+                permissions: action.permissions
+            };
+        }
         default:
             return state;
         }

react/features/base/lib-jitsi-meet/functions.any.js

  * @param {string} type - The media type of track being created. Expected values
  * are "video" or "audio".
  * @param {string} deviceId - The id of the target media source.
+ * @param {number} [timeout] - A timeout for the JitsiMeetJS.createLocalTracks function call.
  * @returns {Promise<JitsiLocalTrack>}
  */
-export function createLocalTrack(type: string, deviceId: string) {
+export function createLocalTrack(type: string, deviceId: string, timeout: ?number) {
     return (
         JitsiMeetJS.createLocalTracks({
             cameraDeviceId: deviceId,
             // eslint-disable-next-line camelcase
             firefox_fake_device:
                 window.config && window.config.firefox_fake_device,
-            micDeviceId: deviceId
+            micDeviceId: deviceId,
+            timeout
         })
             .then(([ jitsiLocalTrack ]) => jitsiLocalTrack));
 }

react/features/base/tracks/functions.js

  * and/or 'video'.
  * @param {string|null} [options.micDeviceId] - Microphone device id or
  * {@code undefined} to use app's settings.
+ * @param {number|undefined} [oprions.timeout] - A timeout for JitsiMeetJS.createLocalTracks used to create the tracks.
  * @param {boolean} [firePermissionPromptIsShownEvent] - Whether lib-jitsi-meet
  * should check for a {@code getUserMedia} permission prompt and fire a
  * corresponding event.
  */
 export function createLocalTracksF(options = {}, firePermissionPromptIsShownEvent, store) {
     let { cameraDeviceId, micDeviceId } = options;
+    const { desktopSharingSourceDevice, desktopSharingSources, timeout } = options;
 
     if (typeof APP !== 'undefined') {
         // TODO The app's settings should go in the redux store and then the
                     cameraDeviceId,
                     constraints,
                     desktopSharingFrameRate,
-                    desktopSharingSourceDevice:
-                        options.desktopSharingSourceDevice,
-                    desktopSharingSources: options.desktopSharingSources,
+                    desktopSharingSourceDevice,
+                    desktopSharingSources,
 
                     // Copy array to avoid mutations inside library.
                     devices: options.devices.slice(0),
                     effects,
                     firefox_fake_device, // eslint-disable-line camelcase
                     micDeviceId,
-                    resolution
+                    resolution,
+                    timeout
                 },
                 firePermissionPromptIsShownEvent)
             .catch(err => {

react/features/device-selection/components/DeviceSelection.js

     type Props as AbstractDialogTabProps
 } from '../../base/dialog/components/web/AbstractDialogTab';
 import { translate } from '../../base/i18n/functions';
-import JitsiMeetJS from '../../base/lib-jitsi-meet/_';
 import { createLocalTrack } from '../../base/lib-jitsi-meet/functions';
 import logger from '../logger';
 
      */
     disableDeviceChange: boolean,
 
+    /**
+     * Whether or not the audio permission was granted.
+     */
+    hasAudioPermission: boolean,
+
+    /**
+     * Whether or not the audio permission was granted.
+     */
+    hasVideoPermission: boolean,
+
     /**
      * If true, the audio meter will not display. Necessary for browsers or
      * configurations that do not support local stats to prevent a
  */
 type State = {
 
-    /**
-     * Whether or not the audio permission was granted.
-     */
-    hasAudioPermission: boolean,
-
-    /**
-     * Whether or not the audio permission was granted.
-     */
-    hasVideoPermission: boolean,
-
     /**
      * The JitsiTrack to use for previewing audio input.
      */
         super(props);
 
         this.state = {
-            hasAudioPermission: false,
-            hasVideoPermission: false,
             previewAudioTrack: null,
             previewVideoTrack: null,
             previewVideoTrackError: null
      * video input previews.
      *
      * @param {Object} prevProps - Previous props this component received.
-     * @param {Object} prevState - Previous state this component had.
      * @returns {void}
      */
-    componentDidUpdate(prevProps, prevState) {
-        const { previewAudioTrack, previewVideoTrack } = prevState;
-
-        if ((!previewAudioTrack && this.state.previewAudioTrack)
-                || (!previewVideoTrack && this.state.previewVideoTrack)) {
-            Promise.all([
-                JitsiMeetJS.mediaDevices.isDevicePermissionGranted('audio'),
-                JitsiMeetJS.mediaDevices.isDevicePermissionGranted('video')
-            ]).then(r => {
-                const [ hasAudioPermission, hasVideoPermission ] = r;
-
-                this.setState({
-                    hasAudioPermission,
-                    hasVideoPermission
-                });
-            });
-        }
-
+    componentDidUpdate(prevProps) {
         if (prevProps.selectedAudioInputId
             !== this.props.selectedAudioInputId) {
             this._createAudioInputTrack(this.props.selectedAudioInputId);
      */
     _createAudioInputTrack(deviceId) {
         return this._disposeAudioInputPreview()
-            .then(() => createLocalTrack('audio', deviceId))
+            .then(() => createLocalTrack('audio', deviceId, 5000))
             .then(jitsiLocalTrack => {
                 if (this._unMounted) {
                     jitsiLocalTrack.dispose();
      */
     _createVideoInputTrack(deviceId) {
         return this._disposeVideoInputPreview()
-            .then(() => createLocalTrack('video', deviceId))
+            .then(() => createLocalTrack('video', deviceId, 5000))
             .then(jitsiLocalTrack => {
                 if (!jitsiLocalTrack) {
                     return Promise.reject();
      * @returns {Array<ReactElement>} DeviceSelector instances.
      */
     _renderSelectors() {
-        const { availableDevices } = this.props;
-        const { hasAudioPermission, hasVideoPermission } = this.state;
+        const { availableDevices, hasAudioPermission, hasVideoPermission } = this.props;
 
         const configurations = [
             {

react/features/device-selection/functions.js

     const state = toState(stateful);
     const settings = state['features/base/settings'];
     const { conference } = state['features/base/conference'];
+    const { permissions } = state['features/base/devices'];
     let disableAudioInputChange = !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
     let selectedAudioInputId = settings.micDeviceId;
     let selectedAudioOutputId = getAudioOutputDeviceId();
         disableAudioInputChange,
         disableDeviceChange:
             !JitsiMeetJS.mediaDevices.isDeviceChangeAvailable(),
+        hasAudioPermission: permissions.audio,
+        hasVideoPermission: permissions.video,
         hideAudioInputPreview:
             !JitsiMeetJS.isCollectingLocalStats(),
         hideAudioOutputSelect: !JitsiMeetJS.mediaDevices

react/features/settings/components/web/audio/AudioSettingsContent.js

 
         this._disposeTracks(this.state.audioTracks);
 
-        const audioTracks = await createLocalAudioTracks(
-            this.props.microphoneDevices
-        );
+        const audioTracks = await createLocalAudioTracks(this.props.microphoneDevices, 5000);
 
         if (this._componentWasUnmounted) {
             this._disposeTracks(audioTracks);

react/features/settings/components/web/video/VideoSettingsContent.js

     async _setTracks() {
         this._disposeTracks(this.state.trackData);
 
-        const trackData = await createLocalVideoTracks(
-            this.props.videoDeviceIds,
-        );
+        const trackData = await createLocalVideoTracks(this.props.videoDeviceIds, 5000);
 
         // In case the component gets unmounted before the tracks are created
         // avoid a leak by not setting the state

react/features/settings/functions.js

  * all the video jitsiTracks and appropriate errors for the given device ids.
  *
  * @param {string[]} ids - The list of the camera ids for wich to create tracks.
+ * @param {number} [timeout] - A timeout for the createLocalTrack function call.
  *
  * @returns {Promise<Object[]>}
  */
-export function createLocalVideoTracks(ids: string[]) {
-    return Promise.all(ids.map(deviceId => createLocalTrack('video', deviceId)
+export function createLocalVideoTracks(ids: string[], timeout: ?number) {
+    return Promise.all(ids.map(deviceId => createLocalTrack('video', deviceId, timeout)
                    .then(jitsiTrack => {
                        return {
                            jitsiTrack,
  * the audio track and the corresponding audio device information.
  *
  * @param {Object[]} devices - A list of microphone devices.
+ * @param {number} [timeout] - A timeout for the createLocalTrack function call.
  * @returns {Promise<{
  *   deviceId: string,
  *   hasError: boolean,
  *   label: string
  * }[]>}
  */
-export function createLocalAudioTracks(devices: Object[]) {
+export function createLocalAudioTracks(devices: Object[], timeout: ?number) {
     return Promise.all(
         devices.map(async ({ deviceId, label }) => {
             let jitsiTrack = null;
             let hasError = false;
 
             try {
-                jitsiTrack = await createLocalTrack('audio', deviceId);
+                jitsiTrack = await createLocalTrack('audio', deviceId, timeout);
             } catch (err) {
                 hasError = true;
             }

react/features/toolbox/components/web/AudioSettingsButton.js

 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { connect } from '../../../base/redux';
 import { ToolboxButtonWithIcon } from '../../../base/toolbox/components';
-import { getMediaPermissionPromptVisibility } from '../../../overlay';
 import { AudioSettingsPopup, toggleAudioSettings } from '../../../settings';
 import { isAudioSettingsButtonDisabled } from '../../functions';
 import AudioMuteButton from '../AudioMuteButton';
 type Props = {
 
     /**
-     * Click handler for the small icon. Opens audio options.
+     * Indicates whether audio permissions have been granted or denied.
      */
-    onAudioOptionsClick: Function,
+    hasPermissions: boolean,
 
     /**
-     * Whether the permission prompt is visible or not.
-     * Useful for enabling the button on permission grant.
+     * Click handler for the small icon. Opens audio options.
      */
-    permissionPromptVisibility: boolean,
+    onAudioOptionsClick: Function,
 
     /**
      * If the button should be disabled.
      * Flag controlling the visibility of the button.
      * AudioSettings popup is disabled on mobile browsers.
      */
-    visible: boolean,
+    visible: boolean
 };
 
-type State = {
-
-    /**
-     * If there are permissions for audio devices.
-     */
-    hasPermissions: boolean,
-}
-
 /**
  * Button used for audio & audio settings.
  *
  * @returns {ReactElement}
  */
-class AudioSettingsButton extends Component<Props, State> {
-    _isMounted: boolean;
-
-    /**
-     * Initializes a new {@code AudioSettingsButton} instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     */
-    constructor(props) {
-        super(props);
-
-        this._isMounted = true;
-        this.state = {
-            hasPermissions: false
-        };
-    }
-
-    /**
-     * Updates device permissions.
-     *
-     * @returns {Promise<void>}
-     */
-    async _updatePermissions() {
-        const hasPermissions = await JitsiMeetJS.mediaDevices.isDevicePermissionGranted(
-            'audio',
-        );
-
-        this._isMounted && this.setState({
-            hasPermissions
-        });
-    }
-
-    /**
-     * Implements React's {@link Component#componentDidMount}.
-     *
-     * @inheritdoc
-     */
-    componentDidMount() {
-        this._updatePermissions();
-    }
-
-    /**
-     * Implements React's {@link Component#componentDidUpdate}.
-     *
-     * @inheritdoc
-     */
-    componentDidUpdate(prevProps) {
-        if (this.props.permissionPromptVisibility !== prevProps.permissionPromptVisibility) {
-            this._updatePermissions();
-        }
-    }
-
-    /**
-     * Implements React's {@link Component#componentWillUnmount}.
-     *
-     * @inheritdoc
-     */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
+class AudioSettingsButton extends Component<Props> {
 
     /**
      * Implements React's {@link Component#render}.
      * @inheritdoc
      */
     render() {
-        const { isDisabled, onAudioOptionsClick, visible } = this.props;
-        const settingsDisabled = !this.state.hasPermissions
+        const { hasPermissions, isDisabled, onAudioOptionsClick, visible } = this.props;
+        const settingsDisabled = !hasPermissions
             || isDisabled
             || !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
 
  * @returns {Object}
  */
 function mapStateToProps(state) {
+    const { permissions = {} } = state['features/base/devices'];
+
     return {
+        hasPermissions: permissions.audio,
         isDisabled: isAudioSettingsButtonDisabled(state),
-        permissionPromptVisibility: getMediaPermissionPromptVisibility(state),
         visible: !isMobileBrowser()
     };
 }

react/features/toolbox/components/web/VideoSettingsButton.js

 
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { IconArrowDown } from '../../../base/icons';
-import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { connect } from '../../../base/redux';
 import { ToolboxButtonWithIcon } from '../../../base/toolbox/components';
 import { getLocalJitsiVideoTrack } from '../../../base/tracks';
-import { getMediaPermissionPromptVisibility } from '../../../overlay';
 import { toggleVideoSettings, VideoSettingsPopup } from '../../../settings';
 import { isVideoSettingsButtonDisabled } from '../../functions';
 import VideoMuteButton from '../VideoMuteButton';
     onVideoOptionsClick: Function,
 
     /**
-     * Whether the permission prompt is visible or not.
-     * Useful for enabling the button on initial permission grant.
+     * Indicates whether video permissions have been granted or denied.
      */
-    permissionPromptVisibility: boolean,
+    hasPermissions: boolean,
 
     /**
      * Whether there is a video track or not.
      * as mobile devices do not support capture of more than one
      * camera at a time.
      */
-    visible: boolean,
-};
-
-type State = {
-
-    /**
-     * Whether the app has video permissions or not.
-     */
-    hasPermissions: boolean,
+    visible: boolean
 };
 
 /**
  *
  * @returns {ReactElement}
  */
-class VideoSettingsButton extends Component<Props, State> {
-    _isMounted: boolean;
-
-    /**
-     * Initializes a new {@code VideoSettingsButton} instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     */
-    constructor(props) {
-        super(props);
-
-        this._isMounted = true;
-        this.state = {
-            hasPermissions: false
-        };
-    }
+class VideoSettingsButton extends Component<Props> {
 
     /**
      * Returns true if the settings icon is disabled.
      * @returns {boolean}
      */
     _isIconDisabled() {
-        const { hasVideoTrack, isDisabled } = this.props;
+        const { hasPermissions, hasVideoTrack, isDisabled } = this.props;
 
-        return (!this.state.hasPermissions || isDisabled) && !hasVideoTrack;
-    }
-
-    /**
-     * Updates device permissions.
-     *
-     * @returns {Promise<void>}
-     */
-    async _updatePermissions() {
-        const hasPermissions = await JitsiMeetJS.mediaDevices.isDevicePermissionGranted(
-            'video',
-        );
-
-        this._isMounted && this.setState({
-            hasPermissions
-        });
-    }
-
-    /**
-     * Implements React's {@link Component#componentDidMount}.
-     *
-     * @inheritdoc
-     */
-    componentDidMount() {
-        this._updatePermissions();
-    }
-
-    /**
-     * Implements React's {@link Component#componentDidUpdate}.
-     *
-     * @inheritdoc
-     */
-    componentDidUpdate(prevProps) {
-        if (this.props.permissionPromptVisibility !== prevProps.permissionPromptVisibility) {
-            this._updatePermissions();
-        }
-    }
-
-    /**
-     * Implements React's {@link Component#componentWillUnmount}.
-     *
-     * @inheritdoc
-     */
-    componentWillUnmount() {
-        this._isMounted = false;
+        return (!hasPermissions || isDisabled) && !hasVideoTrack;
     }
 
     /**
  * @returns {Object}
  */
 function mapStateToProps(state) {
+    const { permissions = {} } = state['features/base/devices'];
+
     return {
+        hasPermissions: permissions.video,
         hasVideoTrack: Boolean(getLocalJitsiVideoTrack(state)),
         isDisabled: isVideoSettingsButtonDisabled(state),
-        permissionPromptVisibility: getMediaPermissionPromptVisibility(state),
         visible: !isMobileBrowser()
     };
 }