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

2025-04-23

重要

Azure Communication Services のこの機能は現在プレビュー中です。プレビュー段階の機能は一般公開されており、新規および既存の Microsoft のすべてのお客様が使用できます。

プレビューAPIとSDKは、サービスレベル契約なしで提供されます。運用環境のワークロードには使用しないことをお勧めします。特定の機能がサポートされていないか、機能が制約されている可能性があります。

詳しくは、Microsoft Azure プレビューの追加使用条件に関するページをご覧ください。

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

[前提条件]

このチュートリアルの前の部分の「Call Readiness - Overview(準備の呼び出し - 概要)」のアプリセットアッププロセスに従います

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

このチュートリアルの完全なコードには 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のApp.tsx コンポーネントを更新しましょう。

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: カメラとマイクへのアクセスを要求する