Azure Communication Services を使用した通話準備エクスペリエンスの作成

[アーティクル]
03/25/2023

重要

Azure Communication Services のこの機能は、現在プレビュー段階にあります。

プレビューの API と SDK は、サービスレベルアグリーメントなしに提供されます。運用環境のワークロードには使用しないことをお勧めします。一部の機能はサポート対象ではなく、機能が制限されることがあります。

詳細については、「Microsoft Azure プレビューの追加利用規約」を確認してください。

このチュートリアルでは、UI ライブラリで Azure Communication Services を使用して、ユーザーが通話に参加する準備を整えるエクスペリエンスを作成します。 UI ライブラリには、通話準備エクスペリエンスを生成するために使用できる豊富なコンポーネントと UI コントロールのセットと、ユーザーの状態を理解するための豊富な API のセットが用意されています。

必須コンポーネント

このチュートリアルの先行部分の「通話準備の概要」のアプリのセットアッププロセスに従います

コードをダウンロードする

このチュートリアルの完全なコードには GitHub でアクセスしてください。

ブラウザーサポートの確認

ユーザーが最適なエクスペリエンスを得られるように、まず、サポートされているブラウザーが使用されていることを確認します。このセクションでは、ユーザーのブラウザーでバックグラウンドでクイックサポートチェックを実行しながら、"セッションの準備中" と表示するページを作成します。

ブラウザーのチェックが実行されていることを示す Gif

[セッションの準備中] ページ

PreparingYourSession.tsx という名前の新しいファイルを作成します。ここでは、バックグラウンドでの非同期チェックの実行中にユーザーに表示するスピナーを作成します。

src/PreparingYourSession.tsx

import { useTheme } from '@azure/communication-react';
import { ISpinnerStyles, IStackStyles, ITextStyles, ITheme, Spinner, Stack, Text } from '@fluentui/react';

/** This page displays a spinner to the user. This is used to show the user that background checks are being performed. */
export const PreparingYourSession = (): JSX.Element => {
  const theme = useTheme();
  return (
    <Stack verticalFill verticalAlign="center" horizontalAlign="center" tokens={{ childrenGap: '3rem' }}>
      <Stack styles={spinnerContainerStyles(theme)}>
        <Spinner styles={spinnerStyles} />
      </Stack>
      <Stack horizontalAlign="center">
        <Text styles={headingStyles} variant="large">Preparing your session</Text>
        <Text variant="medium">Please be patient</Text>
      </Stack>
    </Stack>
  );
};

const headingStyles: ITextStyles = {
  root: {
    fontWeight: '600',
    lineHeight: '2rem'
  }
};

const spinnerStyles: ISpinnerStyles = {
  circle: {
    height: '2.75rem',
    width: '2.75rem',
    borderWidth: '0.2rem'
  }
};

const spinnerContainerStyles = (theme: ITheme): IStackStyles => ({
  root: {
    padding: '1.75rem',
    borderRadius: '50%',
    background: theme.palette?.themeLighterAlt
  }
});

その後、この [セッションの準備中] 画面をアプリに搭載します。 App.tsx とアプリの状態を追跡するための変数 testState と、testState が runningEnvironmentChecks の状態である間、[セッションの準備中] 画面が表示されます。

まず、概要で作成した App.tsx ファイルに次のインポートを追加します。

import { useState } from 'react';
import { PreparingYourSession } from './PreparingYourSession';

それが完了したら、新しいスピナーを含むように App.tsx ファイルを更新します。

type TestingState = 'runningEnvironmentChecks' | 'finished';

const App = (): JSX.Element => {
  const [testState, setTestState] = useState<TestingState>('runningEnvironmentChecks');

  return (
    <FluentThemeProvider>
      <CallClientProvider callClient={callClient}>
        {/* Show a Preparing your session screen while running the call readiness checks */}
        {testState === 'runningEnvironmentChecks' && (
          <>
            <PreparingYourSession />
          </>
        )}

        {/* 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>
  );
}

環境情報チェックの実行

まず、ユーティリティファイル呼び出し environmentSupportUtils.ts を作成します。この呼び出しの中に、メソッド checkEnvironmentSupport を追加します。このメソッドでは、呼び出しステートフルクライアントを使用して、呼び出しステートフルクライアントが実行されている環境情報の要求を実行します。

src/environmentSupportUtils.ts

import { Features, EnvironmentInfo } from "@azure/communication-calling";
import { StatefulCallClient } from "@azure/communication-react";

/** Use the CallClient's getEnvironmentInfo() method to check if the browser is supported. */
export const checkEnvironmentSupport = async (callClient: StatefulCallClient): Promise<EnvironmentInfo> => {
  const environmentInfo = await callClient.feature(Features.DebugInfo).getEnvironmentInfo();
  console.info(environmentInfo); // view console logs in the browser to see what environment info is returned
  return environmentInfo;
}

checkEnvironmentSupport から返されるデータには次の情報が含まれます。

ブラウザーのサポート
ブラウザーバージョンのサポート
オペレーティングシステム (プラットフォーム) のサポート
詳細な環境情報

サポートされていないブラウザーを使用しているユーザーに通知する

次に、Calling SDK から提供されたこの情報を使用して、問題が発生した場合に環境の状態をユーザーに通知する必要があります。 UI ライブラリには、問題がどのようなものかに応じてこの目的を果たす 3 つの異なるコンポーネントが用意されています。

UnsupportedOperatingSystem
UnsupportedBrowser
UnsupportedBrowserVersion

まず、FluentUI モーダル内で UI ライブラリのコンポーネントをホストします。UnsupportedEnvironmentPrompts.tsx という名前の新しいファイルを作成し、そこでさまざまなプロンプトを作成します。

src/UnsupportedEnvironmentPrompts.tsx

import { UnsupportedOperatingSystem, UnsupportedBrowser, UnsupportedBrowserVersion } from '@azure/communication-react';
import { Modal } from '@fluentui/react';

/**
 * Modal dialog that shows a Browser Version Unsupported Prompt
 * Use the `onTroubleShootingClick` argument to redirect the user to further troubleshooting.
 * Use the `onContinueAnywayClick` argument to allow the user to continue to the next step even though they are on an unsupported browser version.
 */
export const BrowserVersionUnsupportedPrompt = (props: { isOpen: boolean, onContinueAnyway:() => void }): JSX.    Element => (
  <Modal isOpen={props.isOpen}>
    <UnsupportedBrowserVersion
      onTroubleshootingClick={() => alert('This callback should be used to take the user to further troubleshooting')}
      onContinueAnywayClick={() => props.onContinueAnyway()}
    />
  </Modal>
);

/**
 * Modal dialog that shows a Browser Unsupported Prompt
 * Use the `onTroubleShootingClick` argument to redirect the user to further troubleshooting.
 */
export const BrowserUnsupportedPrompt = (props: { isOpen: boolean }): JSX.Element => (
  <Modal isOpen={props.isOpen}>
    <UnsupportedBrowser
      onTroubleshootingClick={() => alert('This callback should be used to take the user to further troubleshooting')}
    />
  </Modal>
);

/**
 * Modal dialog that shows an Operating System Unsupported Prompt
 * Use the `onTroubleShootingClick` argument to redirect the user to further troubleshooting.
 */
export const OperatingSystemUnsupportedPrompt = (props: { isOpen: boolean }): JSX.Element => (
  <Modal isOpen={props.isOpen}>
    <UnsupportedOperatingSystem
      onTroubleshootingClick={() => alert('This callback should be used to take the user to further troubleshooting')}
    />
  </Modal>
);

これにより、環境チェックコンポーネントでこれらのプロンプトを表示できます。このプロンプトを表示するためのロジックを含む EnvironmentChecksComponent.tsx という名前のファイルを作成します。このコンポーネントには、ユーザーをアプリの次のページに移行させるコールバック onTestsSuccessful があります。

src/EnvironmentChecksComponent.tsx

import { useEffect, useState } from 'react';
import { BrowserUnsupportedPrompt, BrowserVersionUnsupportedPrompt, OperatingSystemUnsupportedPrompt } from './UnsupportedEnvironmentPrompts';
import { useCallClient } from '@azure/communication-react';
import { checkEnvironmentSupport } from './environmentSupportUtils';

export type EnvironmentChecksState = 'runningEnvironmentChecks' |
  'operatingSystemUnsupported' |
  'browserUnsupported' |
  'browserVersionUnsupported';

/**
 * 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.
 */
export const EnvironmentChecksComponent = (props: {
  /**
   * Callback triggered when the tests are complete and successful
   */
  onTestsSuccessful: () => void
}): JSX.Element => {
  const [currentCheckState, setCurrentCheckState] = useState<EnvironmentChecksState>('runningEnvironmentChecks');
  

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

      // First we get the environment information from the calling SDK.
      const environmentInfo = await checkEnvironmentSupport(callClient);

      if (!environmentInfo.isSupportedPlatform) {
        setCurrentCheckState('operatingSystemUnsupported');
        // If the platform or operating system is not supported we stop here and display a modal to the user.
        return;
      } else if (!environmentInfo.isSupportedBrowser) {
        setCurrentCheckState('browserUnsupported');
        // If browser support fails, we stop here and display a modal to the user.
        return;
      } else if (!environmentInfo.isSupportedBrowserVersion) {
        setCurrentCheckState('browserVersionUnsupported');
        /**
         *  If the browser version is unsupported, we stop here and show a modal that can allow the user 
         *  to continue into the call.
         */
        return;
      } else {
        props.onTestsSuccessful();
      }
    };

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

  return (
    <>
      {/* We show this when the operating system is unsupported */}
      <OperatingSystemUnsupportedPrompt isOpen={currentCheckState === 'operatingSystemUnsupported'} />

      {/* We show this when the browser is unsupported */}
      <BrowserUnsupportedPrompt isOpen={currentCheckState === 'browserUnsupported'} />

      {/* We show this when the browser version is unsupported */}
      <BrowserVersionUnsupportedPrompt isOpen={currentCheckState === 'browserVersionUnsupported'} onContinueAnyway={props.onTestsSuccessful} />
    </>
  );
}

その後、EnvironmentChecksComponent を App.tsx に追加できます。次に、onTestsSuccessful コールバックを使用してテストが成功すると、アプリではユーザーを デバイスチェック ステージに移行させます。

次に、新しいコンポーネントを App.tsx でアプリにインポートします。

import { EnvironmentChecksComponent } from './EnvironmentChecksComponent';

続いて、App.tsx で App コンポーネントを更新しましょう。

const App = (): JSX.Element => {
  const [testState, setTestState] = useState<TestingState>('runningEnvironmentChecks');

  return (
    <FluentThemeProvider>
      <CallClientProvider callClient={callClient}>
        {/* Show a Preparing your session screen while running the call readiness checks */}
        {testState === 'runningEnvironmentChecks' && (
          <>
            <PreparingYourSession />
            <EnvironmentChecksComponent
              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>
  );
}

これで、アプリを実行できます。サポートされていないブラウザーで実行しようとすると、「サポートされていないブラウザー」プロンプトが表示されます。

ブラウザーのチェックが失敗していることを示す Gif

次のステップ

パート 2: カメラとマイクのアクセスを要求する

次の方法で共有

Azure Communication Services を使用した通話準備エクスペリエンスの作成

必須コンポーネント

コードをダウンロードする

ブラウザーサポートの確認

[セッションの準備中] ページ

環境情報チェックの実行

サポートされていないブラウザーを使用しているユーザーに通知する

次のステップ

フィードバック

その他のリソース

次の方法で共有

Azure Communication Services を使用した通話準備エクスペリエンスの作成

必須コンポーネント

コードをダウンロードする

ブラウザー サポートの確認

[セッションの準備中] ページ

環境情報チェックの実行

サポートされていないブラウザーを使用しているユーザーに通知する

次のステップ

フィードバック

その他のリソース

ブラウザーサポートの確認