教育系、ライブコマース系、投げ銭系のライブ配信ではアーカイブでの配信も有効活用されます。
これらのアプリではホワイトボードであったり、チャットであったり、商品情報等、様々なコンテンツが動画以外の部分に表示されているのが一般的です。

アーカイブ配信ではリアルタイムの画面表示を再現する必要が出て来ます。

この記事ではライブコマースのライブ配信アプリを例にアーカイブ動画の設計について解説します。
映像配信部分についてはAgora.ioを利用する想定になります。

アプリの概要

（筆者の好みで釣具のライブコマースを想定します）

配信側

スマホを3脚に固定して配信。配信開始,録画開始等のボタンや視聴者からのコメントが見れるシンプルな仕様。
利用中(販売中)の釣具を設定して視聴者に情報提供。
別システムと連携して現在の釣り場の状況も見れる。
視聴者からのコメントも見れる。

視聴側
映像だけではなく複数の情報がリアルタイムに表示される。
アーカイブ動画でもリアルタイムと同様にタイムラインに沿って複数の情報が更新される。

一番簡単な録画方法

手っ取り早くアーカイブ録画を作成するには、視聴アプリをそのままスクリーンキャプチャしてしまうことです。
（アシスタントさんが必要になってきますが。。。）

アーカイブ録画のシステム化

Agora.ioでは以下の3パターンの録画方法を提供しています。

オンプレミス録画
クラウド録画
Webページ録画

大雑把な違いについては以下になります。

録画開始までのフロー

すべての録画パターンにおいて基本的に以下のフローになります。

サーバーの管理について(A)オンプレ録画、(B)クラウド&Webページ録画で分けると以下のようになります。

アーカイブ再生アプリの設計

設計のポイント＝タイムラインとなります。
ライブ配信開始時を起点として

いつからいつまで
何が
どこに表示されていたか

等をデータとして残しておく必要あります。

動画(HLS)単体でのタイムラインファイル

.m3u8

HLSでの動画は.tsという動画ファイルと.m3u8というタイムラインを表すテキストファイルで成立しています。
.m3u8には.tsファイルの情報と再生する順番が記載されています。この情報をブラウザが最初に取得して、順番に動画を取得しながら再生をします。

出典元 Agora.io公式ドキュメントより

コンテンツ毎のタイムラインファイル

運営側で独自のフォーマットで作成する必要がでてきます。
イメージとしては以下のようなものです。

実際にはテキストファイルのような形式になります。
各項目についてもそれぞれ詳細なデータを保持しているパターンもあります。
表示座標や大きさ、ライブでは表示されてたけどアーカイブでは表示させない等。

Webページ録画の場合は

Agoraのサーバー内でブラウザが起動してWebページそのものを録画しつづけます
(視聴側がiOS/Androidアプリの場合は別途Webページ録画用にWebアプリを作る必要があります)

メリット
前述のような複雑なタイムラインファイルや実装不要で1つの動画ファイルで再現可能
デメリット
1つの動画ファイルで生成されるので編集が難しい（消したいチャット文言等）

最後に

agora.ioに関するお問い合わせはこちらから