){kind=small}
Vonage Video APIとウェブコンポーネントでパーソナルTwitchを作る
所要時間：1 分
投稿は、同時ライブインタラクティブ参加者の増加、低遅延HLSブロードキャスト、および新しいVonage Experience Composerを含むVonage Video API March 2022リリースに更新されました。
はじめに、いくつかのことを定義し、期待値を設定しましょう。Twitchは、人々が放送し、視聴者と交流することを可能にする巨大なプラットフォームである。Wikipediaより ウィキペディア:「2020年2月現在、月間300万人のブロードキャスターと1,500万人のデイリーアクティブユーザーがおり、平均同時接続者数は140万人である。
このような規模のものを作るには、1つのブログ記事で学べる以上のことが必要だ。その代わり、この記事の範囲は、より「個人的なTwitch」を作ることに向けられる。ポップスターのスタジアム規模のコンサートではなく、喫茶店でのローカル／インディペンデント・アーティストのコンサートだ。放送している人が実際にチャットルームのメッセージを読めるような場所。
つまり、最終的なアプリケーションの核となるのは、ホストが自分自身とゲストを視聴者に向けて放送し、テキストチャットで対話できるようにすることです。さらに、Web Componentsを既存のアプリケーションに統合して機能を追加する方法を示す機会にもなります。
前述の既存のアプリケーションは ブロードキャストサンプルアプリで、Vonage Video API のブロードキャスト機能を紹介するために作成されました。テキスト・チャットを追加するには Client SDK UI Web コンポーネントを使用します。
Vonage Video APIは、ビデオセッションを視聴者と共有する2つの方法を提供します。
ライブ双方向ビデオ放送- このオプションでは、プレゼンター（ホストとゲスト）と視聴者がビデオセッションに接続します。プレゼンターは互いの音声とビデオのストリームを公開し、購読しますが、視聴者はプレゼンターの個別のストリームを購読するだけです。(注: 視聴者は、すでにセッションに接続しているので、ストリームを公開することができます)。全員が他の全員のストリームを購読しているため、レイテンシは低くなりますが、公開ストリームの数に基づく参加者数の上限があります。その上限は、同時ライブインタラクティブ参加者数15,000人です。可能な視聴者数を決定するのに役立つ便利な表がドキュメントにあります。
ライブストリーミング放送- プレゼンターはまだお互いのストリームを公開、購読していますが、視聴者が消費する放送ストリームは1つに統合されます。ストリームを統合することで、視聴者には若干のレイテンシーが追加されます。HLSストリームとRTMPストリームの両方をブロードキャストすることができます。最新のリリースでは、低遅延HLSブロードキャストオプションが導入され、遅延が4～6秒程度に大幅に短縮されました。このオプションは、Twitch、YouTube、Facebookなどがライブストリームを扱う方法に近い。また、視聴者がライブ放送を一時停止したり再開したりできる新しいHLS DVRオプションもある。
Vonage Video APIブロードキャスト・サンプルはどちらも可能ですが、ここでは個人的なTwitchアプリケーションのために、ライブ・ストリーミング・ブロードキャスト・オプションに焦点を当てます。
チャットなしのTwitchライブストリームとは？その機能を追加するために Client SDK UIウェブコンポーネントが使用されます。具体的には vc-messages, vc-text-inputおよび vc-typing-indicator要素が統合されます。
自分が作成したものではない既存のアプリケーションにWeb Componentsを追加する場合、新規プロジェクトや現在構築中のアプリケーションに追加する場合よりも、いくつかの考慮事項が必要になることがあります。以下は、Broadcast サンプルアプリにチャットを追加する際に私が行ったいくつかの作業です。
既存のアプリケーションにウェブコンポーネントを追加するスペースがありますか？レイアウトによっては、多少の再配置が必要になるかもしれません。最終的な結果をどのようにしたいかを前もって計画し、コードに飛び込んで移動する必要があるものを確認するのに役立ちます。幸運なことに、Broadcastのサンプルアプリのレイアウトはそれほど複雑ではなかった。ただ、Videoセクションをもう少し狭くして、チャットインターフェースのためのスペースを作る必要がありました。これにはほとんどCSSが必要でした。
チャットをよりシームレスにアプリケーションに統合するには、次のようにします。 ウェブコンポーネントを他の UI 要素にマッチさせることができます。
Webコンポーネントをアプリケーションのユーザーインターフェイスに適合させることについて説明しましたが、ユーザーエクスペリエンスに適合させることについてはどうでしょうか？ウェブコンポーネントが機能するためには何が必要で、それらはすでにアプリケーションで利用可能なのでしょうか？
例えば、チャットでは、誰がどのメッセージを入力したかが分かるように、ユーザー名が必要です。ユーザー名とパスワードを使ってアプリケーションにログインした後、ユーザーがチャットに参加するために再びユーザー名を入力しなければならないとしたら、素晴らしい体験ではありません。Broadcastのサンプルアプリの範囲にはログインが含まれていたので、ユーザーがチャットで使用したいユーザー名を追加するための入力フィールドを追加しました。
Client SDK UI Web Componentsも、正しいチャットにメッセージを送信して表示できるように、会話IDを知る必要があります。Broadcastのサンプルアプリでは、URLにパラメータを使用してストリームに関する情報を渡します。
もうひとつ。Twitchのライブストリームのページにアクセスしたとき、ビデオが再生されているのに音量がミュートされていたことはないだろうか？それは 自動再生ポリシーのせいです。このポリシーに沿うため、私はデフォルトでブロードキャスト・ビデオ・ストリームをミュートし、それをオフまたはオンに切り替えるボタンを追加した。
作成されたアプリケーションが実際に動作しているのを見たい場合は、以下のプロジェクトをリミックスすることができます。 グリッチプロジェクト.セットアップスクリプトを実行し、APIキーとシークレットをいくつか入力することで、あなたも自分だけのTwitchを持つことができる。
新しいVonage Experience Composerを取り入れた今後のブログ記事にご期待ください。これは、アプリケーション全体（ビデオストリーム、ユーザーインターフェイス、チャットなど）をスクリーンキャプチャし、録画やブロードキャストに使用する方法です。
ご質問やご意見がございましたら、お気軽に私たちのコミュニティ コミュニティSlackチャンネル.