メディア機能を統合する

[アーティクル]
12/28/2023

カメラやマイクなどのネイティブデバイス機能を Teams アプリと統合できます。統合のために、アプリがユーザーのデバイスアクセス許可にアクセスするために必要なツールを提供する Microsoft Teams JavaScript クライアントライブラリを使用できます。適切なメディア機能 API を使用して、カメラやマイクなどのデバイス機能を Microsoft Teams アプリ内の Teams プラットフォームと統合し、より豊富なエクスペリエンスを構築します。メディア機能は、Teams Web クライアント、デスクトップ、モバイルで使用できます。メディア機能を統合するには、アプリマニフェストファイルを更新し、メディア機能 API を呼び出す必要があります。

効果的な統合を行うには、それぞれの API を呼び出すためのコードスニペットについて十分に理解しておく必要があります。これにより、ネイティブメディア機能を使用できます。 Teams アプリのエラーを処理するには、API 応答エラーを理解しておくことが重要です。

メリット

デバイス機能を Teams アプリに統合する利点は、ネイティブの Teams コントロールを使用して、ユーザーにリッチでイマーシブなエクスペリエンスを提供することです。次のシナリオでは、メディア機能の利点を示します。

ユーザーが携帯電話を介して物理的なホワイトボードに描かれた大まかなモックアップをキャプチャし、キャプチャした画像を Teams グループチャットの投票オプションとして使用できるようにします。
ユーザーがオーディオメッセージを記録し、インシデントチケットに添付できるようにします。
ユーザーがスマートフォンから物理的なドキュメントをスキャンして、自動車保険の請求を行うことを許可します。
ユーザーが作業現場でビデオを記録し、出席のためにアップロードできるようにします。

注:

現時点では、Teams では、ポップアップチャットウィンドウ、タブ、および会議側パネルでのデバイスのアクセス許可はサポートされていません。
ブラウザーではデバイスのアクセス許可が異なります。詳細については、「ブラウザーデバイスのアクセス許可」を参照してください。
関連する Teams API が開始されると、要求アクセス許可プロンプトがモバイルに自動的に表示されます。詳細については、「デバイスのアクセス許可要求」を参照してください。

マニフェストを更新する

devicePermissions プロパティを追加して media を指定することにより、Teamsアプリの manifest.json ファイルを更新します。これにより、カメラを使用して画像をキャプチャする前に、アプリでユーザーに必要なアクセス許可を求めたり、ギャラリーを開いて添付ファイルとして送信する画像を選択したり、マイクを使用して会話を録音したりできます。アプリマニフェストの更新プログラムは次のとおりです。

"devicePermissions": [
    "media",
],

注:

Media API は、新しい Teams クライアントではサポートされていません。 HTML5 mediaを使用することをお勧めします。

メディア機能 API

captureImage、selectMedia、getMedia、および viewImages API を使用すると、次のようにネイティブメディア機能を使用できます。

ネイティブ マイク を使用して、ユーザーがデバイスから オーディオを録音 (10 分間の会話を録音) できるようにします。
ネイティブ カメラコントロール を使用して、ユーザーが 外出先で画像をキャプチャして添付 し、 ビデオをキャプチャ (最大 5 分間のビデオを記録) できるようにします。
ネイティブ ギャラリーのサポート を使用して、ユーザーが添付ファイルとしてデバイスイメージを選択 できるようにします。
ネイティブ イメージビューアーコントロール を使用して、一度に 複数のイメージをプレビュー します。
TeamsJS ブリッジを介した 大規模なイメージ転送 (1 MB から 50 MB) をサポートします。
ユーザーがイメージをプレビューおよび編集できるようにすることで、 高度なイメージ機能 をサポートします。
カメラを介してドキュメント、ホワイトボード、名刺をスキャンします。

重要

ダイアログ (TeamsJS v1.x ではタスクモジュールとviewImages呼ばれます)、タブ、個人用アプリなど、さまざまな Teams サーフェスから API、および API を呼び出getMediacaptureImageselectMediaすことができます。詳細については、 Teams アプリのエントリポイントに関するページを参照してください。
API は selectMedia 、さまざまな入力構成を通じてカメラとマイクの両方の機能をサポートします。
マイク機能にアクセスするための API は selectMedia 、モバイルクライアントでのみサポートされます。
アップロードされるイメージの最大数は、API によって maxMediaCount 返される配列の合計サイズによって selectMedia も決定されます。配列サイズが 20 MB を超えないようにします。配列サイズが 20 MB を超える場合、API によってエラーコード 10000 が生成され、エラーがSIZE_EXCEEDEDされます。

次の表に、デバイスのメディア機能を有効にする API のセットを示します。

API	説明
captureImage (カメラ)	API を使用すると、ユーザーはカメラをアクティブ化して画像をキャプチャしたり、ギャラリーからメディアを選択したりできます。コールバックが `captureImage` トリガーされると、イメージはファイルとして共有されます。この API では、ユーザーが共有のために 1 つのイメージを選択またはキャプチャするように制限され、モバイルクライアントとのみ互換性があります。
selectMedia (カメラ)	API を使用すると、ユーザーは `selectMedia` デバイスのカメラまたはギャラリーからメディアをキャプチャまたは選択し、それを Web アプリに返します。ユーザーは、提出前に画像を編集、トリミング、回転、注釈付け、描画することができます。に応答して `selectMedia`、Web アプリは、選択した画像のメディア ID と、選択したメディアのサムネイルを取得します。 ImageProps 構成を使用して、この API をさらに構成できます。
selectMedia (マイク)	マイク機能にアクセスするには、API で mediaType を (Audio) に `4` 設定します `selectMedia` 。この API を使用すると、ユーザーはデバイスのマイクを使用してオーディオを録音し、記録されたクリップを Web アプリに返します。ユーザーは、送信する前に記録を一時停止、再録音、またはプレビューすることができます。に応答して `selectMedia`、Web アプリは選択したオーディオ録音のメディア ID を受信します。記録に特定の期間を設定する必要がある場合は、を使用します `maxDuration`。現在の記録時間は 10 分に設定され、記録は自動的に終了します。
getMedia	この API は、メディアサイズに関係なく、`selectMedia` API によってキャプチャされたメディアをチャンク単位で取得します。これらのチャンクは、ファイルまたは BLOB として組み立てられ、Web アプリに送り返されます。メディアを小さなチャンクに分割すると、大きなファイル転送が容易になります。
viewImages	この API を使用すると、ユーザーはスクロール可能なリストとして全画面表示モードで画像を表示できます。

次の図は、Teams モバイルのイメージ機能用 API の captureImage Web アプリエクスペリエンスを示しています。

カメラを起動し、共有するイメージをキャプチャします。
共有するギャラリーからメディアを選択します。

Teams デスクトップおよびモバイル用 API の selectMedia Web アプリエクスペリエンスを表示できます。

モバイル
デスクトップ

次の図は、イメージ機能の API の selectMedia Web アプリエクスペリエンスを示しています。

画像は、モバイル向けのイメージ機能を示しています。

注:

Android バージョンが 7 以下のデバイスでは、 selectMedia API はネイティブの Teams カメラエクスペリエンスではなく、ネイティブの Android カメラエクスペリエンスを起動します。

次の図は、マイク機能の API の selectMedia Web アプリエクスペリエンスを示しています。

画像は、モバイル向けのマイク機能を示しています。

エラー処理

Teams アプリでこれらのエラーを適切に処理してください。次の表に、エラーコードと、エラーが生成される説明を示します。

エラーコード	エラー名	説明
100	NOT_SUPPORTED_ON_PLATFORM	API は現在のプラットフォームではサポートされていません。
404	FileNotFound	指定されたファイルが指定された場所に見つかりません。
500	内部エラーです(_E)	必要な操作の実行中に内部エラーが発生しました。
1000	PERMISSION_DENIED	アクセス許可がユーザーによって拒否されました。
3000	NO_HW_SUPPORT	ハードウェアは機能をサポートしていません。
4000	引数が無効です	いくつかの引数は無効です。
8000	USER_ABORT	ユーザーが操作を中止します。
9000	OLD_PLATFORM	プラットフォームコードは古く、この API は実装されていません。
10,000	SIZE_EXCEEDED	戻り値が大きすぎて、プラットフォームサイズの境界を超えています。

コードスニペット

カメラを使用してイメージを起動およびキャプチャするための API を呼び出します captureImage 。

microsoftTeams.media.captureImage((error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
// If there's any error, an alert shows the error message/code
if (error) {
  if (error.message) {
    alert(" ErrorCode: " + error.errorCode + error.message);
  } else {
    alert(" ErrorCode: " + error.errorCode);
  }
} else if (attachments) {
  let y = attachments[0];
  img.src = ("data:" + y.mimeType + ";base64," + y.preview);
}
});

デバイスカメラまたはギャラリーからメディアをキャプチャして選択するための API を呼び出します selectMedia 。

let imageProp: microsoftTeams.media.ImageProps = {
    sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
    startMode: microsoftTeams.media.CameraStartMode.Photo,
    ink: false,
    cameraSwitcher: false,
    textSticker: false,
    enableFilter: true,
};
let mediaInput: microsoftTeams.media.MediaInputs = {
    mediaType: microsoftTeams.media.MediaType.Image,
    maxMediaCount: 10,
    imageProps: imageProp
};
microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
    if (error) {
        if (error.message) {
            alert(" ErrorCode: " + error.errorCode + error.message);
        } else {
            alert(" ErrorCode: " + error.errorCode);
        }
    }
    if (attachments) {
        let y = attachments[0];
        img.src = ("data:" + y.mimeType + ";base64," + y.preview);
    }
});

カメラを使用してビデオをキャプチャするための API を呼び出します selectMedia 。

でビデオ fullscreen: trueをキャプチャする:

fullscreen: true は、ビデオ録画モードでカメラを開きます。フロントカメラとリアカメラの両方を使用するオプションを提供し、次の例で説明するように他の属性も提供します。


  const defaultLensVideoProps: microsoftTeams.media.VideoProps = {
      sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
      startMode: microsoftTeams.media.CameraStartMode.Video,
      cameraSwitcher: true,
      maxDuration: 30
 }
  const defaultLensVideoMediaInput: microsoftTeams.media.MediaInputs = {
      mediaType: microsoftTeams.media.MediaType.Video,
      maxMediaCount: 6,
      videoProps: defaultLensVideoProps
 }

でビデオ fullscreen: falseをキャプチャする:

fullscreen: false ビデオ録画モードでカメラを開き、フロントカメラのみを使用します。通常 fullscreen: false 、ユーザーがデバイス画面上のコンテンツを読み取るときにビデオを記録する場合に使用されます。

このモードでは、 isStopButtonVisible: true ユーザーが記録を停止できる停止ボタンを画面上に追加する機能もサポートされています。の場合 isStopButtonVisible: falseは、mediaController API を呼び出すか、記録時間が指定された時間に達したときに、記録を maxDuration 停止できます。

時間を指定して記録を停止する例を maxDuration 次に示します。

   const defaultNativeVideoProps: microsoftTeams.media.VideoProps = {
      maxDuration: 30,
      isFullScreenMode: false,
      isStopButtonVisible: false,
      videoController: new microsoftTeams.media.VideoController(videoControllerCallback)
  }
   const defaultNativeVideoMediaInput: microsoftTeams.media.MediaInputs = {
      mediaType: microsoftTeams.media.MediaType.Video,
      maxMediaCount: 1,
      videoProps: defaultNativeVideoProps
  }

mediaController API を呼び出して記録を停止する例を次に示します。

   const defaultNativeVideoProps: microsoftTeams.media.VideoProps = {
      videoController.stop(),
      isFullScreenMode: false,
      isStopButtonVisible: false,
      videoController: new microsoftTeams.media.VideoController(videoControllerCallback)
  }
   const defaultNativeVideoMediaInput: microsoftTeams.media.MediaInputs = {
      mediaType: microsoftTeams.media.MediaType.Video,
      maxMediaCount: 1,
      videoProps: defaultNativeVideoProps
  }

カメラを使用して画像とビデオをキャプチャするための API を呼び出します selectMedia 。

この API を使用すると、ユーザーは画像またはビデオのキャプチャを選択できます。


  const defaultVideoAndImageProps: microsoftTeams.media.VideoAndImageProps = {
    sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
    startMode: microsoftTeams.media.CameraStartMode.Photo,
    ink: true,
    cameraSwitcher: true,
    textSticker: true,
    enableFilter: true,
    maxDuration: 30
  }

  const defaultVideoAndImageMediaInput: microsoftTeams.media.MediaInputs = {
    mediaType: microsoftTeams.media.MediaType.VideoAndImage,
    maxMediaCount: 6,
    videoAndImageProps: defaultVideoAndImageProps
  }

  let videoControllerCallback: microsoftTeams.media.VideoControllerCallback = {
    onRecordingStarted() {
      console.log('onRecordingStarted Callback Invoked');
    },
  };

  microsoftTeams.media.selectMedia(defaultVideoAndImageMediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
    if (error) {
        if (error.message) {
            alert(" ErrorCode: " + error.errorCode + error.message);
        } else {
            alert(" ErrorCode: " + error.errorCode);
        }
    }

    var videoElement = document.createElement("video");
    attachments[0].getMedia((error: microsoftTeams.SdkError, blob: Blob) => {
    if (blob) {
        if (blob.type.includes("video")) {
            videoElement.setAttribute("src", URL.createObjectURL(blob));
        }
    }
    if (error) {
        if (error.message) {
            alert(" ErrorCode: " + error.errorCode + error.message);
        } else {
            alert(" ErrorCode: " + error.errorCode);
        }
    }
    });
    });

API を呼び出 getMedia して、大きなメディアをチャンクで取得します。

let media: microsoftTeams.media.Media = attachments[0]
media.getMedia((error: microsoftTeams.SdkError, blob: Blob) => {
    if (blob) {
        if (blob.type.includes("image")) {
            img.src = (URL.createObjectURL(blob));
        }
    }
    if (error) {
        if (error.message) {
            alert(" ErrorCode: " + error.errorCode + error.message);
        } else {
            alert(" ErrorCode: " + error.errorCode);
        }
    }
});

API によって返される ID で selectMedia API を呼び出しますviewImages。

// View images by id:
// Assumption: attachmentArray = select Media API Output
let uriList = [];
if (attachmentArray && attachmentArray.length > 0) {
    for (let i = 0; i < attachmentArray.length; i++) {
        let file = attachmentArray[i];
        if (file.mimeType.includes("image")) {
            let imageUri = {
                value: file.content,
                type: 1,
            }
            uriList.push(imageUri);
        } else {
            alert("File type is not image");
        }
    }
}
if (uriList.length > 0) {
    microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => {
        if (error) {
            if (error.message) {
                output(" ErrorCode: " + error.errorCode + error.message);
            } else {
                output(" ErrorCode: " + error.errorCode);
            }
        }
    });
} else {
    output("Url list is empty");
}

URL で API を呼び出す viewImages :

// View Images by URL:
// Assumption 2 urls, url1 and url2
let uriList = [];
if (URL1 != null && URL1.length > 0) {
    let imageUri = {
        value: URL1,
        type: 2,
    }
    uriList.push(imageUri);
}
if (URL2 != null && URL2.length > 0) {
    let imageUri = {
        value: URL2,
        type: 2,
    }
    uriList.push(imageUri);
}
if (uriList.length > 0) {
    microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => {
        if (error) {
            if (error.message) {
                output(" ErrorCode: " + error.errorCode + error.message);
            } else {
                output(" ErrorCode: " + error.errorCode);
            }
        }
    });
} else {
    output("Url list is empty");
}

マイクを介してオーディオを録音するための呼び出し selectMedia と getMedia API:

  let mediaInput: microsoftTeams.media.MediaInputs = {
    mediaType: microsoftTeams.media.MediaType.Audio,
    maxMediaCount: 1,
    };
    microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
        if (error) {
            if (error.message) {
                alert(" ErrorCode: " + error.errorCode + error.message);
            } else {
                alert(" ErrorCode: " + error.errorCode);
            }
        }
    // If you want to directly use the audio file (for smaller file sizes (~4MB))    if (attachments) {
    let audioResult = attachments[0];
    var videoElement = document.createElement("video");
    videoElement.setAttribute("src", ("data:" + audioResult.mimeType + ";base64," + audioResult.preview));
    audioResult.getMedia((error: microsoftTeams.SdkError, blob: Blob) => {
    if (blob) {
        if (blob.type.includes("video")) {
            videoElement.setAttribute("src", URL.createObjectURL(blob));
        }
    }
    if (error) {
        if (error.message) {
            alert(" ErrorCode: " + error.errorCode + error.message);
        } else {
            alert(" ErrorCode: " + error.errorCode);
        }
    }
});
});

Teams モバイルでのファイルのダウンロード

ユーザーが Web ビューからモバイルデバイスにファイルをダウンロードできるようにアプリを構成できます。

注:

ファイルのダウンロードは Android Teams モバイルクライアントでのみサポートされ、認証されていないファイルのみをダウンロードできます。

有効にするには、次の手順に従います。

Teams アプリマニフェスト.json ファイルを更新するには、プロパティをdevicePermissions追加し、更新マニフェストに示すようにをmedia指定します。
次の形式を使用し、HTML ダウンロード属性を Web ページに追加します。
```
<a href="path_to_file" download="download">Download</a>
```

メディア機能を統合する

メリット

マニフェストを更新する

メディア機能 API

エラー処理

コードスニペット

Teams モバイルでのファイルのダウンロード

関連項目

フィードバック

その他のリソース

メディア機能を統合する

メリット

マニフェストを更新する

メディア機能 API

エラー処理

コード スニペット

Teams モバイルでのファイルのダウンロード

関連項目

フィードバック

その他のリソース

コードスニペット