Richiedere l'accesso alla fotocamera e al microfono tramite la libreria dell'interfaccia utente di Servizi di comunicazione di Azure

Questa esercitazione è una continuazione di una serie di tre parti di esercitazioni sulla preparazione delle chiamate e segue da quanto riportato in precedenza: Assicurarsi che l'utente si trova in un browser supportato.

Scaricare il codice

Accedere al codice completo per questa esercitazione su GitHub.

Richiesta di accesso alla fotocamera e al microfono

Per chiamare le applicazioni, è spesso fondamentale che un utente abbia concesso l'autorizzazione per usare il microfono e la fotocamera. In questa sezione viene creata una serie di componenti che incoraggiano l'utente a concedere l'accesso alla fotocamera e al microfono. Vengono visualizzate le richieste all'utente per guidarlo nella concessione dell'accesso. Si informa l'utente con una richiesta se l'accesso non viene concesso.

Creazione di richieste di accesso alla fotocamera e al microfono

Prima di tutto creiamo una serie di richieste di autorizzazioni per il dispositivo per far entrare gli utenti in uno stato in cui hanno accettato le autorizzazioni per microfono e fotocamera. Questi prompt usano il CameraAndMicrophoneSitePermissions componente dalla libreria dell'interfaccia utente. Analogamente al messaggio del browser non supportato, ospitiamo questi prompt all'interno di un FluentUI modal.

src/DevicePermissionPrompts.tsx

import { CameraAndMicrophoneSitePermissions } from '@azure/communication-react';
import { Modal } from '@fluentui/react';

/** Modal dialog that prompt the user to accept the Browser's device permission request. */
export const AcceptDevicePermissionRequestPrompt = (props: { isOpen: boolean }): JSX.Element => (
  <PermissionsModal isOpen={props.isOpen} kind="request" />
);

/** Modal dialog that informs the user we are checking for device access. */
export const CheckingDeviceAccessPrompt = (props: { isOpen: boolean }): JSX.Element => (
  <PermissionsModal isOpen={props.isOpen} kind="check" />
)

/** Modal dialog that informs the user they denied permission to the camera or microphone with corrective steps. */
export const PermissionsDeniedPrompt = (props: { isOpen: boolean }): JSX.Element => (
  <PermissionsModal isOpen={props.isOpen} kind="denied" />
);

/** Base component utilized by the above prompts for better code separation. */
const PermissionsModal = (props: { isOpen: boolean, kind: "denied" | "request" | "check" }): JSX.Element => (
  <Modal isOpen={props.isOpen}>
    <CameraAndMicrophoneSitePermissions
      appName={'this site'}
      kind={props.kind}
      onTroubleshootingClick={() => alert('This callback should be used to take the user to further troubleshooting')}
    />
  </Modal>
);

Controllo dell'accesso alla fotocamera e al microfono

Qui aggiungiamo due nuove funzioni di utilità per controllare e richiedere l'accesso alla fotocamera e al microfono. Creare un file denominato devicePermissionUtils.ts con due funzioni checkDevicePermissionsState e requestCameraAndMicrophonePermissions. checkDevicePermissionsState usa PermissionAPI. Tuttavia, l'esecuzione di query per fotocamera e microfono non è supportata in Firefox e quindi garantiamo che questo metodo restituisca unknown in questo caso. Successivamente, assicuriamo di gestire il unknown caso quando si chiede all'utente i permessi.

src/DevicePermissionUtils.ts

import { DeviceAccess } from "@azure/communication-calling";
import { StatefulCallClient } from "@azure/communication-react";

/**
 * Check if the user needs to be prompted for camera and microphone permissions.
 *
 * @remarks
 * The Permissions API we are using is not supported in Firefox, Android WebView or Safari < 16.
 * In those cases this returns 'unknown'.
 */
export const checkDevicePermissionsState = async (): Promise<{camera: PermissionState, microphone: PermissionState} | 'unknown'> => {
  try {
    const [micPermissions, cameraPermissions] = await Promise.all([
      navigator.permissions.query({ name: "microphone" as PermissionName }),
      navigator.permissions.query({ name: "camera" as PermissionName })
    ]);
    console.info('PermissionAPI results', [micPermissions, cameraPermissions]); // view console logs in the browser to see what the PermissionsAPI info is returned
    return { camera: cameraPermissions.state, microphone: micPermissions.state };
  } catch (e) {
    console.warn("Permissions API unsupported", e);
    return 'unknown';
  }
}

/** Use the DeviceManager to request for permissions to access the camera and microphone. */
export const requestCameraAndMicrophonePermissions = async (callClient: StatefulCallClient): Promise<DeviceAccess> => {
  const response = await (await callClient.getDeviceManager()).askDevicePermission({ audio: true, video: true });
  console.info('AskDevicePermission response', response); // view console logs in the browser to see what device access info is returned
  return response
}

Richiesta all'utente di concedere l'accesso alla fotocamera e al microfono

Ora sono disponibili le richieste e la logica di controllo e richiesta, viene creato un DeviceAccessComponent per richiedere all'utente le autorizzazioni del dispositivo. In questo componente vengono visualizzate richieste diverse all'utente in base allo stato di autorizzazione del dispositivo:

• Se lo stato dell'autorizzazione del dispositivo è sconosciuto, viene visualizzato un prompt per informare l'utente che sta controllando le autorizzazioni del dispositivo.
• Se si richiedono autorizzazioni, viene visualizzato un messaggio di richiesta all'utente che invita l'utente ad accettare la richiesta di autorizzazioni.
• Se le autorizzazioni vengono negate, viene visualizzato un messaggio di richiesta all'utente che informa che le autorizzazioni sono state negate e che devono concedere le autorizzazioni per continuare.

src/DeviceAccessChecksComponent.tsx

import { useEffect, useState } from 'react';
import { CheckingDeviceAccessPrompt, PermissionsDeniedPrompt, AcceptDevicePermissionRequestPrompt } from './DevicePermissionPrompts';
import { useCallClient } from '@azure/communication-react';
import { checkDevicePermissionsState, requestCameraAndMicrophonePermissions } from './DevicePermissionUtils';

export type DevicesAccessChecksState = 'runningDeviceAccessChecks' |
  'checkingDeviceAccess' |
  'promptingForDeviceAccess' |
  'deniedDeviceAccess';

/**
 * This component is a demo of how to use the StatefulCallClient with CallReadiness Components to get a user
 * ready to join a call.
 * This component checks the browser support and if camera and microphone permissions have been granted.
 */
export const DeviceAccessChecksComponent = (props: {
  /**
   * Callback triggered when the tests are complete and successful
   */
  onTestsSuccessful: () => void
}): JSX.Element => {
  const [currentCheckState, setCurrentCheckState] = useState<DevicesAccessChecksState>('runningDeviceAccessChecks');
  

  // Run call readiness checks when component mounts
  const callClient = useCallClient();
  useEffect(() => {
    const runDeviceAccessChecks = async (): Promise<void> => {

      // First we check if we need to prompt the user for camera and microphone permissions.
      // The prompt check only works if the browser supports the PermissionAPI for querying camera and microphone.
      // In the event that is not supported, we show a more generic prompt to the user.
      const devicePermissionState = await checkDevicePermissionsState();
      if (devicePermissionState === 'unknown') {
        // We don't know if we need to request camera and microphone permissions, so we'll show a generic prompt.
        setCurrentCheckState('checkingDeviceAccess');
      } else if (devicePermissionState.camera === 'prompt' || devicePermissionState.microphone === 'prompt') {
        // We know we need to request camera and microphone permissions, so we'll show the prompt.
        setCurrentCheckState('promptingForDeviceAccess');
      }

      // Now the user has an appropriate prompt, we can request camera and microphone permissions.
      const devicePermissionsState = await requestCameraAndMicrophonePermissions(callClient);

      if (!devicePermissionsState.audio || !devicePermissionsState.video) {
        // If the user denied camera and microphone permissions, we prompt the user to take corrective action.
        setCurrentCheckState('deniedDeviceAccess');
      } else {
        // Test finished successfully, trigger callback to parent component to take user to the next stage of the app.
        props.onTestsSuccessful();
      }
    };

    runDeviceAccessChecks();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      {/* We show this when we are prompting the user to accept device permissions */}
      <AcceptDevicePermissionRequestPrompt isOpen={currentCheckState === 'promptingForDeviceAccess'} />

      {/* We show this when the PermissionsAPI is not supported and we are checking what permissions the user has granted or denied */}
      <CheckingDeviceAccessPrompt isOpen={currentCheckState === 'checkingDeviceAccess'} />

      {/* We show this when the user has failed to grant camera and microphone access */}
      <PermissionsDeniedPrompt isOpen={currentCheckState === 'deniedDeviceAccess'} />
    </>
  );
}

Dopo aver completato la creazione di questo componente, noi lo aggiungiamo a App.tsx. Aggiungere prima di tutto l'importazione:

import { DeviceAccessChecksComponent } from './DeviceAccessChecksComponent';

Aggiornare quindi il TestingState tipo in modo che sia il valore seguente:

type TestingState = 'runningEnvironmentChecks' | 'runningDeviceAccessChecks' | 'finished';

Infine, aggiornare il App componente:

/**
 * Entry point of a React app.
 *
 * This shows a PreparingYourSession component while the CallReadinessChecks are running.
 * Once the CallReadinessChecks are finished, the TestComplete component is shown.
 */
const App = (): JSX.Element => {
  const [testState, setTestState] = useState<TestingState>('runningEnvironmentChecks');

  return (
    <FluentThemeProvider>
      <CallClientProvider callClient={callClient}>
        {/* Show a Preparing your session screen while running the environment checks */}
        {testState === 'runningEnvironmentChecks' && (
          <>
            <PreparingYourSession />
            <EnvironmentChecksComponent onTestsSuccessful={() => setTestState('runningDeviceAccessChecks')} />
          </>
        )}
        
        {/* Show a Preparing your session screen while running the device access checks */}
        {testState === 'runningDeviceAccessChecks' && (
          <>
            <PreparingYourSession />
            <DeviceAccessChecksComponent onTestsSuccessful={() => setTestState('finished')} />
          </>
        )}


        {/* After the device setup is complete, take the user to the call. For this sample we show a test complete page. */}
        {testState === 'finished' && <TestComplete />}
      </CallClientProvider>
    </FluentThemeProvider>
  );
}

L'app presenta all'utente le richieste per guidarlo tramite l'accesso al dispositivo:

Passaggi successivi