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

先週、私は友人の Todd Sharp のライブ ストリーム、Streaming on Streaming に参加できたことをとてもうれしく思いました。そのセッションの録画はここで見ることができます。 https://www.twitch.tv/videos/1811192764?embedable=true 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 がストリームの後半で私に共有した別のオプション を共有させてください。これは、IVS のテストに使用できる Web ベースのストリーミング ソリューションです。 stream.ivs.rocks ブラウザでページを開き (Edge はサポートされていないと表示されていますが、私は問題ありませんでした)、歯車アイコンをクリックして設定に移動します。 「取り込みエンドポイント」と「ストリームキー」を指定する必要があります。どちらも AWS コンソールのチャネル詳細で見つけることができます。 私と同じ間違いをしないでください。「取り込みサーバー」は「取り込みエンドポイント」と同じではありません。それを確認するには、「その他の取り込みオプション」を開いて展開する必要があります。 それが完了したら、下の [ストリーミングを開始] ボタンをクリックするだけで、文字通りそれだけです。これは「実際の」ストリームに対して行うものではありませんが、セットアップがはるかに かつ迅速です。 簡単 ストリーミングを開始したら、AWS コンソールに戻り、[ライブ チャネル] をクリックすると、ストリームの動作を確認できます。 チャンネルの詳細に移動すると、そこにも表示されます。 ちなみに、現在および将来、過去のストリームやストリームに関するあらゆる種類の優れたメトリクスを表示できます。 この多くは私にとって馴染みのない用語を使用しているため、ストリーミングを初めて使用する場合は留意する必要があります (これは私がフィードバックとして Todd と共有したものでもあります) が、統計が好きなら AWS がカバーします。 ステップ 4 - フロントエンド 実際にストリームを表示するには、 表示するかを理解する必要があります。私が Web 担当であり、この投稿が Jamstack での実行に関するものであることを考慮すると、次に参照するのは、Jamstack のドキュメントにある です。繰り返しますが、最初の実装は非常に簡単です。 どこで Web ガイド 実装全体は次のとおりです。 video#video-player { width: 800px; height: 450px; } My Stream 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'); } 分解してみましょう。 SDK をロードする上部にスクリプト タグがあります。次に、重要な部分である タグを含む HTML と、適切なサイズにするための CSS を用意します。 JavaScript は のインスタンスを作成し、それを DOM にアタッチします。 値は AVS チャネル設定から取得されます。 IVSPlayer pbURL そしてここでそれが実行されます！ さて、興奮しすぎる前に、これは使用できる最も単純なコードですが、実際には完全に完全ではないことに注意してください。テスト中に間違いなくこれに遭遇するでしょう。ストリーミングしていない場合は、試行するとエラーが発生します。ストリームをロードします。それは 理にかなっているので、より良いコードがそれを処理するでしょう。 間違いなく をざっと見たところ、イベントがサポートされていることがわかり、ストリームの開始をリッスンできるはずです。その時点でロードするか、DOM で何らかの処理を行って、Web ページを見ている人にストリームが開始されたことを知らせます。 Web リファレンス それでおしまい！ 確かに、これはあまり本番環境に適したものではありませんが、文字通り 1 時間でストリーミング ソリューションを完成させることができました。これは無料ではないので、その点は留意する必要がありますが、すぐに使い始めることができることと、箱から出してどれだけのパワーが得られるかには本当に驚かされます。 また、AWS がすべてを処理するため、Jamstack に最適です。統合できるサーバーベースの API もあるので、そこで Netlify Functions などを使用することになります。 もう一度、 確認してください。理解しなければならないことはたくさんあるでしょうが、ここで触れたもの以外にもたくさんのことがあります。 ドキュメントを 次に、Todd が チェックしてください。そこでは、彼は多くの例を共有しています。最近では、 デモンストレーションし、続いて 示しました。 dev.to に投稿した投稿を ブラウザでのリアルタイムのマルチホスト ビデオ チャットを 複数のホストとライブ ストリーミングの例を再びブラウザで チャットに関する彼の投稿と、そこを管理する権限が私のお気に入りだと思います。また、彼が について書いた記事が特にクールなのでお勧めします。 独自の「LoFi」ラジオ局の作成