303 測定値

数分で Jamstack サイトにストリーミングを追加する方法

に Raymond Camden7m2023/05/19

長すぎる; 読むには

先週、私は友人の Todd Sharp のライブストリーム、Streaming on Streaming に参加できたことをとてもうれしく思いました。 Todd は、Amazon Interactive Video Service (IVS) の主な開発者提唱者です。 IVS は、Twitch プラットフォームのパワーを利用して、それを手に入れる方法です。これがいかに簡単に始められるかについての基本的な概要を次に示します。

featured image - 数分で Jamstack サイトにストリーミングを追加する方法

先週、私は友人の Todd Sharp のライブストリーム、Streaming on Streaming に参加できたことをとてもうれしく思いました。そのセッションの録画はここで見ることができます。

Todd は、Amazon Interactive Video Service (IVS)、つまり、より簡単に言うと、Twitch プラットフォームの驚異的なパワーを利用してそれを手に入れる方法の主な開発者の提唱者です。 IVS は以下を提供します。

コンテンツのチャネルを作成する機能。

Web ベースから OBS などのより強力なツールまで、コンテンツをブロードキャストする複数の方法。

非常にシンプルな Web SDK を含む、コンテンツを表示する複数の方法。

超詳細なレポート。

また、ストリームへの緊密な統合により、文字起こし、Lambda ベースのチャットモデレーションなどが可能になります。

これは商用サービスですが、AWS のほとんどすべてのものと同様に、テストして自分にとって意味があるかどうかを確認できる無料利用枠があります。

私が Todd と行ったセッションでは、彼は独自のドキュメントとコンソールを「初めての開発者の体験」に提供したいと考えていました。したがって、まず最初に、製品を使用した最初の開発者のエクスペリエンスについて考え、実際に気を配ることは、おそらく最も重要なことの 1 つです。

私自身、開発者擁護活動のキャリアの中で、開発者のオンボーディングについて常に調べてコメントすることなく、何か新しいことに挑戦することはほぼ不可能であることを知っています。トッドは自分のストリームでこれをライブでやっているので、猛烈な尊敬に値する。

私は物事を壊したり間違ったことをしたり、DX に関しては最悪の悪夢であることでよく知られているので、それは彼にとって非常に勇気のあることでした。

(誤解のないように言っておきますが、私たちはこのストリームを事前に計画したわけではありません。事前に何も知らされなかったので、実際に知っていたのは彼のブログ投稿と一般的なチャットを読むことだけでした。)

ご想像のとおり、「独自の IVS をロールする」のようなものは非常に複雑になりますが、1 時間のセッションでチャンネルを設定し、OBS と Web ツールからブロードキャストして、シンプルな IVS を構築することができました。 Web ページにアクセスしてストリームを表示します。

Jamstack でストリーミングをサポートするというアイデアは非常に説得力があると思われるため、ここでそのハイライトのいくつかを共有したいと思いました。これはやや高レベルですが、ドキュメントは非常に詳細であり、詳細について詳しく説明されています。

また、「入門ガイド」から始めることもできます。

それを念頭に置いて、これがどれほど簡単に開始できるかについての基本的な概要を次に示します。

ステップ 1 - AWS を入手する

これは省略します。つまり、私が言っているのは違うと思いますし、何も仮定しないでください。しかし、大部分の人がすでに AWS を使用しているため、私の仮定は、あなたがすでにアカウントを持っているということです。

私は root のものを使用しましたが、上で共有した入門リンクをたどると、アクセスがより制限されたユーザーを設定することになります。これは、「The Right Thing to Do」であり、技術分野では「We Always Do The Right Thing」です。えへん。

ステップ 2 - チャンネルを作成する

次に、AWS コンソールの IVS 部分でチャネルを定義します。

念のために言っておきますが、IVS の tox の検索ボックスは、検索に非常に優れています。 AWS は少し圧倒されるかもしれませんが、最近では検索がずっと簡単になりました。

ほとんどの人はストリーミングについて知っていて、チャンネルの基本的な概念を理解していると思いますが、私がストリーミングを始めるとしたら、おそらく自分用のチャンネルは 1 つしか持たないと思います。

会社の Web サイトにストリーミングを追加したい場合は、トレーニングや外部イベントなどのためのチャネルを用意することを想像できます。

少なくとも 1 つのチャネルが必要です。新しいチャンネルを作成する場合、最低限必要な名前は次のとおりです。

オプションの 1 つは、ストリームを S3 に自動的に保存することであることに注意してください。 Todd とのストリームではこれを有効にしませんでしたが、これほど簡単に有効にできるのは本当に素晴らしいです。明らかに、大きなビデオファイルを保存するにはコストがかかりますが、有効にするのが非常に簡単であることに感謝しています。

ステップ 3 - ブロードキャスターを把握する

SDK、OBS Studio、または FFmpeg を使用したストリーミングのセットアップに関する入門ドキュメント。以前 OBS Studio を使ったことがあったので、Todd との配信ではそれを使いました。ただし、これまでに使用したことがない場合は、非常に圧倒される可能性があることを警告しておきます。

それは間違いなく私のためでした（まあ、私はまだ自分が何をしているのかほとんどわかっていません）。

代わりに、Todd がストリームの後半で私に共有した別のオプションstream.ivs.rocksを共有させてください。これは、IVS のテストに使用できる Web ベースのストリーミングソリューションです。

ブラウザでページを開き (Edge はサポートされていないと表示されていますが、私は問題ありませんでした)、歯車アイコンをクリックして設定に移動します。「取り込みエンドポイント」と「ストリームキー」を指定する必要があります。どちらも AWS コンソールのチャネル詳細で見つけることができます。

私と同じ間違いをしないでください。「取り込みサーバー」は「取り込みエンドポイント」と同じではありません。それを確認するには、「その他の取り込みオプション」を開いて展開する必要があります。

それが完了したら、下の [ストリーミングを開始] ボタンをクリックするだけで、文字通りそれだけです。これは「実際の」ストリームに対して行うものではありませんが、セットアップがはるかに簡単かつ迅速です。

ストリーミングを開始したら、AWS コンソールに戻り、[ライブチャネル] をクリックすると、ストリームの動作を確認できます。

チャンネルの詳細に移動すると、そこにも表示されます。

ちなみに、現在および将来、過去のストリームやストリームに関するあらゆる種類の優れたメトリクスを表示できます。

この多くは私にとって馴染みのない用語を使用しているため、ストリーミングを初めて使用する場合は留意する必要があります (これは私がフィードバックとして Todd と共有したものでもあります) が、統計が好きなら AWS がカバーします。

ステップ 4 - フロントエンド

実際にストリームを表示するには、どこで表示するかを理解する必要があります。私が Web 担当であり、この投稿が Jamstack での実行に関するものであることを考慮すると、次に参照するのは、Jamstack のドキュメントにあるWeb ガイドです。繰り返しますが、最初の実装は非常に簡単です。

実装全体は次のとおりです。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

分解してみましょう。 SDK をロードする上部にスクリプトタグがあります。次に、重要な部分である<video>タグを含む HTML と、適切なサイズにするための CSS を用意します。

JavaScript はIVSPlayerのインスタンスを作成し、それを DOM にアタッチします。 pbURL値は AVS チャネル設定から取得されます。

そしてここでそれが実行されます！

さて、興奮しすぎる前に、これは使用できる最も単純なコードですが、実際には完全に完全ではないことに注意してください。テスト中に間違いなくこれに遭遇するでしょう。ストリーミングしていない場合は、試行するとエラーが発生します。ストリームをロードします。それは間違いなく理にかなっているので、より良いコードがそれを処理するでしょう。

Web リファレンスをざっと見たところ、イベントがサポートされていることがわかり、ストリームの開始をリッスンできるはずです。その時点でロードするか、DOM で何らかの処理を行って、Web ページを見ている人にストリームが開始されたことを知らせます。