Video Indexer API を試してみた Part.1

今回は Microsoft の Cloud Service のひとつ「Video Indexer」を扱ってみます。Video Indexer は専用ページが用意されており、ビデオをアップロードすることでその機能を使用することができますが、各種 API も準備されています。
参考情報 : [Video Indexer Portal](https://www.videoindexer.ai/)
参考情報 : [Video Indexer 概要紹介](https://azure.microsoft.com/ja-jp/services/media-services/video-indexer/)
参考情報 : [Video Indexer 公式ドキュメント](https://docs.microsoft.com/ja-jp/azure/media-services/video-indexer/)
今回は Video Indexer API でどのような値が取得できるのか試してみたいと思います。

#準備
まず準備として、今回実験するための動画を用意します。今回は私がよく聞いている Speak Up Radio の動画を準備しました。以下 YouTube で確認することが出来ます。

この動画はスピードラーニングが作成している動画で、二人の男性が英語で色々話す動画です。
参考情報 : [Do you know American pizza? 本当のアメリカピッザ知ってる？](https://www.youtube.com/watch?v=jogsSgCO5uY)
この動画を Video Indexer にアップロードします。Video Indexer ページの上部のアップロードボタンから、アップロードしたい動画ファイルを選択しアップします。処理に少し時間がかかりますが、しばらくして「ライブラリ」に動画が上がってきたら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/f5f1b57c-baf0-cc41-5416-fe671ba5e0e8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/52c09524-be1c-f606-7a50-0af9704b585c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/7dda7ce5-fd98-57bb-cbc1-b7d383c67f52.png)
アップしたビデオをクリックすると、Video Indexer のページから処理した情報を確認することが出来ます。単純に文字お越しをするだけではなく、トピックスを纏めたり、動画内でだれがしゃべっているかを自動で認識してくれるので非常に便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/c646991c-093e-74cb-9ae9-8b7f6454b86c.png)
ここまでで準備完了です。これだけでだいぶ便利なものだなぁと分かりますが、API でどんな値が取得できるのか見ていきましょう。

#API を試してみる
では API を試してみましょう。Video Indexer の API は以下のページにまとまっています。
参考情報 : [Video Indexer Developer Portal](https://api-portal.videoindexer.ai/)
今回はこの中の `Get Video Captions`、`Get Video Insights Widget` を試してみたいと思います。

尚、共通して必要となる情報は、以下です

```
location : Video Indexer リソース (Azure Media Service) を配置している場所
accountID : Video Indexer の Account ID
videoID : Video Indexer にアップした対象の Video ID
Access Token : Video に Access するための Token
```

location は Video Indexer のリソースがある場所の情報ですが、最初は Trial を選択することが出来ます。
Account ID 情報は Video Indexer の Portal から取得することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/7f0c2a94-f7c9-27c0-432c-0fbd387b2da8.png)
Video ID と Access Token は Video Indexer Portal の埋め込みコードから推測することが出来ます。埋め込みコードは以下から取得することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/9d2a58b6-5cb1-eed9-b4bb-298a2aa03580.png)
埋め込みコードは以下の様な形になっています。ここで Account ID と Video ID、Location を確認できます。

```
https://www.videoindexer.ai/accounts/{Account ID}/videos/{Video ID}/?location={Location}
```
※ Access Token は 埋め込みコードの `AccessToken=` 以下で取得できます。

以上の情報をコピーして、メモ帳などに保存しておきましょう。

##Get Video Captions
Get Video Captions は以下のサイトでパラメータが確認できます。
https://api-portal.videoindexer.ai/docs/services/Operations/operations/Get-Video-Captions/console
必要な情報である、`accountID`、`videoId` を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/24781cc7-65e8-122b-5b57-600738cd9b28.png)
※API サブスクリプションを有効化していない場合は以下ドキュメントを参考に有効化し、Key を取得してください。
参考情報 : [Tutorial: Use the Video Indexer API](https://docs.microsoft.com/en-us/azure/media-services/video-indexer/video-indexer-use-apis)
必要な情報を入力したら API に送信します。すると以下の情報が返ってきました。(Format を CSV にしています。)

```csv
Pragma: no-cache
x-ms-request-id: {ID}
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Date: Thu, 02 Apr 2020 10:55:45 GMT
X-Powered-By: ASP.NET
Content-Length: 17569
Content-Type: application/octet-stream
Expires: -1

0.90428179999999991,00:00:00.000,00:00:04.912,Did you know that pizzas aren't always round?
0.81353847066666674,00:00:04.912,00:00:11.298,"Let's talk pizza. Song. Hey everyone,"
0.913866162,00:00:11.298,00:00:13.489,"welcome to another episode, uh radio,"
0.91386616200000048,00:00:13.489,00:00:17.320,thanks for coming back through the fantastic wonderful spinning up
0.91386616200000048,00:00:17.378,00:00:20.339,in the air kinda episode here in the Speed Learning

~以下省略~
```
以上の結果から、`Get Video Captions` では、時間とキャプションが取得できることが分かりました。
またパラメータを `ja-JP` に設定すると日本語に翻訳されたキャプションを取得できます。(これはめちゃ便利！)

```csv
0.90428179999999991,00:00:00.000,00:00:04.912,あなたはピザが常に丸いとは限らないことを知っていましたか?
0.81353847066666674,00:00:04.912,00:00:11.298,ピザについて話しましょう。歌。ねえみんな、
0.913866162,00:00:11.298,00:00:13.489,別のエピソードへようこそ、ああラジオ、
0.91386616200000048,00:00:13.489,00:00:22.545,ホスト私の名前がMJであるスピードラーニングスタジオで、ここで空気のちょっとしたエピソードで素晴らしい素晴らしい回転を通して戻って来てくれてありがとう。
0.91386616199999993,00:00:22.545,00:00:25.083,私の名前はアダムで、彼はラジオを話すでしょう。
~以下省略~
```
##Get Video Insights Widget
Get Video Insights Widget は以下のサイトでパラメータが確認できます。
https://api-portal.videoindexer.ai/docs/services/Operations/operations/Get-Video-Insights-Widget?
同じ手順で API を実行してみます。実行する際、widgetType を選択します。このパラメータを設定することで、どの widget を取得するか設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/89880e16-9043-f29e-9dfe-4e958faad6f4.png)
実行すると以下のような結果が返ってきます。

```html
X-AspNetMvc-Version: 5.2
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
Cache-Control: private
Date: Thu, 02 Apr 2020 11:05:10 GMT
Server: Microsoft-IIS/10.0
X-Powered-By: ASP.NET
Content-Length: 3957
Content-Type: text/html; charset=utf-8





<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Video Indexer - Cognitive Insights</title>
    <base href="/">
    <link rel="stylesheet" href="https://breakdown-resources.azureedge.net/spa/5.6.11/apps/insights/styles.css">
        <script type="text/javascript">
            var instrumentationKey = 'アカウントID';
            var aiConfig = {
                instrumentationKey: instrumentationKey,
                disableAjaxTracking: true
            };
            var appInsights = window.appInsights || function (config) {
                function r(config) {
                    t[config] = function () {
                        var i = arguments;
                        t.queue.push(function () { t[config].apply(t, i) })
                    }
                }

                var t = { config: config }, u = document, e = window, o = "script", s = u.createElement(o), i, f;
                for (s.src = config.url || "//az416426.vo.msecnd.net/scripts/b/ai.2.min.js", u.getElementsByTagName(o)[0].parentNode.appendChild(s), t.cookie = u.cookie, t.queue = [], i = ["Event", "Exception", "Metric", "PageView", "Trace"]; i.length;) r("track" + i.pop());
                return r("setAuthenticatedUserContext"), r("clearAuthenticatedUserContext"), config.disableExceptionTracking || (i = "onerror", r("_" + i), f = e[i], e[i] = function (config, r, u, e, o) {
                    var s = f && f(config, r, u, e, o);
                    return s !== !0 && t["_" + i](config, r, u, e, o), s
                }), t
            }(aiConfig);
            window.appInsights = appInsights;
    </script>
    

</head>
<body class="embed">
    
<script>

    var VideoBreakdown = {
        User: {
            isRequestAuthenticated: "false" === "true" ? true : false,
            authenticatedUser: "",
            authenticatedUpn: "",
            authenticatedUserType: "MicrosoftCorpAad",
            authenticatedUserId: "00000000-0000-0000-0000-000000000000",
            isSuspended: "false" === "true" ? true : false,
            isAdmin: "false" === "true" ? true : false,
            locale: "",
            environmentType: "Trial",
            monitoringEnvironment : 'ProdTrial'
        },
        time: '637206284045382169',
        DEBUG_MODE: false,
        CSRFT: "tRpAWtA87F5zagQQqpCS6B1SrFIz9ECpRQLVyChTWUAXFUF7HvlopW83GJKaww03hn7xbj4ehl01z9GXg-IJN3mvSYRCoPLAR86SHB8kgJ41:But3sIOyhuk5LBHY-U5wky7QYxLLdPLN8muCS0LYsWnvocuiswa5jb8U-AO3UiPWKuKQvUEaTl8b4NkSPFHEh1LGiYUE4PgJ4LNw_2LQ_2o1",
        accessToken: "",
        ClientConfig: {
            codeCdn: "https://breakdown-resources.azureedge.net/spa/",
            codeLocation: "https://breakdown-resources.azureedge.net/spa/5.6.11/",
            codeVersion: "5.6.11"
        }
    };

    var VideoIndexer = {
        accountId: "アカウントID",
        videoId: "ビデオID"
    };

    if (window.appInsights) {
        if (window.VideoBreakdown.User.isRequestAuthenticated) {
            window.appInsights.setAuthenticatedUserContext(window.VideoBreakdown.User.authenticatedUserId);
        } else {
            window.appInsights.setAuthenticatedUserContext("AnonymousUser");
        }
    }

    
</Script>

        <app-root></app-root>
        <script type="text/javascript" src="https://breakdown-resources.azureedge.net/spa/5.6.11/apps/insights/runtime.js"></script>
        <script type="text/javascript" src="https://breakdown-resources.azureedge.net/spa/5.6.11/apps/insights/polyfills.js"></script>
        <script type="text/javascript" src="https://breakdown-resources.azureedge.net/spa/5.6.11/apps/insights/vendor.js"></script>
        <script type="text/javascript" src="https://breakdown-resources.azureedge.net/spa/5.6.11/apps/insights/main.js"></script>

</body>
</html>
```

このような形で取得することができるので、Web App 等から API を呼び出すことで Web Page に Widget を埋め込ませることが出来ます。

#まとめ
その他にもたくさん API が用意されています。それぞれ Try することができる Reference が用意されているので、使えそうなものを App に埋め込んでみると良いかもしれませんね。尚 Trial を超えた場合は、Azure Media Service で課金されるようなので、以下価格のページを参考に貼っておきます。
[Video Indexer 価格](https://azure.microsoft.com/ja-jp/pricing/details/cognitive-services/video-indexer/)