Blazor Server アプリに Video Indexer ポータル相当の機能（プレイヤー、インサイト、検索など）を取り込む

---

🔧 手順概要

1. Azure Video Indexer の準備

1. Azure Portal で Video Indexer アカウントを作成
2. Account Id、Location（例: trial や eastus）、API Key を控える
3. API を使って Access Token を取得（埋め込みには毎回必要）

// 例: AccessToken取得 (HttpClient使用)
var client = new HttpClient();
client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "<YOUR_API_KEY>");

var url = $"https://api.videoindexer.ai/Auth/{location}/Accounts/{accountId}/AccessToken?allowEdit=true";
var token = await client.GetStringAsync(url);

---

2. Blazor Server プロジェクトの作成

dotnet new blazorserver -n VideoIndexerDemo
cd VideoIndexerDemo

---

3. 埋め込みウィジェットを追加

Pages/Index.razor に iframe を仕込むだけで最低限動く。

@page "/"
@inject HttpClient Http

<h3>Video Indexer Insights</h3>

@if (accessToken is null)
{
    <p>Loading...</p>
}
else
{
    <iframe src=@iframeUrl 
            width="100%" 
            height="800" 
            frameborder="0" 
            allowfullscreen>
    </iframe>
}

@code {
    private string? accessToken;
    private string? iframeUrl;

    protected override async Task OnInitializedAsync()
    {
        // TODO: APIからトークンを取得
        accessToken = await GetAccessToken();

        // Video Id / Player Id を自分の環境に置き換える
        var videoId = "<VIDEO_ID>";
        var playerId = "default";
        var location = "trial"; // eastus など

        iframeUrl = $"https://www.videoindexer.ai/embed/insights/{videoId}/{playerId}?accessToken={accessToken}&locale=ja";
    }

    private async Task<string> GetAccessToken()
    {
        var apiKey = "<YOUR_API_KEY>";
        var accountId = "<YOUR_ACCOUNT_ID>";
        var location = "trial";

        var client = new HttpClient();
        client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", apiKey);

        var url = $"https://api.videoindexer.ai/Auth/{location}/Accounts/{accountId}/AccessToken?allowEdit=true";
        return (await client.GetStringAsync(url)).Trim('"');
    }
}

---

4. サーバー側でトークン管理（推奨）

埋め込み用トークンは短時間で切れるので、Blazor のサーバーコードで定期的に更新し、
クライアントに供給する仕組みを作るのがベスト。

例: Services/VideoIndexerService.cs を作ってラップすると便利。

---

5. 追加機能

Microsoft のサンプルリポジトリ【Embedding widgets】では以下のウィジェットも埋め込み可能：

• Insights Widget → 会話・人物・トピックの解析結果
• Player Widget → 動画再生と解析タイムライン
• Search Widget → 動画内容検索機能

Blazor では、iframe の src を切り替えるだけでこれらを切り替え表示できる。

---

✅ まとめ

• Blazor Server に Video Indexer を埋め込むには iframe + APIトークン が基本
• AccessToken は短時間で切れるので、必ずサーバー側で取得＆供給する仕組みが必要
• GitHub のサンプルと同じく、Insights / Player / Search の各ウィジェットを自由に組み合わせ可能