Suppress device permission request

[henlamk]

Whenever a user joins a meeting, he is asked to grant permission for microphone and camera.

Is it possible to suppress this behavior, e. g. when the user is not supposed to use his microphone and webcam during the whole meeting and just to join as a viewer?

[richnew10]

This behavior is triggered in order to get device labels:

https://github.com/aws/amazon-chime-sdk-component-library-react/blob/0d84475db0eb74da5acb9f5746a0d77c563c4141/src/providers/MeetingProvider/MeetingManager.ts#L265

I don't see a good approach to controlling that through the component library interface, only through the lower-level SDK interface, but I'll follow up with someone closer to the code to see if they have a suggestion.

[p-foucht]

This is a shortcoming of the library, as this isn't something you can easily do. We'll take note of this critique and try to put flexibility/extensibility onto our roadmap

There are a few ways you could try to workaround this, but they are not the most straightfoward or have been thoroughly tested

1. Mock the getUserMedia API: navigator.mediaDevices.getUserMedia = () => true which will remove the device permission prompt
2. Override the MeetingManager's join method (seen here) with your own implementation, removing the device calls that trigger the getUserMedia call in the first place

[jrowny]

This is also biting us. We have users who enter as spectators and don't expect to have to enabled audio/video. You could have a simple flag to pass into join that disables the calls to listAndSelectDevices();

[xuesichao]

Hi guys, we raise this PR #499 to fix this issue. Feel free to try it and give us some feedback!

Notice: due to JS SDK Issue #474, current solution only works for Chrome. In Firefox and Safari, user can't not join the meeting and can't be displayed in the roster.

Implement view-only/observer/spectator experience

To enable a view-only experience, you need to control the device permission prompts for audio and video.

With the release of version 2.6.0, React Component SDK now supports user-defined control for device permission prompts.

In this version, we added optional parameter deviceLabels: DeviceLabels | DeviceLabelTrigger in meetingManager.join(). You could pass a deviceLabels of type DeviceLabels to select the devices from which the browser requests permission when joining the meeting. You could also pass a deviceLabels of DeviceLabelTrigger type, to set your customized deviceLabelTrigger which is triggered to request the device permissions. We also added a new function invokeDeviceProvider(deviceLabels: DeviceLabels). This function can setup the deviceLabelTrigger based on the deviceLabels passed in, and trigger the deviceLabelTrigger to invoke the device permission.

enum DeviceLabels {
  None,
  Audio,
  Video,
  AudioAndVideo,
};

To implement a view-only experience, you only need to combine these two functions. First pass DeviceLabels.None to meetingManager.join() to suppress the device permission prompts trigger in DeviceProvider. And the functions of MeetingControls and DeviceSelections are also suppressed. Later when you want to invoke the device permission, call invokeDeviceProvider() with parameter deviceLabels of the device kind that you want to invoke. Then you can regain the access to the devices.

To suppress device permission:

import { useMeetingManager } from 'amazon-chime-sdk-component-library-react';

const MyApp = () => {
  const meetingManager = useMeetingManager();

  const joinMeeting = async () => {
    // Fetch the meeting and attendee data from your server
    const response = await fetch('/my-server');
    const data = await response.json();

    const joinData = {
      meetingInfo: data.Meeting,
      attendeeInfo: data.Attendee,
      deviceLabels: DeviceLabels.None,
    };

    // Use the join API to create a meeting session
    await meetingManager.join(joinData);

    // At this point you can let users setup their devices, or start the session immediately
    await meetingManager.start();
  };

  return <button onClick={joinMeeting}>Join</button>;
};

Checkt the MeetingForm in meeting demo for more details.

To invoke device permission:

  const handleClick = async () => {
    meetingManager.invokeDeviceProvider(deviceLabels);
  };

Check the DynamicMeetingControl in meeting demo for mor details.

Note: The view-only mode doesn't impact the ability to view content or listen to audio in your meeting experience.

[vidya-mohan]

Resolving as issue fixed and released