Amazon IVSで縦長Portraitなライブ動画配信をしてみた

Amazon Interactive Video ServiceとiPhone 6s上のLarix Broadcasterを使ってPortrait、つまり縦長な動画のライブ配信をしてみました。スマホと相性が良いPortrait動画のライブ配信もAmazon IVSでできます。

#Amazon Interactive Video Service（IVS）

#AWSメディアサービス

#AWS

清水俊也

2020.09.28

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

はじめに

清水です。素早く簡単にセットアップでき超遅延なライブ配信ができるAmazon Interactive Video Service（Amaozn IVS）でPortrait、つまり縦長動画のライブ配信をしてみたのでまとめてみます。IVSのChannnel側の設定は特段必要なく（さすが簡単なセットアップを売りにしているだけありますよね！）、Streaming Software側（今回はLarix Broadcasterを使いました）でPortraitの映像を打ち上げるだけで縦長動画なライブ配信が可能です。

IVS Channelの作成

まずはAmazon IVSのChannelを作成します。といってもここで特段設定することはありません。通常の横長Landscape（1920x1080など）なライブ動画配信のときと同様に作成します。

配信ページの準備

続いて配信用ページを準備します。Amazon IVS Player SDK for Webを使い、AWSドキュメントやデモページを参考に、以下のようなhtmlファイルを作成し、S3でホスティングします。

<html>
  <head>
    <title>portrait-channel</title>
    <style>
      video {
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          position: fixed;
      }
    </style>
  </head>
  <body>
    <video id="video-player" playsinline controls></video>
    <script src="https://player.live-video.net/1.0.0/amazon-ivs-player.min.js"></script>
    <script>
      var PLAYBACK_URL = "https://XXXXXXXXXXXX.us-west-2.playback.live-video.net/api/video/v1/us-west-2.123456789012.channel.XXXXXXXX6CFp.m3u8";
      if (IVSPlayer.isPlayerSupported) {
          const player = IVSPlayer.create();
          player.attachHTMLVideoElement(document.getElementById('video-player'));
          player.load(PLAYBACK_URL);
          player.play();
      }
    </script>
  </body>
</html>

後述の実際のライブ配信のようすの箇所でも述べますが、配信ページのデザインについては一考の余地があるかと思います。（PCの横長画面で縦長Portraitなライブ動画を見ると左右の余白が気になってしまうので。）とは言え、私がデザインなど不得手なので、検証自体はこちらで進めます。

Streaming Softwareの設定

続いて今回のキモとなる、Streaming Software側の設定です。今回はiPhone 6s上でLarix Broadcasterを使用しました。このStreaming SoftwareはAmazon IVSの公式ドキュメントにも設定例が記載されているので、こちらも参考に設定していきます。

Resolutionは1920x1080とします。この情報だけだと横長Landscape動画になりそうですが、次の設定項目OrientationでPortraitを選択します。そのほかの設定は以下の通りです。

実際のLarix Broadcasterの画面は以下のようになります。iPhoneのUIが縦長状態（時計表示があるところが上）になっていて、横向きにしてもこれが維持されていることが確認できます。

実際の縦長Portraitなライブ動画配信のようす

Streaming Softwareの準備ができたら、実際に映像を打ち上げて配信ページで視聴を確認してみます。以下のように問題なく縦長Portraitな動画のライブ配信ができていますね！左右の余白の白部分はブラウザサイズ（こちらは横長Landscape）のためにできていますが、動画自体は縦長となっています。