search

aws / amazon-chime-sdk-js

A JavaScript client library for integrating multi-party communications powered by the Amazon Chime service.
Apache License 2.0
713 stars 475 forks source link

Camera permission pop-up does not show. No camera can be selected #1446

Open FlapperA opened 3 years ago

FlapperA commented 3 years ago

What happened and what did you expect to happen?

We have a scenario where we have a desktop client that only has a virtual camera “attached”. This is because the camera is not directly attached to the desktop client and we use the virtual camera to read the RTSP-feed and simulate that as a webcam.

In a clean setup we expect that the virtual camera is recognized and shown in the selection list. This is however not the case. You need to first attach a physical camera in order to trigger the "Allow camera permission pop-up" Screenshot_3

Have you reviewed our existing documentation?

Reproduction steps

(Full scenario video available on request)

The workaround we use currently is attaching a physical camera, set the permissions for “allow always”. After that the physical camera can be removed and the system works as intended.

We face the same issue in the following scenario:

The workaround we use currently is copying the link to Chrome and opening it from there. Then you get the permissions popup. Once set, you can open the link from Outlook without any problems

Amazon Chime SDK for JavaScript version

2.13.0

What browsers are you seeing the problem on?

Chrome, FireFox & Edge

Browser version

all versions

Meeting and Attendee ID Information.

No response

Browser console logs

Browser logs shows no errors or warnings.

simmkyu commented 3 years ago

In the screenshots, you seem to use the Amazon Chime SDK React Components Library. Since 2.6.0 of the Chime SDK React Components Library, we support user-defined control for device permission prompts. For example, you can suppress the device permission prompts for audio, video, or both. Could you follow the Implement view-only/observer/spectator experience guide to suppress the camera permission pop-up and see if it's working?

Also, in the Chime SDK for JavaScript, listAudioInputDevices and listVideoInputDevices APIs use the browser's MediaDevices.enumerateDevices API to request available media devices. I wonder if the Chime SDK React Components Library has an issue related to listing devices. If the problem persists, can you try the Chime SDK for JavaScript serverless demo and see if the bug is reproducible?

ghost commented 3 years ago

It looks like it is assuming there is always an audio input source in the stream definition getUserMedia() object paramater and the video property is awaited and checked on the enumerateDevices() function.

setupDeviceLabelTrigger(): void {
    const callback = async (): Promise<MediaStream> => {
      this.devicePermissionStatus = DevicePermissionStatus.IN_PROGRESS;
      this.publishDevicePermissionStatus();
      try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const hasVideoInput = devices.some(value => {
          return value.kind === 'videoinput';
        });

        const stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: hasVideoInput
        });

        this.devicePermissionStatus = DevicePermissionStatus.GRANTED;
        this.publishDevicePermissionStatus();
        return stream;
      } catch (e) {
        console.error('Failed to get device permissions');
        this.devicePermissionStatus = DevicePermissionStatus.DENIED;
        this.publishDevicePermissionStatus();
        throw new Error(e);
      }
    };
anuranduttaroy commented 3 years ago

Hey @FlapperA, did you get a chance to try the Chime SDK for JavaScript serverless demo and see if the bug is reproducible as mentioned by @simmkyu here https://github.com/aws/amazon-chime-sdk-js/issues/1446#issuecomment-885265723

ghost commented 3 years ago

Hey @FlapperA, did you get a chance to try the Chime SDK for JavaScript serverless demo and see if the bug is reproducible as mentioned by @simmkyu here #1446 (comment)

Hi @anuranduttaroy, @FlapperA is on holiday and as his colleague I am watching this bug topic. I tried the suggestion from @simmkyu in his comment. There are some scenarios I tried.

Scenario 1 (original from @FlapperA but in serverless demo)

Steps I took to reproduce:

  1. Disable all audio input devices (as I saw in the screenshot that there were no mic listings)
  2. Disable built in webcam from laptop
  3. Enable OBS virtual webcam
  4. Start serverless demo

Result:

As expected, the popup does not come forward and after plugging in a physical usb webcam, the popup is there.

Scenario 2

Another scenario that I tested was in relation to my previous comment. Disable/enable audio input to get the popup.

Steps to reproduce:

  1. Disable all audio input sources
  2. Enable OBS virtual webcam
  3. Enable built-in webcam of laptop
  4. Start serverless demo

Result:

The popup does not show, only when enabling one of the audio input sources the popup is there again.

My thoughts

So after these two scenarios I came to realization that maybe the audio input is the problem. After all, when plugging in a physical webcam there is not only a new video source but also a new audio input source as the webcam comes with a built-in mic. Which brings me back to the setupDeviceLabelTrigger() from my comment above, it assumes there is always an audio input, hard coded with the boolean true in the parameter object of getUserMedia:

getUserMedia({
          audio: true,
          video: hasVideoInput
        });

I hope this makes sense 🤖!

devalevenkatesh commented 3 years ago

Hi @kanovic and @FlapperA ,

I tried to reproduce this issue using the mentioned steps in Scenario 1 and got the pop-up in JS SDK as well as on the WebRTC official sample for querying the devices. I discuss my findings below.

I used two different browsers one enabled with the microphone-camera permissions (Firefox 89.0.2) and the other with disabled microphone and camera permissions (Google Chrome 92.0.4515.131). To enable, disable microphone and camera I unchecked the permission in security and privacy in the Mac's system settings.

I was able to use the OBS virtual camera in Firefox but it did not show in the camera lists in Google Chrome even though I got asked for the permission through the permission dialog box. I had set the permission to "Ask" in both while loading the serverless JS SDK demo. I tried to verify this behavior with an official WebRTC sample from here. Checked the behaviour on this example under "Devices", but I found similar observations. The dialog popped-up and even though I allowed the browser permission, since Chrome was disabled in mac settings to get the camera and microphone, it did not show the OBS virtual camera as well.

We need help on below questions:

Please let us know if we are missing something.

ghost commented 3 years ago

Hi @devalevenkatesh,

ltrung commented 3 years ago

@kanovic, @FlapperA, I have been able to reproduce the issue with the meeting serverless demo in Chrome on Windows using OBS virtual camera and disable all audio inputs in the Window Sound Settings. If the permission is not set before (i.e., 'Ask' option), there is no pop up for device permission. In the console log, I saw an info log unable to get media device label. Using getUserMedia directly (navigator.mediaDevices.getUserMedia({audio: true, video: true})) there will be an error Uncaught DOMException: Requested device not found. Similar error is observed in Firefox. However since Firefox gave separate permission for audio and video device, it still shows the virtual camera.

I modified the device label trigger in the demo to ask for video only and in Chrome, it now pops up for video permission. However, every time I tried to turn on the video in the meeting demo, it redirected to the device preview page. The cause is this code here. Turn on the video in the meeting will call ChooseVideoInputDevice which will call handleDeviceChange. In Chrome, getUserMedia({video: true}) also returns an empty label audio output in addition to the virtual camera device. handleDeviceChange sees the empty label and tries to run the device label trigger again which redirects the meeting demo back to the device preview page. In Firefox, getUserMedia({video: true}) only returns the virtual video device so everything works fine.

Comment out the switchToFlow line in the meeting demo will fix the issue in Chrome.

ghost commented 3 years ago

@ltrung, I have tried your code adjustments and in the case of Firefox it also works. For Chrome, commenting out the switchToFlow line did not solve the issue. When I reset the permissions to 'Ask', the popup shows and I can allow camera use. Then it directs me to the devices section and withing a second back to the 'Permissions check' screen. Reloading the page brings me back to the landing page, then when I click 'Continue' I see the devices page and again within a second back the the 'Permissions check' screen.

ltrung commented 3 years ago

@kanovic If you comment out the two switchToFlow here, it should disable the switch to flow-need-permission and flow-devices pages. Based on what you described, it redirects to the Permission check screen so my guess is you missed the first line.

          this.switchToFlow('flow-need-permission');
          const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
          this.switchToFlow('flow-devices');
FlapperA commented 3 years ago

After a holiday period tested again with the suggestions mentioned above:

Firefox works kind of. Edge and Chrome still have issues. I do get a devices page and can select the camera. However: