share facebook facebook facebook twitter twitter menu hatena pocket slack

2021.03.15 MON

React と Video.js を使って Amazon IVS プレイヤーを実装する

遠藤 優輝

WRITTEN BY 遠藤 優輝

2021 年より streampack チームに join した endo です。
Qiita に投稿するのは初めてですが、よろしくお願いします。

はじめに

Amazon Interactive Video Service (IVS) のプレイヤーを実装する機会があったので書いていこうと思います。

前提

React を使用したプロジェクトにて Video.js が組み込まれている状態を想定しています。
一応ゼロからのセットアップ手順を記載していますが、詳細については各々の公式サイトをご参照ください。

React のセットアップ

create-react-appを使って React の環境を構築します。

shell

npx create-react-app 【アプリ名】

https://ja.reactjs.org/docs/create-a-new-react-app.html

Video.js のインスール

Video.js が組み込まれていない場合 npm or yarn 経由で Video.js をインストールしてください。

shell

$ npm install --save-dev video.js

https://videojs.com/getting-started/#install-via-npm

プレイヤーの実装

AWS のドキュメントを参考に実装していきます。

注意点として気をつけたいのが IVS プレイヤーを React で実装する場合 npm or yarn でインストールすると現時点ではエラーとなるということです。

したがって、エラーを回避するために動的に JS を script タグで読み込みます。

App.js の修正

AmazonIVSPlayer という名前でコンポーネントを作成し import します。

App.js

import React from "react";
import AmazonIVSPlayer from "./components/AmazonIVSPlayer";

const App = () => {
  return <AmazonIVSPlayer />;
}

export default App;

プレイヤー部分のコーディング

まずはVideo.jsを import します。

import videojs from "video.js";
import "video.js/dist/video-js.css";

その後、動的にamazon-ivs-videojs-tech.min.jsを読み込みます。

const script = document.createElement("script");
script.src =
  "https://player.live-video.net/1.2.0/amazon-ivs-videojs-tech.min.js";
document.body.appendChild(script);

registerIVSTech関数を使って Video.js の登録をします。option がある時は第二引数に渡します。

registerIVSTech(videojs, options);

Video.js を使ってプレイヤーの初期化をします。techOrderオプションでAmazonIVSを追加します。

const player = videojs(
  "amazon-ivs-videojs",
  {
    techOrder: ["AmazonIVS"],
  },
  () => {
    // Play stream
    player.src(PLAYBACK_URL);
  }
);

全体的なコードは以下のようになります。

AmazonIVSPlayer.js

/* global registerIVSTech  */
import React, { useEffect, useRef } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";

const AmazonIVSPlayer = () => {
  const playerRef = useRef();

  useEffect(() => {
    const script = document.createElement("script");
    script.src =
      "https://player.live-video.net/1.2.0/amazon-ivs-videojs-tech.min.js";
    document.body.appendChild(script);

    script.addEventListener("load", () => {
      const PLAYBACK_URL =
        "【動画URL】";

      registerIVSTech(videojs);

      // Initialize player
      const player = videojs(
        "amazon-ivs-videojs",
        {
          techOrder: ["AmazonIVS"],
        },
        () => {
          console.log("Player is ready to use!");

          player.src(PLAYBACK_URL);
        }
      );

      playerRef.current = player;
    });

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

  return (
    <div>
      <video
        id="amazon-ivs-videojs"
        className="video-js vjs-4-3 vjs-big-play-centered"
        controls
        autoPlay
        playsInline
        muted
      ></video>
    </div>
  );
};

export default AmazonIVSPlayer;

画質選択機能を付けてみる

画質選択機能をつけるにはプラグインを追加します。

amazon-ivs-videojs-tech.min.jsに加えて、amazon-ivs-quality-plugin.min.jsを読み込む必要があります。

動的に複数の JS を読み込むことになるので、全ての JS のロードを待つ必要があります。

const loadScripts = [
  {
    src: "https://player.live-video.net/1.2.0/amazon-ivs-videojs-tech.min.js",
  },
  {
    src: "https://player.live-video.net/1.2.0/amazon-ivs-quality-plugin.min.js",
  },
];

// counterを用意して全てのJSの読み込みが終わったらプレイヤーを初期化する
let counter = 0;
const counterMax = loadScripts.length;

loadScripts.forEach((scr, i) => {
  const script = document.createElement("script");
  script.src = scr.src;
  document.body.appendChild(script);
  loadScripts[i].ref = script;

  script.addEventListener("load", () => {
    counter++;
    if (counter === counterMax) {
      // ここからプレイヤーの初期化処理
      // ...
    }
  });
});

registerIVSQualityPlugin関数を使って Video.js を登録し、

registerIVSQualityPlugin(videojs);

プレイヤーの初期化時にプラグインの有効化をします。

player.enableIVSQualityPlugin();

全体的には以下のようなコードになると思います。

AmazonIVSPlayer.js

/* global registerIVSTech , registerIVSQualityPlugin */
import React, { useEffect, useRef } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";

const AmazonIVSPlayer = () => {
  const playerRef = useRef();

  useEffect(() => {
    const loadScripts = [
      {
        src:
          "https://player.live-video.net/1.2.0/amazon-ivs-videojs-tech.min.js",
        ref: null,
      },
      {
        src:
          "https://player.live-video.net/1.2.0/amazon-ivs-quality-plugin.min.js",
        ref: null,
      },
    ];

    let counter = 0;
    const counterMax = loadScripts.length;

    loadScripts.forEach((scr, i) => {
      const script = document.createElement("script");
      script.src = scr.src;
      document.body.appendChild(script);
      loadScripts[i].ref = script;

      script.addEventListener("load", () => {
        counter++;
        if (counter === counterMax) {
          const PLAYBACK_URL =
             "【動画URL】";

          registerIVSTech(videojs);
          registerIVSQualityPlugin(videojs);

          // Initialize player
          const player = videojs(
            "amazon-ivs-videojs",
            {
              techOrder: ["AmazonIVS"],
            },
            () => {
              console.log("Player is ready to use!");

              // Play stream
              player.src(PLAYBACK_URL);

              player.enableIVSQualityPlugin();
            }
          );

          playerRef.current = player;
        }
      });
    });

    return () => {
      playerRef.current.dispose();
      loadScripts.forEach(scr => {
        document.body.removeChild(scr.ref);
      });
    };
  }, []);

  return (
    <div>
      <video
        id="amazon-ivs-videojs"
        className="video-js vjs-4-3 vjs-big-play-centered"
        controls
        autoPlay
        playsInline
        muted
      ></video>
    </div>
  );
};

export default AmazonIVSPlayer;

まとめ

Reactを使ってのIVSプレイヤーの実装でした。
プレイヤーのUIを作るのは結構大変なので、 Video.js に対応しているのは非常にありがたいですね。

参考 URL

https://docs.aws.amazon.com/ivs/latest/userguide/player.html
https://aws.github.io/amazon-ivs-player-docs/1.2.0/web/
https://docs.videojs.com/
https://dev.classmethod.jp/articles/workaround-react-ivs/)

元記事はこちら

React と Video.js を使って Amazon IVS プレイヤーを実装する

遠藤 優輝

遠藤 優輝

streampackチーム所属。グミが好きです。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。