Amazon Interactive Video ServiceのプレーヤーSDKを使ってサクッとブログにライブストリーミング動画を埋め込んでみた

三分で出来る無間地獄ライブ配信

#Amazon Interactive Video Service（IVS）

#AWSメディアサービス

#AWS

Shirota

2020.07.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

何の休みだかよく分からないけど四連休嬉しいな！と思っていたのがもう先週の事だと思うと、時間の流れがとても早く感じます。

▲ 「光陰矢の如し」のイラストは無かった！勝った！

10月の祝日が消えた事に困惑を隠せないAWS事業本部のShirotaです。そもそも体育の日がスポーツの日に改名されていた事すら知りませんでした。
先日の四連休は趣味の動画編集に打ち込んでいたのですが、AWSでも久々に動画周りで嬉しいリリースがあった事を思い出しました。
今回は、それに関する事をお話しします。

Amazon Interactive Video Serviceがやってきた！

つい2週間ほど前となる2020年7月16日、簡単にライブストリーミング環境が構築できるマネージドサービスである「Amazon Interactive Video Service(以下Amazon IVS)」が新たに登場しました。
それこそ、サービスとしては2018年に登場したAWS Media ServicesであるElementalシリーズ以来の新サービスではないでしょうか。(サービス外も含めると、直近では2020年5月に発表されたデバイスの AWS Elemental Link が最新のMedia系アップデートになりそうです)
Amazon IVSについては、弊社大前による以下の新サービス紹介ブログに分かり易く概要や「やってみた」がまとまっておりますので、良かったらそちらを参考にして下さい。

さて、上記ブログでも紹介されているのですが、Amazon IVSの公式ページを見てみると今回のAmazon IVSの登場で気になるものが提供されている事に気付きました。

Easy integration into websites and apps
Get live streams into your iOS, Android, and web apps, quickly and easily with the Amazon IVS player SDK. The player SDK gives your audiences a consistent experience and low-latency live streams across different platforms, without compromising video quality or increasing buffering.

Amazon Interactive Video Service

それは、プレーヤーSDK に他なりません。

プレーヤーSDKの提供はAWS初

今まではAWSでプレーヤーSDKは提供されていなかった為、ユーザーは何らかの方法で動画プレーヤーを実装する必要がありました。
例えば、Video.js を利用して動画プレーヤーを実装してるブログがDevelopers.ioでも複数見かけられます。

Video.js ｜検索結果: ｜ Developers.IO

他にも、THEOplayerのようなプレーヤー実装を楽にしてくれるSDKを提供しているサービスもあります。

そんな中で、 AWSが新サービスと共に初めてプレーヤーSDKを提供したとなると気になりませんか？
私は内容はともかく気になりました。初めてのXX、という響きだけでも心が踊るタイプの人間だからです。
皆さんプレーヤーSDKが気になったところで、今回提供されたプレーヤーSDKの概要をさらっていきましょう。

Amazon IVSのプレーヤーSDKについて

Amazon IVSを利用していてプレーヤーSDKを利用したい場合、 Amazon IVSのプレーヤーSDKは必須になってきます 。

Amazon IVSのユーザーガイドの冒頭には、以下のような文章がありました。

To use Amazon Interactive Video Service (IVS), you must use the Amazon IVS Player. The Amazon IVS Player is a cross-platform suite of SDKs for playback of Amazon IVS streams. Note that third-party players do not work with Amazon IVS.

Amazon Interactive Video Service Player - Amazon Interactive Video Service

サードパーティー製のプレーヤーとAmazon IVSの連携は想定されていないようです。
また、プレーヤーSDKはそれぞれ各種Webブラウザ上、AndroidやiOS上で動画プレーヤーを構築でき、Video.jsの拡張のサポートもおこなっています。
それぞれどのバージョンに対応しているかは、以下のようになっています。

デスクトップブラウザ

ブラウザ	サポートしているプラットフォーム	サポートしているバージョン
Chrome	Windows, macOS	最新2つのメジャーバージョン(現行バージョンと最も直近の最新バージョン)
Firefox	Windows, macOS	最新2つのメジャーバージョン(現行バージョンと最も直近の最新バージョン)
Edge	Windows 8.1以降	44.0以降(ただし、旧バージョンのMicrosoft Edgeのオートモードでは低遅延のプレーバックには対応していない)
Safari	macOS	最新2つのメジャーバージョン(現行バージョンと最も直近の最新バージョン/ただしオートモードでは低遅延のプレーバックには対応していない)

モバイルブラウザ

ブラウザ	サポートしているバージョン
Chrome for iOS, Safari for iOS	最新2つのメジャーバージョン(現行バージョンと最も直近の最新バージョン/ただし、低遅延のプレーバック及び時限メタデータは非対応)
Chrome for Android	最新2つのメジャーバージョン(現行バージョンと最も直近の最新バージョン)

ネイティブプラットフォーム

プラットフォーム	サポートしているバージョン
Android	5.0 (Lollipop)以降
iOS	10.0以降

さて、Amazon IVSのプレーヤーSDKについてざっくりお話ししたところですが、とりあえず触ってみたくなりました。
と言うわけで早速ですが、これを用いてサクッとブラウザ上にストリーミング動画を埋め込んでみたいと思います。

埋め込んでみた

まずは、埋め込む前の下準備をしていきます。

今回動画を埋め込んだ環境

ブラウザ：Google Chrome 84.0.4147.89(検証当時最新)
プラットフォーム：macOS

Amazon IVSのチャネルを作成してOBSから配信する

ここに関しては、前述した新サービス紹介ブログに従ってAmazon IVSのチャネルを作成して、配信ソフトであるOBSを用いて配信を行います。
このやり方は、以下のAWSが提供しているワークショップにも載っているので、そちらも参考にどうぞ。

Getting Started :: Amazon Interactive Video Service Workshop

仕込みはここまでで完了しているはずなので、今回の本題であるプレーヤーSDKを早速使っていきましょう。

プレーヤーSDKを使ってブログに動画プレーヤーを埋め込む

今回は、自分のエントリに動画プレーヤーを埋め込んで検証してみました。
その際、以下ユーザーガイドに載っているサンプルコードを参考にして動画プレーヤーを埋め込みました。

Amazon Interactive Video Service Player: SDK for Web Guide - Amazon Interactive Video Service

  
<head>
    <script src="https://player.live-video.net/1.0.0/amazon-ivs-player.min.js"></script>
</head>

<body>
    <video id="video-player" width="560" height="315" controls playsinline></video>
    <script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create();
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.load("https://XXXXXXXXXXXX.us-east-1.playback.live-video.net/api/video/v1/us-east-1.XXXXXXXXXXXX.channel.XXXXXXXXXX.m3u8");
  }
</script>
</body>

player.loadのURLは、先ほど作成したチャネルのプレーバック設定の項目にあるものを利用します。

▲ ワンクリックでコピーができる、いい時代になった

これを用いて、ブログに動画を埋め込んでみたものがこちらになります。

▲ 何これ？熱出した時に見る悪夢？

配信環境の背景画像に埋め込み動画が映り込んでいる という、合わせ鏡の構造が生まれてしまった為、あたかも無間地獄のような世界が配信されてしまいました。

Amazon IVSのチャネルのライブストリームタブからも現状を確認できます。

▲ オンラインミーティングの画面共有でたまにやらかすアレ

ブラウザ上からとこちらのタブから閲覧している為、閲覧者がちゃんと2になっている事も確認できました。

おまけに、実際にこの現状が動く様を画面録画してみたので、そちらも良かったらどうぞ。

▲ カクついているのはOBS+3tene+Chrome上でストリーミング動画再生と鬼のようにCPUを食い潰していたせい

Amazon IVS+プレーヤーSDKでライブ配信が捗る可能性が見えた

提供されているサンプルコードを用いて、あっという間にブログ上にストリーミング動画を埋め込む事ができました！
また、今回初めてAmazon IVSを触ったのですが、実質「チャネルを作成」「チャネル名を入力」「作成」の3ステップでライブ配信のチャネルが作成できて「私はライブ配信の準備として何をやったんだっけ……？」と思ってしまうくらい手軽に配信環境の用意ができました。
OBS側への設定に必要な情報もこの時点でサクッと用意されてしまうので、ひたすらマネージドサービスに導かれるだけでライブ配信ができました。こんなに便利で良いのかと思ってしまったくらいです。

ライブ配信そのものも、その後の動画プレーヤー環境の実装もこれ一つで簡単にできるとなると今後選択肢として考えられる機会が増えてくるのではないかと思います。
よりライブ配信の便利な使い道などを考える余裕も生まれそうです。

このブログが、Amazon IVSのプレーヤーSDKが気になっていた方の助けになれば幸いです。