この記事は公開されてから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でホスティングします。
portrait-channel.html
<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）のためにできていますが、動画自体は縦長となっています。
まとめ
Amazon IVSで縦長Portraitなライブ動画配信をしてみました。IVS側は特段設定はなく、Streaming Software側の設定のみで縦長なライブ配信が行えます。スマホからの配信などと相性が良さそうですね！
9
