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

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

• amazon-ivs-wasworker.min.wasm dependency not found · Issue #4 · aws-samples/amazon-ivs-player-web-sample

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

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

• Amazon Interactive Video Service (Amazon IVS) のご紹介

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

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

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

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

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

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

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

• aws-samples/amazon-ivs-player-web-sample: This project contains code samples demonstrating how to build, package, and integrate with the Amazon IVS Player Web SDK.

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

• amazon-ivs-wasworker.min.wasm dependency not found

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 すると以下意図どおり再生できます。

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

サンプルリポジトリ

• amazon-ivs-react-js-sample

以下の手順で試せます。

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