メディア機能を統合する

[アーティクル]
05/02/2022

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

メディア機能を統合する利点

Teams アプリにデバイス機能を統合する主な利点は、ネイティブ Teams コントロールを利用して、ユーザーに豊富でイマーシブなエクスペリエンスを提供することです。メディア機能を統合するには、アプリマニフェストファイルを更新し、メディア機能 API を呼び出す必要があります。

効果的な統合を実現するには、ネイティブメディア機能を使用できる、それぞれの API を呼び出すためのコードスニペットを十分に理解している必要があります。

Teams アプリのエラーを処理するには、API 応答エラーを理解しておくことが重要です。

注意

現在、Microsoft Teams によるメディア機能と QR バーコードスキャナー機能のサポートは、モバイルクライアントでのみ利用できます。
現在のところ Teams は、マルチウィンドウアプリ、タブ、および会議のサイドパネルへのデバイスのアクセス許可をサポートしていません。
デバイスのアクセス許可はブラウザーによって異なります。詳細については、「ブラウザーデバイスのアクセス許可」を参照してください。

マニフェストを更新する

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

"devicePermissions": [
    "media",
],

注意

アクセス許可要求 プロンプトは、関連する Teams API が開始されると自動的に表示されます。詳細については、「デバイスのアクセス許可要求」を参照してください。

メディア機能 API

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

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

重要

selectMedia、getMedia、および viewImages API は、タスクモジュール、タブ、個人用アプリなど、複数の Teams サーフェスから呼び出すことができます。詳細については、「Teams アプリのエントリポイント」を参照してください。
selectMedia マイクとオーディオのプロパティをサポートするように API が拡張されました。

デバイスのメディア機能を有効にするには、次の API セットを使用する必要があります。

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

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

Teams でのデバイスカメラと画像のエクスペリエンス

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

QR またはバーコードスキャナー機能の 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	戻り値が大きすぎて、プラットフォームサイズの境界を超えています。

コードスニペット

カメラを使用して画像をキャプチャするための selectMediaAPI を呼び出す:

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);
    }
});

大きなメディアをチャンクで取得するために getMediaAPI を呼び出す:

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);
        }
    }
});

selectMedia API によって返されたIDによるviewImagesAPI を呼び出す:

// 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 による viewImages API を呼び出す:

// 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:" + y.mimeType + ";base64," + y.preview));
    //To use the audio file via get Media API for bigger audio file sizes greater than 4MB        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);
        }
    }
});

メディア機能を統合する

このページはお役に立ちましたか?