【ワークアラウンド】React アプリケーションに Amazon Interactive Video Service ( IVS ) Player を組み込む

配信はストリームサーバーを指定するだけでOK。クライアントは作り込み可能。開発者が本当に欲しかったモノ。
2020.08.04

※こちらで紹介するやり方はワークアラウンド(本来のやり方ではない)です。本来意図する組み込みかたは、React や Vue のビルドプロセスでうまくいかなくなることがわかっています。React や Vue へ組み込む方法については、詳細が分かり次第再チャレンジします。詳細はこちらをご覧ください。

アプリケーション開発者にとって嬉しいサービス

先日、Amazon Interactive Video Service(以下、IVS)が発表されました。個人的にはメディア系で一番うれしいサービスです。

IVSは、ビデオストリーミングを短いステップ数で開始できるサービスです。開発側(運用側)がやることは以下のような作業で済みます。

  • IVS のストリームを用意する(AWSコンソールで作業)
  • 作成したストリームを配信者に伝える
  • Amazon IVS SDK を使って、Webやモバイルアプリにプレイヤーを組み込む

以上です。これは、事業開発の観点でみると、以下のユースケースで有効です。

  • TwitchOPENREC のような配信サービスを提供したい
  • アイレット様がやっているような、オリジナルの勉強会のストリーミング環境を構築したい
  • HELLO! PROJECT の 「ハロプロ研修生発表会」のような、ワンショットのイベントをストリーミング配信したい
    • 視聴者による投票機能など、そのイベント専用のアプリケーションも提供したい

いずれのユースケースも、 配信者の手間は最小限に、視聴者にリッチな体験を届けたい というモチベーションだとわかります。これを踏まえて、Web版で、React に組み込めれば、アプリケーションとして開発しやすいなと考え、最小限の構成でまずは組み込んでみるところからはじめました。

現状、インストールした Amazon IVS SDK は素直には使えない

早速こちらのサンプルを見ながら、Reactアプリケーションに組み込むチャレンジをしました。

…が、駄目!どう頑張っても、再生のときに WebAssembly 関連のエラーになってしまいます。 create-react-app で作ったこともあり、yarn eject して webpack.config.jswasm ファイルもバンドルするよう設定を追加したりも試したのですが、結局 ivs sdk をインストールして使う方法はうまくいきませんでした。

Vue でも同様のようなので、もう少し情報が集まるまで待ちます。今回は、issueのコメントにもある、<script>タグをappendしてIVSプレイヤーを組み組むワークアラウンドを紹介します。

暫定的な回避方法

create-react-app した後、AmazonIVSWorkaround.js というコンポーネントを作ります。以下のように書きます。

AmazonIVSWorkaround.js

import React, {useEffect, useRef} from 'react';


function AmazonIVSWorkaround(options) {
    const divEl = useRef(null);
    const videoEl = useRef(null);

    useEffect(() => {

            const script = document.createElement('script');
            script.src = 'https://player.live-video.net/1.0.0/amazon-ivs-player.min.js';
            script.async = true;
            document.body.appendChild(script);
            script.onload = () => {
                // eslint-disable-next-line no-undef
                if (IVSPlayer.isPlayerSupported) {
                    // eslint-disable-next-line no-undef
                    const player = IVSPlayer.create();
                    player.attachHTMLVideoElement(document.getElementById('video-player'));
                    player.load("https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8");
                    player.play();
                }
            }

            return () => {
                document.body.removeChild(script);
            }
        },
        []
    )

    return (
        <div ref={divEl}>
            <video
                id="video-player"
                ref={videoEl}
                playsInline
                autoPlay
                height={300}
                controls
            />
        </div>
    );
}

export default AmazonIVSWorkaround;

こちらのガイド で紹介されているのと同じやり方です。スクリプトを読み込んだ後、グローバルスコープに追加された IVSPlayer を使ってストリームを再生しています。ちなみにこちらで再生しているストリームはあらかじめAWSが用意してくれているデモストリームのようです。常に流れているので、テストで有用です。

App.js に組み込み、yarn start すると以下意図どおり再生できます。

ivs-workaround.png

yarn add amazon-ivs-player で追加したプレイヤーを組み込む方法がわかったら、再度チャンレンジします。

サンプルリポジトリ

以下の手順で試せます。

  • git clone git@github.com:cm-wada-yusuke/amazon-ivs-react-js-sample.git
  • cd amazon-ivs-react-js-sample
  • yarn install
  • yarn start