Fusic Tech Live Vol.21


Typescript

夛田武広

フロントエンド技術で、配信を行う

夛田武広さんは、フロントエンド技術を駆使して配信を行っています。特に、NodeCGを活用した配信システムの構築に注力しています。

NodeDG(DB→Web)→ブラウザ→配信ツール→Youtubeの構成

NodeDGを使用して、データベースからWebへのデータ転送を行い、ブラウザで表示します。その後、配信ツールを通じてYouTubeに配信します。この一連の流れにより、リアルタイムでデータを視聴者に届けることが可能です。

フロントエンド技術で、配信フレームがレイアウト可能

フロントエンド技術を活用することで、配信フレームのレイアウトを自由にカスタマイズできます。これにより、視聴者にとって見やすく、魅力的な配信画面を作成することができます。

簡単に登壇者タイトルがダッシュボードに出せる

NodeCGを使用することで、登壇者のタイトルを簡単にダッシュボードに表示することができます。これにより、配信中にスムーズに情報を更新し、視聴者に最新の情報を提供することができます。

NodeCGとは

NodeCGは、配信やイベントのためのオープンソースのフレームワークです。以下の主要なコンポーネントで構成されています。

Bundle

Bundleは、NodeCGの基本的なパーツです。例えば、特定の機能やデザインをまとめたパッケージのようなものです。各Bundleは独立して動作するので、必要に応じて追加したり削除したりできます。例えば、スコアボードやチャットウィンドウなど、特定の機能を持つBundleを追加することができます。

Graphics

Graphicsは、配信画面に表示される画像やアニメーションのことです。NodeCGを使うと、これらのグラフィックを簡単に作成して配信に組み込むことができます。例えば、試合のスコアや選手の名前を表示するためのカスタマイズ可能なグラフィックを作成できます。

Replicant

Replicantは、データをリアルタイムで同期するための仕組みです。これにより、複数のコンピュータやブラウザ間で同じデータを共有することができます。例えば、スコアが更新されたら、すべての視聴者の画面に即座に反映されるようになります。

Dashboard

Dashboardは、配信の管理や設定を行うためのコントロールパネルです。ここから、配信の設定を変更したり、データを確認したりすることができます。例えば、登壇者の名前を入力したり、配信の開始・停止を行ったりすることができます。

Extensions

Extensionsは、NodeCGの機能を拡張するための追加プラグインです。これにより、必要な機能を追加してカスタマイズすることができます。例えば、新しいグラフィックのテンプレートやデータの取り込み方法を追加することができます。

実際の運用

ストリーミングソフトとの連携

NodeCGは、様々なストリーミングソフトと連携して使用することができます。特に、OBS(Open Broadcaster Software)との相性が良く、ブラウザの取り込み機能を利用して配信画面にNodeCGのグラフィックを表示することができます。

YoutubeはRTMPに対応した、ストリーミングツールで設定

YouTubeでの配信は、RTMP(Real-Time Messaging Protocol)に対応したストリーミングツールを使用して設定します。これにより、高品質なライブ配信が可能となります。

Back to list